CODEWITHSUNDEEP
javascripthtmlangularjscss
Daniel B
Daniel B

Reputation: 23

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

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.

Upvotes: 0

Views: 3037

Answers (3)

Sophea Phy
Sophea Phy

Reputation: 388

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>

Upvotes: 1

user7436968
user7436968

Reputation: 26

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>

Upvotes: -1

mesie_pinel
mesie_pinel

Reputation: 11

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.

Upvotes: 0

Related Questions