分享
三行代码  ›  专栏  ›  技术社区  ›  Evgeniy

如何在这个表单中分离HTML和Javascript?

  •  1
  • Evgeniy  · 技术社区  · 3 天前

    不, this topic 根本不回答我的问题。做任何事之前请先阅读这个问题。

    我有一个带有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>
    2 回复  |  直到 3 天前
        1
  •  2
  •   Cannicide    3 天前

    使用 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