window.open无法处理表单

window.open not working with form

本文关键字：处理 表单 open window      更新时间：2023-09-26

单击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

简单的答案是，您不是在向函数传递event，而是在传递HTMLInputElement（带有this变量），如果您改为传递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演示

然后它就像你所期望的那样工作。

然而，就我个人而言，我不喜欢使用内联事件处理，而是使用不引人注目的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演示。

相关文章：