在至少选择一个下拉选项的条件下提交表单

Submit a form on condition that atleast one drop-down option is selected

本文关键字：选项 条件下 表单 提交 一个 选择      更新时间：2023-09-26

我有一个有8个选择(下拉)字段的表单。只有当从8个选择字段中选择至少1个选项时，我才需要成功提交表单。如果没有选择任何选项，我需要在用户尝试提交而不选择至少一个选项时弹出一个警告。

我不懂javascript和php。

我希望我说得够清楚了。

谢谢。

这是一个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>

我不太明白你的问题，但如果我是正确的，你想检查下拉框中是否选择了某些内容?(选择)

Javascript (no 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/

相关文章：