Отправка формы при условии, что выбран хотя бы один выпадающий вариант

#javascript #php #jquery #html #validation

#javascript #php #jquery #HTML #проверка

Вопрос:

У меня есть форма с 8 полями выбора (выпадающими). Мне нужно, чтобы форма была успешно отправлена только тогда, когда был выбран хотя бы 1 вариант из 8 полей выбора. Если ни один из вариантов не выбран, мне нужно всплывающее предупреждение, когда пользователь пытается отправить, не выбрав хотя бы один вариант.

Я не разбираюсь в javascript или php.

Надеюсь, я достаточно ясно выразился.

Спасибо, ребята.

1. у вас есть 8 выпадающих входных данных или один выпадающий ввод с 8 параметрами?

2. У меня есть 8 выпадающих входных данных в одной и той же форме. Мне нужно выбрать хотя бы один вариант из хотя бы одного выпадающего списка, прежде чем форма может быть отправлена.

3. если это так, то ответ, данный Виссам Эль-Киком , полностью удовлетворит ваши потребности. Выберите этот ответ.

4. Ответ Виссама Эль-Кика был эффективным. Спасибо.

Ответ №1:

Вот JSFiddle.

Вот код:

 <select class="dropdown1">
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select class="dropdown2">
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select class="dropdown3">
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select class="dropdown4">
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select class="dropdown5">
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select class="dropdown6">
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select class="dropdown7">
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select class="dropdown8">
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<button class="submit-btn">Submit</button>
<script type="text/javascript">
    $(".submit-btn").click(function(){
        var dropdown_selected = false;
        // Select all the selected dropdown values
        var dropdown_values_arr = new Array();
        dropdown_values_arr.push($(".dropdown1 option:selected").val());
        dropdown_values_arr.push($(".dropdown2 option:selected").val());
        dropdown_values_arr.push($(".dropdown3 option:selected").val());
        dropdown_values_arr.push($(".dropdown4 option:selected").val());
        dropdown_values_arr.push($(".dropdown5 option:selected").val());
        dropdown_values_arr.push($(".dropdown6 option:selected").val());
        dropdown_values_arr.push($(".dropdown7 option:selected").val());
        dropdown_values_arr.push($(".dropdown8 option:selected").val());
        // Loop over these values
        for(var i=0; i<dropdown_values_arr.length; i  ){
            // If the value is not empty, then break the loop
            // Condition is met: at least one dropdown is selected
            if(dropdown_values_arr[i].length > 0){
                dropdown_selected = true;
                break;
            }
        }
        // If there's no selected values in any of the dropdowns, then throw an alert message
        if(dropdown_selected == false){
            alert("Please fill at least one dropdown");
        }
    });
</script>

Ответ №2:

Я не совсем понимаю ваш вопрос, но, если я прав, вы хотите проверить, выбрано ли что-то в раскрывающемся списке? (выберите)

Javascript (без JQ)

 function checkdropdown() {
  if(document.getElementById('select').value != "") {
    return true;
  }
  else {
    return false;
  }
}

HTML-код

 <form action='file.php' action='post'>
  <select name='select' id='select'>
    <option value=''>Select an option</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
    <option value='6'>6</option>
    <option value='7'>7</option>
    <option value='8'>8</option>
  </select>
<input type='submit' onClick='if(!checkdropdown()) {alert("You need to select a value!"); return false;}' value='Submit form' />
</form>

jsfiddle: http://jsfiddle.net/KNd47 /