CODEWITHSUNDEEP
htmlformsradio-button
JoannaFalkowska
JoannaFalkowska

Reputation: 3677

Two radio buttons with the same name don't get grouped

My HTML:

<section>
  <radiogroup>
    <form>
      <input name="tabs" type="radio" />
    </form>
    <form>
      <input name="tabs" type="radio" />
    </form>
  </radiogroup>
</section>

jsfiddle

Radiobuttons with the same name still don't get grouped because they are inside two different <form> elements. Is it possible to enforce them to group?

EDITED: Yes, I'm aware that putting them in the same <form> would do the job, but I want to keep this HTML structure. I asked the question for a reason. It contains only code necessary to reproduce, but in fact the forms are much more deeply placed in divs etc.

Upvotes: 0

Views: 1694

Answers (3)

0x4Dark
0x4Dark

Reputation: 214

You can force it over Javascript.
Just get all of your radio buttons in an array and set all of them ever time once are clicked.

var $radios = $('input[type=radio]');
$radios.change(function(){
  $radios.prop('checked', false);
  $(this).prop('checked', true);
});

Quick example in this fiddle https://jsfiddle.net/Lecct8L0/

But your HTML Struktur are doesnt seems really logical for me.

Upvotes: 1

Majid
Majid

Reputation: 14243

Try to use one <form> instead:

    <section>
        <radiogroup>
           <form>
             <input name="tabs" type="radio" />
             <input name="tabs" type="radio" />
           </form>
        </radiogroup>
    </section>

Upvotes: 0

Mike Donkers
Mike Donkers

Reputation: 3689

Place them in the same form like so:

<section>
    <radiogroup>
       <form>
           <input name="tabs" type="radio" />

           <input name="tabs" type="radio" />
       </form>
   </radiogroup>
</section>

And they will be grouped

Updated Fiddle

Hope this helps!

Upvotes: 0

Related Questions