Change form action based on submit button

Question

I have many forms like the following on the page. Now I want change the form action based on which submit button the user clicked (and of course submit the form)

<form action="/shop/products.php" data-ajax="false" method="post">
    <div data-role="fieldcontain">

        <input name="submit" class="obutn" type="submit" value="Order" />
        <input name="submit" class="oEbutn" type="submit" value="Extras" />

    </div>
</form>

I tried with

$(".obtn").click(function() {
    $(this).parent().parent().attr("action", "/shop/products.php");     
});
$(".oEbtn").click(function() {
    $(this).parent().parent().attr("action", "/shop/extras.php");       
});

but the form is always submited to products.php. Can you tell me what's wrong?

You could use .closest('form') instead of the two parent() selectors to clean it up a bit — Justin Bicknell, Jul 15 '13 at 18:52
Instead of setting the ```action``` attribute on the form itself, consider setting ```formaction``` attribute on each individual ```input``` element. Docs: http://www.w3.org/TR/html-markup/input.submit.html#input.submit.attrs.formaction — xorcus, Nov 19 '15 at 10:16

score 13 · Answer 1 · answered Nov 19 '15 at 10:18

Instead of setting the action attribute on the form itself, consider setting formaction attribute on each individual input element.

Docs: http://www.w3.org/TR/html-markup/input.submit.html#input.submit.attrs.formaction

<form data-ajax="false" method="post">
    <div data-role="fieldcontain">
        <input formaction="/shop/products.php" 
               name="submit" class="obutn" type="submit" value="Order" />
        <input formaction="/shop/extras.php" 
               name="submit" class="oEbutn" type="submit" value="Extras" />
    </div>
</form>

You can use `formaction` with `` – Jastrzebowski Apr 27 '18 at 13:13 — Jastrzebowski, Apr 27 '18 at 13:13

score 7 · Accepted Answer · answered Jul 15 '13 at 18:51

There are two typos:

obtn instead of obutn
oEbtn instead of oEbutn

Another suggestion is to use closest("form") to get the form that contains the clicked button.

$(".obutn").click(function() {
    $(this).closest("form").attr("action", "/shop/products.php");     
});
$(".oEbutn").click(function() {
    $(this).closest("form").attr("action", "/shop/extras.php");       
});

$("form").on("submit", function () {
    alert($(this).attr("action"));
});

JSFIDDLE

score 2 · Answer 3 · edited May 23 '17 at 10:29

2

Capture the submit event and determine which button was clicked. From that, you can change the action of the form.

Here's a link on how to do that.

How can I get the button that caused the submit from the form submit event?

edited May 23 '17 at 10:29

Community

1
1

answered Jul 15 '13 at 18:56

JeffRegan

1,322
9
25

score 1 · Answer 4 · answered Jul 15 '13 at 18:57

Also, don't give the form the action until the click happens at all, it is superfluous.

<form data-ajax="false" method="post">
   <div data-role="fieldcontain">

        <input name="submit" class="obutn" type="submit" value="Order" />
        <input name="submit" class="oEbutn" type="submit" value="Extras" />

    </div>
</form>

score 0 · Answer 5 · answered Jul 15 '13 at 18:58

What if you try it out with a switch instead? Something like:

<input name="submit" id = "1" class="obutn" type="submit" value="Order" />
<input name="submit" id = "2" class="oEbutn" type="submit" value="Extras" />

And then in JavaScript we have:

//param: The Id attr of the button that was clicked
function postTo(id){
  switch(id){
   case 1: postProducts();
           break;
   case 2: postExtras();
           break;

   default: //Do something else 

  }
}

Just an idea. Haven´t tested that yet, but maybe it could be helpful. I hope so.

No prob. Glad you found a solution :) – user1659653 Jul 15 '13 at 19:12 — user1659653, Jul 15 '13 at 19:12

Change form action based on submit button

5 Answers5

Linked