Проверка нескольких групп радиокнопок - только Javascript

Question

Я пытаюсь проверить несколько групп переключателей одновременно. У меня проблемы не только с их проверкой, но и с тем, что ошибка в div тоже появляется. Когда опция выбрана, я хочу проверить и сохранить значение, чтобы потом сохранить его в локальном хранилище. (В данный момент я не хочу печатать его, я просто хочу проверить по значению и убедиться, что что-то выбрано) Я не уверен, что делаю неправильно, вот мой код: https://jsfiddle.net/7ace6uws/

Поскольку я не смог опубликовать только jsfiddle и мне нужно было сопровождать код, вот мое HTML:

<tr>
  <td><label>Whats your favorite color:</label:>
  </td>
  <div id="color"></div>
  <td>
    <fieldset id="group1">
      <input type="radio" value="blue" name="color">Blue
      <input type="radio" value="red" name="color">Red
      <div>

      </div>
    </fieldset>
  </td>
</tr>

<tr>
  <td><label>What is your favorite food:</label></td>
  <div id="food"></div>
  <td>
    <fieldset id="group2">
      <input type="radio" id="pizza" name="food">Pizza
      <input type="radio" id="cake" name="food">Cake
    </fieldset>
  </td>

</tr>

<tr>
  <td><label>Do you go to school:</label></td>
  <div id="school"></div>
  <td>
    <fieldset id="group3">
      <input type="radio" id="yes" name="school">Yes
      <input type="radio" id="no" name="school">No
    </fieldset>
  </td>
</tr>
<input type="button" value="Save" onclick="validateForm();" />

Примечание о возможном дубликате: Я знаю, что этот вопрос задавался ранее. Я прочитал ответы на подобные вопросы, но я все еще потерялся. Для некоторых ответов у меня были проблемы с пониманием Javascript, так как они использовали что-то, называемое литералами шаблонов. В некоторых ответах также использовался jQuery, который я также еще не изучил. В некоторых ответах также использовались formData (https://developer.mozilla.org/en-US/docs/Web/API/FormData), но я еще не изучил это, поэтому я пытаюсь написать код, используя то, что я знаю до сих пор, что является основанием c javascript.

Answer 1

Оберните все в форму. Определите его, а затем получите доступ к значениям элементов формы, например, для цвета:

form.elements["color"].value

Также добавлены вейлы для еды и школы, чтобы получить к нему одинаковый доступ. Это то, что вы хотели?

Также, если это будет форма для отправки, вам просто нужно добавить обязательные для одной группы переключатели, чтобы HTML выполнила проверку, и пользователь должен был выбрать один из группы , И только выбранное значение будет отправлено с помощью кнопки отправки, вам не нужно JS для этого.

Надеюсь, это поможет, у меня нет проблем с пониманием того, что вы хотите.

function validateForm(){
var form = document.getElementById("test");
  if(! (blue.checked || red.checked)){
  color.textContent="Please select a color";
  }
  else{
  color.textContent=(form.elements["color"].value);
  }

  if(! (pizza.checked || cake.checked)){
  food.textContent="Please select a food";
  }
  else{
  food.textContent=(form.elements["food"].value);
  }

  if(! (yes.checked || no.checked)){
  school.textContent="Please select an option if you go to school";
  }
  else{
  school.textContent=(form.elements["school"].value);
  }


}

<form id="test">
<tr>
  <td><label>Whats your favorite color:</label:>
  </td>
  <div id="color"></div>
  <td>
    <fieldset id="group1">
      <input id="blue" type="radio" value="blue" name="color">Blue
      <input id="red" type="radio" value="red" name="color">Red
      <div>
 
      </div>
    </fieldset>
  </td>
</tr>

<tr>
  <td><label>What is your favorite food:</label></td>
  <div id="food"></div>
  <td>
    <fieldset id="group2">
      <input type="radio" id="pizza" name="food" value="Pizza">Pizza
      <input type="radio" id="cake" name="food" value="Cake">Cake
    </fieldset>
  </td>
</tr>
 
<tr>
  <td><label>Do you go to school:</label></td>
  <div id="school"></div>
  <td>
    <fieldset id="group3">
      <input type="radio" id="yes" name="school"value="Yes">Yes
      <input type="radio" id="no" name="school" value="No" >No
    </fieldset>
  </td>
</tr>
<input type="button" value="Save" onclick="validateForm();" />
</form>

Answer 2

У вас могут быть некоторые проблемы в вашем if, чтобы сравнить две вещи, которые вы должны использовать && вместо & в вашем случае, то, что вы пытаетесь сделать, это или (||), потому что вы хотите проверить, является ли синий флажком или если отмечен красный.

И просто для того, чтобы добавить хитрость, которая сделает вашу жизнь намного проще, вам не нужно писать document.getElementById ("myid"), как только вы поместите идентификатор в элемент, который существует в вашем коде javascript, так что вы можете просто использовать его:

myid.dosomestuff();

textContent - более привлекательная альтернатива внутреннему HTML, потому что он избавляется, например, от тегов html в тексте. также вы можете захотеть избавиться от ваших операторов возврата:

function validateForm(){

  if(! (blue.checked || red.checked)){
  color.textContent="Please select a color";
  console.log(blue.value);
  }
  else{
  color.textContent="";
  }

  if(! (pizza.checked || cake.checked)){
  food.textContent="Please select a food";
  console.log(pizza.value);
  }
  else{
  food.textContent="";
  }

  if(! (yes.checked || no.checked)){
  school.textContent="Please select an option if you go to school";
  console.log(yes.value);
  }
  else{
  school.textContent="";
  }


}

<tr>
  <td><label>Whats your favorite color:</label:>
  </td>
  <div id="color"></div>
  <td>
    <fieldset id="group1">
      <input id="blue" type="radio" value="blue" name="color">Blue
      <input id="red" type="radio" value="red" name="color">Red
      <div>
 
      </div>
    </fieldset>
  </td>
</tr>

<tr>
  <td><label>What is your favorite food:</label></td>
  <div id="food"></div>
  <td>
    <fieldset id="group2">
      <input type="radio" id="pizza" name="food">Pizza
      <input type="radio" id="cake" name="food">Cake
    </fieldset>
  </td>
</tr>
 
<tr>
  <td><label>Do you go to school:</label></td>
  <div id="school"></div>
  <td>
    <fieldset id="group3">
      <input type="radio" id="yes" name="school">Yes
      <input type="radio" id="no" name="school">No
    </fieldset>
  </td>
</tr>
<input type="button" value="Save" onclick="validateForm();" />