How can you have multiple radio buttons work in separate forms?

Question

I have a bunch of separate forms that each have a radio button attached to them. Because they are separate forms it doesn't seem to realize that they are still the same group. Is there a way to fix this?

Answers 1-8 should all be part of the same radio button group and only one of the 8 should be selected at a time.

<label class="control-label">group 1:</label>
<form class="controls">
  <label class="radio"><input checked id="optionsRadios1" name="optionsRadios" type="radio" value="workTipe1"> answer 1</label>
  <label class="radio"><input checked id="optionsRadios2" name="optionsRadios" type="radio" value="workTipe2"> answer 2</label>
</form>
<form class="controls">
  <label class="radio"><input checked id="optionsRadios1" name="optionsRadios" type="radio" value="workTipe1"> answer 3</label>
  <label class="radio"><input checked id="optionsRadios2" name="optionsRadios" type="radio" value="workTipe2"> answer 4</label>
</form>
<div>
  <form class="controls">
    <label class="radio"><input checked id="optionsRadios1" name="optionsRadios" type="radio" value="workTipe1"> answer 5</label>
    <label class="radio"><input checked id="optionsRadios2" name="optionsRadios" type="radio" value="workTipe2"> answer 6</label>
  </form>
</div>
<form class="controls">
  <label class="radio"><input checked id="optionsRadios1" name="optionsRadios" type="radio" value="workTipe1"> answer 7</label>
  <label class="radio"><input checked id="optionsRadios2" name="optionsRadios" type="radio" value="workTipe2"> answer 8</label>
</form>

This is just a bare bones example of what I'm working with. In the app, each of these radio buttons exists in a separate form that is created when clicking a button. The form itself contains a header and input boxes. The radio button toggles which is the required one to use in the database. Each of these is tied directly to the form that they are instantiated with.

Do you really need to separate into 3 forms? the form tag is more about functionality than styling. I understand you can have 3 sections but is it really necessary to have 3 forms? — Vinícius Negrão, Feb 17 '17 at 14:41
USe one form and different radio groups instead of one form per group. — Shilly, Feb 17 '17 at 14:44
@Andreas I updated the post with some additional info on why the forms are needed — Daniel B, Feb 17 '17 at 14:54
Sounds like you're using `
` where you should be using `
`... — Heretic Monkey, Feb 17 '17 at 16:35
@MikeMcCaughan That was the problem! Using
fixed the issue we have been having. Need to massage a bit of our old code to get it 100%, but this is exactly what we needed like 4 months ago haha. Thank you! — Daniel B, Feb 17 '17 at 16:58

score 1 · Answer 1 · answered Feb 17 '17 at 16:39

If I understood your question correct. Please try with my example!

<form>
  <fieldset class="radiogroup">
    <legend>Group 1</legend>
    <ul class="radio">
      <li>
        <input type="radio" name="group1" id="answer1" value="deep" />
        <label for="answer1">Answer 1</label>
      </li>
      <li>
        <input type="radio" name="group1" id="answer2" value="thick" />
        <label for="answer2">Answer 2</label>
      </li>
    </ul>
  </fieldset>

  <fieldset class="radiogroup">
    <legend>Group 2</legend>
    <ul class="radio">
      <li>
        <input type="radio" name="group2" id="answer3" value="Answer 3" />
        <label for="answer1">Answer 3</label>
      </li>
      <li>
        <input type="radio" name="group2" id="answer4" value="Answer 4" />
        <label for="answer2">Answer 4</label>
      </li>
    </ul>
  </fieldset>

  <fieldset class="radiogroup">
    <legend>Group 3</legend>
    <ul class="radio">
      <li>
        <input type="radio" name="group3" id="answer5" value="Answer 5" />
        <label for="answer1">Answer 5</label>
      </li>
      <li>
        <input type="radio" name="group3" id="answer6" value="Answer 6" />
        <label for="answer2">Answer 6</label>
      </li>
    </ul>
  </fieldset>
</form>

mesie_pinel · Answer 2 · 2017-02-17T14:50:00.487

0

If I understood correct.

You must have the same name in your input radio tag. Put it all inside a unique form and after the action (post or get) to your next page use the value to whatever you want.

edited Feb 17 '17 at 14:50

answered Feb 17 '17 at 14:43

mesie_pinel

11
5

score 0 · Answer 3 · edited Feb 17 '17 at 16:21

0

You can embed one form into another like this it might help:

<form>
  <input checked name="gender" type="radio" value="male"> CHess<br>
  <input name="gender" type="radio" value="female"> Football<br>
  <input name="gender" type="radio" value="other"> Other<br>
  <form>
    <input checked name="gender" type="radio" value="male">Cricket<br>
    <input name="gender" type="radio" value="female"> HOckey<br>
    <input name="gender" type="radio" value="other"> Other
  </form>
</form>

edited Feb 17 '17 at 16:21

hungerstar

21,206
6
50
59

answered Feb 17 '17 at 14:54

user7436968

18
3

1

That would be invalid HTML. See http://stackoverflow.com/a/555970/215552. – Heretic Monkey Feb 17 '17 at 16:34
No you cannot. Good try though! – scoopzilla Feb 17 '17 at 18:29

How can you have multiple radio buttons work in separate forms?

3 Answers3