複数のサブミットボタンを含む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ハンドラに移動します。 falseはここ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

によって返された場合の提出をキャンセルするonclick呼び出しでreturnを使用して、私はそれを行うだろうかです...あなたはこのようなあなたの文書でのことを含まなければならないので、まず私はjQueryのを使用します。

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

それはまた、あなたのHTMLがに簡素化することができますを意味します。そして、あなたはjQueryのを使用することができます

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

：

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