How to change "action" of <form > when <radio > is checked with jQuery?

Question

<form action="1.html">
    <input type="radio" id="check1" name="check" />
    <input type="radio" id="check2" name="check" />
</form>

What I want to implement is :

when "check2" is checked,change "action" value to "2.html"

when "check1" is checked,change "action" value back to "1.html"

Answer 1

This should take care of your problem.

$(function(){
    $('#check1').click(function() {
        $(this).parent().attr('action', '1.html');
    });

    $('#check2').click(function() {
        $(this).parent().attr('action', '2.html');
    });
});

Answer 2

The following should work:

$("#check1").click
(
  function()
  {
    $("form").attr("action", "1.html");
  }
);

$("#check2").click
(
  function()
  {
    $("form").attr("action", "2.html");
  }
);

Answer 3

Whilst the answers above are right, you need to be careful doing this kind of thing.

For example, say you click check2. It changes the action. You submit the form, or go to another page. Now you hit the back button.

The browser reloads the page*, resetting the form's action to the value given in the HTML. But! Browsers remember the previous values set in form fields, so check2 is still selected without you getting a click event: the state of the radios does not match the state of the form-action.

To avoid problems like this you should always scan the form values on page load and update anything that depends on them.

In general you should try to have a single action, with the receiving server-side script deciding what to do, rather than changing the action on-the-fly. This avoids bugs like the above, and stops the form breaking on non-JS UAs.

*: Firefox may not reload the page if it still has it in the loaded-page-DOM cache.