On submit of a form which submit button was clicked

Question

A validation() function needs to be called whenever a form is submitted which validates the input and based on that returns true or false. But based on two submit buttons there are two validation() functions. Here is an example

<form name="abc" id="abc" method="post" onsubmit="return validate()">
    <button type="submit" id="save">Save</button> 
    <button type="submit" id="edit">Edit</button> 
</form>
<script type = "text/javascript">
    document.getElementById("save").onclick = function() {
         validateSave();
    }
    document.getElementById("edit").onclick = function() {
         validateEdit();
    }
    function validateSave(){
          //do validation
    }
    function validateEdit(){
          //do validation
    }
    function validate(){
          //return true or false based on the validation 
    }
</script>

So basically I want to use onsubmit="return validate() weather to navigate to next page or remain in the same page. So how to use the onsubmit="return validate() alongwith the respective validation on basis of the button clicked.

Any leads/hint would be appreciated. Thanks

Possible duplicate of [this](http://stackoverflow.com/questions/3577469/form-onsubmit-determine-which-submit-button-was-pressed) — xitter, Dec 06 '16 at 11:32
It is similar but not exactly that. I found a way to tackle this problem. Will post it — user3214392, Dec 06 '16 at 11:37

score 1 · Answer 1 · answered Dec 06 '16 at 11:44

Do something like this :

HTML :

<form name="abc" id="abc" method="post">
    <button type="submit" id="save" onclick="validate(event)">Save</button> 
    <button type="submit" id="edit" onclick="validate(event)">Edit</button> 
</form>

JS :

function validateSave(){
      console.log("save");
      return false;
}
function validateEdit(){
      console.log("edit");
      return false;
}
function validate(event){
      event.preventDefault();
      event.stopPropagation();
      var callerId = event.target.id;
      var formElement = document.getElementById("abc");
      if (callerId === "Save") {
            formElement.onsubmit = validateSave(); // Or other value/function
      }
      else {
            formElement.onsubmit = validateEdit(); // Or other value/function
      }
      formElement.submit();
}

score 0 · Answer 2 · answered Dec 06 '16 at 11:52

I found a way by declaring a flag variable inside the javascript section

<form name="abc" id="abc" method="post" onsubmit="return validate()">
    <button type="submit" id="save">Save</button> 
    <button type="submit" id="edit">Edit</button>  
</form>
<script type = "text/javascript">
     var flag="";
     document.getElementById("save").onclick = function() {
         flag="Save";
     }
     document.getElementById("edit").onclick = function() {
         flag="Edit";
     }
     function validateSave(){
         //do validation
     }
     function validateEdit(){
         //do validation
     }
     function validate(){
         if(flag == "Save"){
             if(validateSave()){
                 return true;
             }
             else{ 
                 return false;
             }
         }
         if(flag == "Edit"){
             if(validateEdit()){
                 return true;
             }
             else{ 
                 return false;
             }
         }             
      }
 </script>

On submit of a form which submit button was clicked

2 Answers2