javascript - window.open 不适用于表单

Question

我试图打开一个新页面时 form单击提交。 当 <form></form> 时，此代码可以很好地工作。标签不存在。为什么？我怎样才能让它与表单标签一起工作？

HTML

<form name="input">
    <input id="Answer" name="Answer" value="" placeholder="something"/>
    ...
    <input id="Answer" name="Answer" value="" placeholder="something"/>
    <input type="submit" value="Submit" onclick="reload(this)"/>
</form>

JS

function reload(e) {
    e.preventDefault();
    // do somthing with inputs
    window.open('new_page.html', '_self');
//  window.location.href = 'new_page.html';
}

我都尝试了window.open('new_page.html', '_self'); , window.location.href = 'new_page.html';还有e.form.preventDefault;

jsFiddle

Answer 1

简单的答案是，您没有将 event 传递给函数，而是将 HTMLInputElement 传递给函数(使用 this code> 变量)，如果您传入 event (并假设已更正 HTML)，则:

<form name="input">
    <input id="Answer" name="Answer" value="" placeholder="something"/>
    <input id="Answer" name="Answer" value="" placeholder="something"/>
    <input id="Answer" name="Answer" value="" placeholder="something"/>
    <input type="submit" value="Submit" onclick="reload(event)" />
</form>

还有:

function reload(e) {
    console.log(e);
    e.preventDefault();
    // do somthing with inputs
    window.open('http://example.com/', '_self');
}

JS Fiddle demo

然后它就会按照您的预期工作。

但是，就我个人而言，我不喜欢使用内联事件处理，而是使用不显眼的 JavaScript:

<form name="input" method="post" action="#">
    <input id="Answer" name="Answer" value="" placeholder="something" />
    <input id="Answer" name="Answer" value="" placeholder="something" />
    <input id="Answer" name="Answer" value="" placeholder="something" />
    <input type="submit" value="Submit" />
</form>

与:

function reload (e){
    e.preventDefault();
    var win = window.open('http://example.com/', '_self');
}

var form = document.getElementsByName('input')[0];

form.addEventListener('submit', reload);

JS Fiddle demo .