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

Я пытаюсь проверить несколько групп переключателей одновременно. У меня проблемы не только с их проверкой, но и с тем, что ошибка в 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 ), но я еще не изучил это, поэтому я пытаюсь написать код, используя то, что я знаю до сих пор, который является основным JavaScript.

Всего 2 ответа


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

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

myid.dosomestuff();

textContent является более привлекательной альтернативой innerHTML, потому что, например, он избавляется от 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();" />


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

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>


Есть идеи?

10000