点击任何按钮提交form.how来阻止它？

问题描述：

我正在尝试创建一个表单，它将接受用户输入来创建数据库查询。我有三个按钮：并且，或者，运行。点击任何按钮提交form.how来阻止它？

我正在创建动态元素点击按钮和和或。 enter image description here

该div search_list是包含元素的容器。我需要通过单击运行提交表单。

奇怪的是，每当我点击任何按钮表单被提交。我该如何阻止它？请让我知道如果你需要更多的信息。

感谢

 <html> 
     <head> 
     <script type="text/javascript"> 

      var count = 0; 
      function loadfirst(){ 
       count=1; 
       addFilter(''); 
      } 
      function addFilter(flag){ 
       var div = document.querySelector("#search_list"); 
       tr = document.createElement("tr"); 
       select = document.createElement("select"); 
       var sear_value = document.createElement("input"); 
       var and_or = document.createTextNode(flag); 
       tr.id='tr_'+count; 
       select.id='sl_'+count; 
       sear_value.id='sear_value_'+count; 

       select.options.add(new Option("user id","user_id", true,true)); 
       select.options.add(new Option("First name","first_name")); 
       select.options.add(new Option("Last name","last_name")); 
       select.options.add(new Option("Course","course")); 

       sear_value.type="text"; 

       if(count<=1){ 
        var bt_and= document.createElement("button"); 
        bt_and.id='and'; 
        var bt_label = document.createTextNode("And"); 
        bt_and.appendChild(bt_label); 
        bt_and.addEventListener('click', function() { 
         addFilter('and'); 
         return false; 
        }); 

        var bt_or= document.createElement("button"); 
        bt_or.id='or'; 
        var bt_label = document.createTextNode("Or"); 
        bt_or.appendChild(bt_label); 
        bt_or.addEventListener('click', function() { 
         addFilter('or'); 
         return false; 
        }); 
       } 
       else{ 
        var bt_rem= document.createElement("button"); 
        bt_rem.id='rem_'+count; 
        var bt_label1 = document.createTextNode("x"); 
        bt_rem.appendChild(bt_label1); 
        var tr_id = 'tr_'+count; 

        bt_rem.addEventListener('click', function() { 
        var element= document.getElementById(tr_id); 
         element.parentNode.removeChild(element); 
         return false; 
        }); 
       } 

       tr.appendChild(and_or); 
       tr.appendChild(select); 
       tr.appendChild(sear_value); 
       if(count<=1){ 
        tr.appendChild(bt_and); 
        tr.appendChild(bt_or); 
       } 
       else{ 
        tr.appendChild(bt_rem); 
       } 
       div.appendChild(tr); 

       count++; 
      } 

      function getFilter(){ 

       alert(); 

      } 




     </script> 
     </head> 

     <body onload="loadfirst()"> 

     <span id='manage_stud_header' class= 'list_header'> 

      <label><?php echo $module_name;?></label> 
      &nbsp;&nbsp; 
      <center> 
       <form> 
       <div id='search_list' class='search'></div> 
       <button id="run_filter" type="submit">Run</button> 
       </form> 
      </center> 

     </span> 
     </body> 
     </html>

答

对按钮“提交”的默认类型，所以你必须明确地说，你要的是普通按钮：

var bt_and= document.createElement("button"); 
bt_and.type = "button";

这样就不会提交表单点击时。（当然，除非你告诉它:)）

我真是个傻瓜。这是一件小事，我忘了:) – 2015-02-09 05:40:19

答

，你必须改变

在

<button id = "run_filter" type = "submit" > Run </button>

<input id = "run_filter" type = "submit" value="Run" />

，然后，如果点击按钮的行为*重新加载页面尝试更改其他表单元素上的按钮或查看jQuery的e.preventdefaulT

点击任何按钮提交form.how来阻止它？

相关推荐