如何以这种形式将 HTML 与 Javascript 分开？

Question

不，这个话题根本没有回答我的问题。请在做任何事情之前阅读问题。

我有一个带有 Javascript 的表单，它按预期工作：

<script>

  function checkForm(form)

  {

    if(form.cb1.checked) {

window.open('http://google.com/','_blank');

    }

        if(form.cb2.checked) {

window.open('http://yahoo.com/','_blank');

    }

    return true;

  }

</script>

<form onsubmit="return checkForm(this);">

    <label for="cb1">G</label>

    <input name="cb1" type="checkbox">

    <label for="cb2">Y</label>

    <input name="cb2" type="checkbox">

    <input type="submit" value="Submit">

</form>

但如果我尝试将 HTML 与 JS 分开，它就会停止工作。

单击SubmitURL后checkbox.html?cb1=on，如果第一个复选框被选中，则更改为 ；checkbox.html?cb2=on如果第二个复选框被选中，则更改为checkbox.html?cb1=on&cb2=on；如果两个复选框都被选中，则更改为 。但带有网址的选项卡无法打开。

我的分离尝试如下：

document.getElementById('cbx').addEventListener(

    'submit', function checkForm(event) {

    if (form.cb1.checked) {

        window.open('http://google.com/', '_blank');

    }

    if (form.cb2.checked) {

        window.open('http://yahoo.com/', '_blank');

    }

    return true;

});

    <form id="cbx">

    

    <label for="cb1">G</label>

    <input name="cb1" type="checkbox">

    

    <label for="cb2">Y</label>

    <input name="cb2" type="checkbox">

    

    <input type="submit" value="Submit">

    

</form>

<script type="text/javascript" src="form.js"></script>

Answer 1

用来event.preventDefault()解决问题。return true它本质上与在 HTML 元素属性（如 ）内执行的操作相同onsubmit，它可以防止通常发生的默认行为。如果您希望发生在新选项卡中打开某些 URL 的自定义行为，则必须首先覆盖默认行为。另外，请确保您的表单变量在某处定义，不确定它是否在您的代码中，因为它不在您的第二个示例中。document.getElementById('cbx').addEventListener(&nbsp; &nbsp; 'submit', function checkForm(event) {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; //Prevents default action that would normally happen onsubmit&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; //Define the form element&nbsp; &nbsp; var form = document.getElementById("cbx");&nbsp; &nbsp; if (form.cb1.checked) {&nbsp; &nbsp; &nbsp; &nbsp; window.open('http://google.com/', '_blank');&nbsp; &nbsp; }&nbsp; &nbsp; if (form.cb2.checked) {&nbsp; &nbsp; &nbsp; &nbsp; window.open('http://yahoo.com/', '_blank');&nbsp; &nbsp; }&nbsp; &nbsp; return true;});<form id="cbx">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <label for="cb1">G</label>&nbsp; &nbsp; <input name="cb1" type="checkbox">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <label for="cb2">Y</label>&nbsp; &nbsp; <input name="cb2" type="checkbox">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <input type="submit" value="Submit">&nbsp; &nbsp;&nbsp;</form>该代码经过测试并且可以工作。（由于代码片段对新选项卡中打开 URL 的反应，它在代码片段中不起作用，但这里有一个有效的JSFiddle。）