2015-02-08 69 views
0

我正在嘗試創建一個表單,它將接受用戶輸入來創建數據庫查詢。我有三個按鈕:並且,或者,運行點擊任何按鈕提交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> 

回答

2

對按鈕「提交」的默認類型,所以你必須明確地說,你要的是普通按鈕:

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

這樣就不會提交表單點擊時。 (當然,除非你告訴它:))

+1

我真是個傻瓜。這是一件小事,我忘了:) – 2015-02-09 05:40:19

0

,你必須改變

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

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

,然後,如果點擊按鈕的行爲被迫重新加載頁面嘗試更改其他表單元素上的按鈕或查看jQuery的e.preventdefaulT