CODEWITHSUNDEEP
javascripthtml
just_in
just_in

Reputation: 447

multiple submit buttons on same form with onsubmit function

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

Upvotes: 5

Views: 11333

Answers (5)

trinalbadger587
trinalbadger587

Reputation: 2109

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>

Upvotes: 1

V_Rajput
V_Rajput

Reputation: 21

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.

Upvotes: 0

Robert Dodd
Robert Dodd

Reputation: 2187

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.net/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

Upvotes: 2

S.Yavari
S.Yavari

Reputation: 876

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.

Upvotes: -1

sgeddes
sgeddes

Reputation: 62861

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.

Upvotes: 0

Related Questions