multiple submit buttons on same form with onsubmit function

Question

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

Use on click event on each button to call the submit function with different parameters — Floris
– Floris, Commented Feb 4, 2013 at 3:43

Robert Dodd · Accepted Answer · 2013-02-04 10:21:46Z

2

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

edited Feb 4, 2013 at 10:21

answered Feb 4, 2013 at 4:01

Robert Dodd

2,1872 gold badges21 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

He Hui Over a year ago

OP is asking for a Javascript solution. The solution you provided is a jQuery solution.

Max Murphy Over a year ago

In the onclick handler you can do "this.form.myhiddeninput.value=99" as in this fiddle: jsfiddle.net/htsbx484

trinalbadger587 · Accepted Answer · 2022-10-27 21:44:02Z

1

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>

answered Oct 27, 2022 at 21:44

trinalbadger587

2,1251 gold badge23 silver badges41 bronze badges

Comments

sgeddes · Accepted Answer · 2013-02-04 03:43:20Z

0

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.

answered Feb 4, 2013 at 3:43

sgeddes

62.9k7 gold badges68 silver badges85 bronze badges

2 Comments

just_in Over a year ago

why i am using this method is because based on the submit button i have to pass some parameters to my python-script(flask frame work). any way>

sgeddes Over a year ago

Ok, but you should still be able to move your submitform logic from your form onsubmit to each submit button's onclick event -- make sense?

V_Rajput · Accepted Answer · 2014-01-06 07:17:27Z

0

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.

answered Jan 6, 2014 at 7:17

V_Rajput

212 bronze badges

Comments

S.Yavari · Accepted Answer · 2013-02-04 05:14:49Z

-1

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.

answered Feb 4, 2013 at 5:14

S.Yavari

8861 gold badge8 silver badges27 bronze badges

3 Comments

just_in Over a year ago

Can you also tell me how i can transfer the parameter to java script?

Robert Dodd Over a year ago

You could use document.getElementById('seachfield').value This returns the value of the element with id="searchfield". Inside the javascript function you can call it for each element in the form. Make sure they all have unique id's.

S.Yavari Over a year ago

function submitform(id){ 	if (id == 1); // do somthing 	else if (id == 2); // do somthing 	else if (id == 3); // do somthing }

Collectives™ on Stack Overflow

multiple submit buttons on same form with onsubmit function

5 Answers 5

2 Comments

Comments

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related