Button formaction attribute

Sometimes there is something that bothers you and you cannot let it go.

That's what happened to me with the button elements formaction attribute.

What I wanted to understand is how the formaction attribute is processed when a form is submitted.

For those who don't know the <button> element has 2 types: button and submit. When you use the submit type you can then use the formaction attribute to alter the forms destination (action).

For example:

<button type="submit" name="btn1" formaction="/example.html">GO</button>

Scenario: I have a form with an action specified as well as a submit button with a formaction specified.

<form id="form_test1" name="form_test1" action="http://www.google.com">
    <button type="submit" name="btn1" formaction="http://www.xe.com">XE.com (Button)</button>
    <input type="submit" name="btn2" value="XE.com (Input)" />
</form>

When you submit the form using an INPUT element the FORM action is what the browser will use to determine the action to take. You can easily write some code to listen for the submit event and then view the action. Essentially though as you are still working on the clientside you normally would only get the value of the FORM attribute "action'.

I really wanted to understand what happens with the formaction attribute though.

What I have learnt is that once the FORM is submitted the browser actually looks to see if a BUTTON was pressed (of the type submit) and if the formaction attribute is set. It then takes the appropriate action.

$(document).ready(function() {
    $("#form_test1").submit(function(e, el) {
        e.preventDefault();
        var objClicked = $(e.originalEvent.explicitOriginalTarget);
        (objClicked.attr("formaction") !== undefined ? alert("Form action URL: "+objClicked.attr("formaction")) : alert("Form action URL: "+$(this).attr("action")));
        return false;
    });
});