Как я могу запретить отправку, если выбранные опции пусты? - PullRequest
Новая
       9

Как я могу запретить отправку, если выбранные опции пусты?

1 голос
/ 06 февраля 2020

Я пытаюсь запретить отправку с использованием события Onclick (с javascript), если какое-либо из выбранных меню пустое. Возможно отображение предупреждения. Возможно ли это? 

<select name="form1" form="my_form">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
</select>

<select name="form2" form="my_form">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
</select>

<form id="my_form" method="post" action="selections.php">
    <input type="submit" value="Send">
</form>

Ответы [ 5 ]

1 голос
/ 06 февраля 2020

Предлагаемое решение

Наиболее удобный способ - использовать HTML проверки формы, обработанные браузером (required), как указано epascarello

К сожалению, ваш выбор имеет первый вариант по умолчанию. Вы можете просто добавить опцию-заполнитель без значения. Это предотвратит отправку формы без выбора.

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

Добавлен третий ввод, чтобы ответить на ваш вопрос в комментарии. Отсутствие значения означает, что по умолчанию будет использоваться содержимое тега <option>. Это будет работать, только если у вас нет текста в этой опции. 

<form id="my_form">
    <select required name="form1" form="my_form">
        <option value>Placeholder</option>
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
    </select>

    <select required name="form2" form="my_form">
        <option hidden disabled selected value>Choose an option</option>
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
    </select>

    <select required name="form3" form="my_form">
        <option>I'm the value if none set</option>
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
    </select>


    <input type="submit" value="Send">
</form>
0 голосов
/ 06 февраля 2020 
var selectElts = document.getElementsByTagName('select');
var formElt = document.getElementById('my_form');

formElt.addEventListener('submit', function(e) {
  // stop the form submission
  e.preventDefault();
  var error = 0;

  // Check all select menus
  for (var i = 0; i < selectElts.length; i++) {
    // Check if current input's value is empty
    if (selectElts[i].value.trim() === '') {
      error = error + 1;
      alert(selectElts[i].name + ' is empty');
    }
  }

  // if there are no errors, then we submit the form
  if (error === 0) {
    formElt.submit();
  } 
});
0 голосов
/ 06 февраля 2020

Да, вы можете запретить отправку формы, если меню пустое, используя обязательное свойство в теге select.

0 голосов
/ 06 февраля 2020

это нормально, что ваши выбранные входы не находятся в вашем теге 'формы'? в каком случае они будут пустыми? потому что «вариант 1» выбран по умолчанию

0 голосов
/ 06 февраля 2020

Я бы использовал идентификатор для кнопки отправки: 

<input type="submit" value="Send" id="submitButton" disabled>

После этого просто создайте функцию для ваших опций: 

    function onItemSelected() {
       var selectedItem1 = document.getElementByName("form1").selectedIndex;
       var selectedItem2 = document.getElementByName("form2").selectedIndex;
       if (selectedItem1 && selectedItem2) {
         document.getElementById('submitButton').disabled = false;
       } else {
             document.getElementById('submitButton').disabled = true;
          }
        }

Вы должны вызывать onItemSelected в каждом выбранном входе : Например: 

<select name="form2" form="my_form" (onchange)="onItemSelected()">
...