Having two forms which contain the same radio button group inside them?

My first question is this although I doubt if it is possible. However, if it is, it will make my life much easier.

Can you have a radio button group with 2 forms? What I mean is that the same radio button group is found in b开发者_Python百科oth form1 and form2.

The reason why I need this is to that if I click on the first 2 radio buttons, the form action will be to one page, while if I click on the last 2 radio buttons, the action will be to another page.

If this is not possible, I would use one form and will have to change the form action depending on which radio button I select. I will give a class to the first two radio buttons and another class to the other 2 radio buttons.

If anyone can let me know which method is better and how to implement it in jQuery, that would be great.

Many thanks in advance

You cannot have a single group of form elements be part of two separate forms. It's just not possible to construct a valid document like that.

Javascript that dynamically updates the URL in the "action" property of the parent <form> should not be too hard to do. As you suggested, the "class" attribute of the radio button elements can be used to guide the code, making it pretty flexible if you need to add one or more buttons later on.

Since you included the jQuery tag:

$(function() {
  var actionMap = {
    key1: 'http://yoursite.com/some/action/1',
    key2: 'http://yoursite.com/some/action/2',
    /* ... */
  };

  $('input:radio').click(function() {
    var $rb = $(this);
    for (var key in actionMap) {
      if ($rb.hasClass(key))
        $rb.closest('form').attr('action', actionMap[key]);
    }
  });
});

or something. You could also use an HTML5-style "data-" attribute to store the URLs directly on the radio button elements, or a key fragment of the URL. (Also might want to handle the "change" event the same way, etc.)

The one form, alternate action pages seems to be the way to go. If you're going to use classes for the radio buttons then something like this would work.

Live example

JavaScript

// override the action page based on which radio button is checked
$('#someForm').submit( function(e) {
    if($('.useDefault:checked').length == 1) this.action = 'http://www.google.com';
    else this.action = 'http://wikipedia.org';
});

HTML

<form id="someForm" action="#">
    <input name="rad" type="radio" value="default0" class="useDefault" /><label>default0</label>
    <br />
    <input name="rad" type="radio" value="default1" class="useDefault" /><label>default1</label>
    <br />
    <input name="rad" type="radio" value="alternate0" class="useAlternate" /><label>useAlternate0</label>
    <br />
    <input name="rad" type="radio" value="alternate1" class="useAlternate" /><label>useAlternate1</label>
    <br />
    <input type="submit" value="submit"/>
</form>

I have implemented the right solution with some help from Pointy. Here is my code:

$(function() {
    $('input:radio').click(function() {
        var $rb = $(this);

        if ($rb.hasClass('class1')){
            $("#myForm").attr("action", "link1.php");
        }else if($rb.hasClass('class2')){
            $rb.closest('form').attr("action", "link2.php");
        }
    });

    $('#btnProceed').click(function(){
      $('#myForm').submit();
    });
});