如何以这种形式将 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 分开，它将停止工作。

点击后Submit的URL变化checkbox.html?cb1=on ，如果第一个复选框被选中，还是checkbox.html?cb2=on ，如果第二复选框被选中，还是checkbox.html?cb1=on&cb2=on ，如果两者都选中。 但是带有 url 的标签不会打开。

我的分离尝试看起来像：

 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()解决问题。 它本质上与在诸如onsubmit类的 HTML 元素属性中执行return true相同，它可以防止通常会发生的默认行为。 如果您希望在新选项卡中打开某些 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 。）