CODEWITHSUNDEEP
htmlformsradio-button
SMAmmar14
SMAmmar14

Reputation: 29

Unable to select radio button option for multiple questions

I have run into a problem related to radio buttons. The issue is that I have around 7 questions and each question has 2 options of radio button in 2 columns. So if I select an option for the first question, and then want to select the option for 2nd question. The selected radio buttons disappear from the first question and appear on the 2nd one. The issue is that I can not select more than one question.

Here is the code

<td colspan="4" style="align-items: center;">
  <div class="form-group m-0 m-b-15">
    <div class="radio mt-radio-inline">
      <input type="radio" name="q1"  id="q_1_w" >
      <label for="q_1_w" >Yes</label>
      <input type="radio" name="q1"  id="q_1_x">
      <label for="q_1_x" style="margin-left: 30px;">No</label>
    </div>
  </div>
</td>
<td colspan="6">
  <div class="form-group m-0 m-b-15">
    <div class="radio mt-radio-inline">
      <input type="radio" name="q1" id="q_1_y" >
      <label for="q_1_y" >Yes</label>
      <input type="radio" name="q1" id="q_1_z">
      <label for="q_1_z" style="margin-left: 30px;">No</label>
    </div>
  </div>
</td>

Upvotes: 0

Views: 763

Answers (2)

Mister Jojo
Mister Jojo

Reputation: 22265

Do it this way:

const myForm = document.forms['my-form']

myForm.onsubmit = evt =>
  {
  evt.preventDefault() // disable submit
  
  console.clear()
  console.log('q1 =', myForm.q1.value )
  console.log('q2 =', myForm.q2.value )
  }
<form name="my-form">
  <h5> Question 1 </h5>

  <label> <input type="radio" name="q1" value="yes"> Yes </label>
  <label> <input type="radio" name="q1" value="no"> No </label>

  
  <h5> Question 2 </h5>

  <label> <input type="radio" name="q2" value="yes"> Yes </label>
  <label> <input type="radio" name="q2" value="no"> No </label>

  <hr>
  <button type="submit"> read values </button>
</form>

Upvotes: 0

Mohmd labeeb
Mohmd labeeb

Reputation: 166

I believe the issue is because you gave the same name for all the radio buttons, try giving different names. For example :-

Try using name="q2" for the second one.

    <div class="form-group m-0 m-b-15">
     <div class="radio mt-radio-inline">
     <input type="radio" name="q2"  id="q_1_y" ><label for="q_1_y" >Yes</label>
     <input type="radio" name="q2"  id="q_1_z"><label for="q_1_z" style="margin-left: 30px;">No</label>
    </div>

Upvotes: 2

Related Questions