Why is my HTML form only able to register one answer at a time?-CodePudding

I need a Likert scale for a study I'm conducting, and then I found a good looking, ready made one at https://codepen.io/Buttonpresser/pen/poXVod

My problem is that if I choose an answer for one question, that answer is then deselected once I answer a different question. I've tried to look at other forms to figure out what the difference is, but to no avail.

<form action="">
  <label >This HTML Likert scale is easy to use.</label>
  <ul class='likert'>
    <li>
      <input type="radio" name="likert" value="strong_agree">
      <label>Strongly agree</label>
    </li>
    <li>
      <input type="radio" name="likert" value="strong_agree">
      <label>Agree</label>
    </li>
    <li>
      <input type="radio" name="likert" value="strong_agree">
      <label>Neutral</label>
    </li>
    <li>
      <input type="radio" name="likert" value="disagree">
      <label>Disagree</label>
    </li>
    <li>
      <input type="radio" name="likert" value="strong_agree">
      <label>Strongly disagree</label>
    </li>
  </ul>
  <label >It's clear that this is a responsive design.</label>
  <ul class='likert'>
    <li>
      <input type="radio" name="likert" value="strong_agree">
      <label>Strongly agree</label>
    </li>
    <li>
      <input type="radio" name="likert" value="strong_agree">
      <label>Agree</label>
    </li>
    <li>
      <input type="radio" name="likert" value="strong_agree">
      <label>Neutral</label>
    </li>
    <li>
      <input type="radio" name="likert" value="disagree">
      <label>Disagree</label>
    </li>
    <li>
      <input type="radio" name="likert" value="strong_agree">
      <label>Strongly disagree</label>
    </li>
  </ul>

CodePudding user response：

It's because of the "name" attribute on each radio button. Because both sets of radio buttons have the same name, the webpage thinks they're part of the same set and only lets you select one. Change your second set of radio buttons to something like the below and you're good to go.

<li>
    <input type="radio" name="likertquestiontwo" value="strong_agree">
    <label>Strongly agree</label>
  </li>
  <li>
    <input type="radio" name="likertquestiontwo" value="strong_agree">
    <label>Agree</label>
  </li>
  <li>
    <input type="radio" name="likertquestiontwo" value="strong_agree">
    <label>Neutral</label>
  </li>
  <li>
    <input type="radio" name="likertquestiontwo" value="disagree">
    <label>Disagree</label>
  </li>
  <li>
    <input type="radio" name="likertquestiontwo" value="strong_agree">
    <label>Strongly disagree</label>
  </li>

CodePudding user response：

In different question, radio's name must be different!

    <label >This HTML Likert scale is easy to use.</label>
    <ul class='likert'>
      <li>
        <input type="radio" name="likert" value="strong_agree">
        <label>Strongly agree</label>
      </li>
...

   <label >It's clear that this is a responsive design.</label>
    <ul class='likert'>
      <li>
        <input type="radio" name="likert2" value="strong_agree">
        <label>Strongly agree</label>
      </li>
...