I have 3 sumbit buttons in myform and i need different 3 actions based on which buttton it clicked. so i need to write javascript function to do the same. how i can get to know in javascript which button is clicked.

Javascript:

<script type="text/javascript" language="javascript">
function submitform(){
    //do something
}

HTML:

form name="myform" method="get,post" onsubmit="return submitform();"
input type="submit" name="submit" value="Home"
input type="submit" name="submit" value="Reschedule"
input type="submit" name="submit" value="Cancel"

Any help will be appreciated

I have 3 sumbit buttons in myform and i need different 3 actions based on which buttton it clicked. so i need to write javascript function to do the same. how i can get to know in javascript which button is clicked.

Javascript:

<script type="text/javascript" language="javascript">
function submitform(){
    //do something
}

HTML:

form name="myform" method="get,post" onsubmit="return submitform();"
input type="submit" name="submit" value="Home"
input type="submit" name="submit" value="Reschedule"
input type="submit" name="submit" value="Cancel"

Any help will be appreciated

• javascript
• html

• Use on click event on each button to call the submit function with different parameters – Floris Commented Feb 4, 2013 at 3:43
• can't have one form with 2 submit button – Dipak Commented Feb 4, 2013 at 4:02

5 Answers 5

Edit:

You could also have a hidden input which tells you which button was pressed, then handle it on the server. When a button is clicked it will change that input before submitting.

<input type="submit" onclick="javascript:document.getElementById('submitClicked').value='forward';return true;" id="linkName" value="Forward" />
<input type="submit" onclick="javascript:document.getElementById('submitClicked').value='back';return true;" id="back" value="Back" />

Demo: http://jsfiddle/Homeliss/vperb/

Note: the demo uses jquery to show a message instead of posting the form, but that is just for demo purposes. The solution is plain javascript

In modern browsers, you can use the submitter property of a SubmitEvent.

function submitForm(submitType)
{
    switch (submitType)
    {
        case 'Submit 1':
            console.log('Submit 1');
            break;
        case 'Submit 2':
            console.log('Submit 2');
            break;
    }
    return false;
}

<form onsubmit="return submitForm(event.submitter.value)">
  Name: <input name="name" required /><br />
  <div>
    <input type="submit" value="Submit 1" />
    <button type="submit" value="Submit 2">Submit 2</button>
  </div>
</form>

If you could use jQuery, then this could be much easier.

One solution however would be to remove the submitform() from the form and add it to the onclick event of each of your submit buttons. This way, you can alter it to pass a parameter denoting which button called it.

Good luck.

we can submit a form once in html pages. So we use only one submit button in a form. But for calling more functions we can use onClick event and input type should be button.

I have a question. is there any other input field inside your form? If there is another field such as text field, which buttons action will be call when we press Enter inside the text field?

My suggestion is this:

<form name="myform" method="get,post" onsubmit="return false;">
    <input type="button" value="Home" onclick="submitform(1)" />
    <input type="button" value="Reschedule" onclick="submitform(2)" />
    <input type="button" value="Cancel" onclick="submitform(3)" />
</form>

in this code, user must click on a button to submit the form and pressing the enter will not cuse to doing any action.