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?

Answer 1

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>