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

user_8823441 0
Viewed 34

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 class="statement">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 class="statement">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>

forms html
3 Answers

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

    <label class="statement">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 class="statement">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>
...
user_197422560

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>
user_191538400

'name' represent column name in dB. 'value' is data that will be stored in the specific column(in dB)

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