帶有多個提交按鈕的html表單

Question

我在HTML表單中有2個提交按鈕。

如何知道哪個提交按鈕觸發了JavaScript功能？

<script language="javascript" type="text/javascript"> 
    function verifyData(formdata) { 

     // Here I want to know from which submit button this function is triggered 

     // I can't use type button instead of submit 

     // I can't use onclick handler 

     // I can't use JQuery.. I want to do only with     javascript       

    } 
</script> 

<form onsubmit="verifyData(this);" method="post"> 
    <input type="submit" value="submit1"> 
    <input type="submit" value="submit2"> 
</form> 

<button value="delete row" id="but1" onclick="disps()">delete row</button> 

我想根據點擊不同的提交按鈕做不同的操作。

Answer 1

如何在兩個按鈕上放置一個onclick事件處理函數，它將設置一個變量來說出哪個按鈕被點擊了？ 像這樣：

<script language="javascript" type="text/javascript"> 
    function verifyData(formdata) { 
     alert(btnClicked); 
     // Here I want to know from which submit button this function is triggered 

     // I can't use type button instead of submit 

    } 

    var btnClicked = 0; 


    function setSubmit(which) { 
     btnClicked = which; return true; 
    } 
</script> 

<form onsubmit="verifyData(this);" method="post"> 
    <input type="submit" value="submit1" onclick="return setSubmit(1);"> 
    <input type="submit" value="submit2" onclick="return setSubmit(2);"> 
</form> 

Answer 2

你允許使用jQuery庫？

如果你可以使用它，你可以很容易地綁定到基於id的每個提交按鈕。

例如：

<form id="form1" method="post"> 
    <input type="submit" value="submit1" id="submit1"> 
    <input type="submit" value="submit2" id="submit2" > 
</form> 

<script type="text/javascript"> 
    $("#submit1").click(function(e) 
    { 
    // Do stuff when 1 is clicked. 
    $("#form1").submit(); 
    }); 
    $("#submit2").click(function(e) 
    { 
    // Do stuff when 2 is clicked. 
    $("#form1").submit(); 
    });  
</script> 

你也可以有按鈕作爲一種類型的button，以避免任何問題，但你應該能夠簡單地return false;從停止submit類型的按鈕提交...

Answer 3

無法檢查通過onsubmit事件點擊的按鈕。而是將呼叫移至verifyData()至每個按鈕的onclick處理程序。使用return在onclick呼籲取消提交如有虛假由verifyData()

<script language="javascript" type="text/javascript"> 
    function verifyData(button) { 
     // validate 
     switch (button.value) { 
      case "submit1": 
       // do somehting 
       break; 
      case "submit2": 
       // do somehting 
       break; 

      // ... 
     }; 

     // submit the form 
     return true; 
    } 
</script> 

<form method="post"> 
    <input type="submit" value="submit1" onclick="return verifyData(this);"> 
    <input type="submit" value="submit2" onclick="return verifyData(this);"> 
</form> 

Answer 4

這裏返回的我會怎麼做呢？首先，我會使用jQuery，所以你必須包括你的文檔像這樣：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

這也意味着你的HTML可以簡化爲：

<form method="post"> 
    <input type="submit" value="submit1"/> 
    <input type="submit" value="submit2"/> 
</form> 

然後你可以使用jQuery：

<script> 
    // When the document is ready 
    $(function(){ 
     // Action performed when a submit button in the form is clicked 
     $("form[type='submit']").click(function(e){ 

      // Get the value attribute 
      var val = $(this).val(), 
      validation_has_passed = false; 

      // If it is submit1 
      if(val == "submit1") { 
       // Validate submit 1 
       validation_has_passed = true; 

      // If it is submit2 
      } else if(val == "submit2") { 
       // Validate submit 2 
       validation_has_passed = true; 

      } 

      // If all validation is OK submit the form 
      if(validation_has_passed === true) { 
       $("form").submit(); 
      } 

      // Ensure pressing these buttons doesn't submit the form 
      e.preventDefault(); 

     }); 
    }); 
</script>