html форма: введите запрос, если выбрано> выбрано optinon

Question

Я пытаюсь сделать поле обязательным , если выбрана опция выбора.

Вот код, который необходимо очистить :):

<div class="value">
   <h2>Are you happy ?</h2>
   <select name="happiness" required>
        <option value="1">Good</option>
        <option value="0">To improve</option>
   </select>
   <br>
   <textarea name="Comment4Happiness" placeholder="comment"></textarea>
</div>

Таким образом, текстовая область должна быть обязательной , если выбрана опция " Для улучшения ". Мы также можем заполнить text area комментарием, если захотим. Но это не обязательно!

Я уже знаю, что должен использовать Javascript, но я не знаю этот домен ...

Answer 1

Вы должны добавить идентификаторы к элементам формы, а затем использовать их в JavaScript, чтобы получить их значение, и кнопку отправки для вызова функции.

<div class="value">
   <h2>Are you happy ?</h2>
   <select id="mySelect" name="happiness" required>
        <option value="1">Good</option>
        <option value="0">To improve</option>
   </select>
   <br>
   <textarea id="myTextArea" name="Comment4Happiness" placeholder="comment"></textarea>
<button type="button" onclick="myFunction()">Submit</button>
</div>

Теперь добавьте тег сценария к низ вашего html

<script>
function myFunction() {
  let selectValue = document.getElementById("mySelect").value;
  let textAreaValue = document.getElementById("myTextArea").value;
   if (selectValue === "0") {
    if (textAreaValue === "") {
      alert("Text Area should not be empty");
    }

   }
}
</script>

Answer 2

Нажмите на кнопку отправки, и вы увидите обязательные для выбора опции Для улучшения.

function checkHappiness(happiness) {
  if(happiness.value === "0") {
    document.getElementById("comment").required = true;
  } else {
    document.getElementById("comment").required = false;
  }
}

<div class="value">
<form action="/action_page.php">
   <h2>Are you happy now ?</h2>
   <select name="happiness" onchange="checkHappiness(this)" required>
        <option value="1">Good</option>
        <option value="0" selected>To improve</option>
   </select>
   <br>
   <textarea name="Comment4Happiness" value="value1" placeholder="comment" id="comment" ></textarea>
  <input type="submit">   
</div>

Answer 3

Попробуйте вот так:

Я добавил идентификатор к textarea. и добавил функцию при выборе поля onChange.

function checkHappiness(happiness) {
  if(happiness.value === "0") {
    document.getElementById("comment").required = true;
  } else {
    document.getElementById("comment").required = false;
  }
}

<div class="value">
   <h2>Are you happy ?</h2>
   <select name="happiness" onchange="checkHappiness(this)" required>
        <option value="1">Good</option>
        <option value="0">To improve</option>
   </select>
   <br>
   <textarea name="Comment4Happiness" placeholder="comment" id="comment"></textarea>
</div>