如何以这种形式将 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(

    'submit', function checkForm(event) {

    

    //Prevents default action that would normally happen onsubmit

    event.preventDefault();

    

    //Define the form element

    var form = document.getElementById("cbx");

    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>

该代码经过测试并且可以工作。（由于代码片段对新选项卡中打开 URL 的反应，它在代码片段中不起作用，但这里有一个有效的JSFiddle。）