javascript - 在完成所有下拉框之前停止提交表单

Question

我已经创建了一个从 PHP 脚本生成的 HTML 表单。 PHP 脚本根据数据库中保存的数据输出 HTML 下拉列表。页面上显示的下拉列表数量因 MySQL 数据库中的行数而异。所有下拉菜单都有相同的 ID inputDropdown

我正在尝试创建一个 jquery 脚本，以防止在所有下拉框完成之前提交表单(因此，只要值不等于 No Response)。

这是从 PHP 脚本输出的 HTML 代码。请注意名称中的数字(例如 dropdown_1 中的“1”)是根据数据库中行的 ID 生成的。

<select name="dropdown_1" id="inputDropdown" class="form-control">
        <option value="No Response" selected>Blank - Please Select A Option</option>
        <option value="No">No</option>
        <option value="Full">Yes</option>
</select>
<select name="dropdown_2" id="inputDropdown" class="form-control">
        <option value="No Response" selected>Blank - Please Select A Option</option>
        <option value="No">No</option>
        <option value="Full">Yes</option>
</select>
<select name="dropdown_3" id="inputDropdown" class="form-control">
        <option value="No Response" selected>Blank - Please Select A Option</option>
        <option value="No">No</option>
        <option value="Full">Yes</option>
</select>

我尝试了以下 jquery 代码，但是，这只适用于第一个下拉菜单，并没有检查其他下拉菜单值。

$(document).ready(function () {
    $("#update-form").submit(function (e) {
        if ($('#inputDropdown').val() == 'No Response') {
            alert('Please complete all the boxes');
        }
        e.preventDefault(e);
    });
    $("#inputDropdown").change(function () {
        $("#inputDropdown").submit();
        return false;
    });
});

拜托，有人可以建议一种有效的方法来执行此操作吗？

提前致谢!

Answer 1

您的第一个问题是您在 DOM 中重复了相同的 id，这是无效的。使用 class 来对元素进行分组。

然后您可以使用 filter() 来查找在提交表单时有多少选择仍然选择了第一个选项。如果其中任何一个出现，则显示 alert()。您还需要仅在此时调用 preventDefault()。试试这个:

jQuery(function($) {
  $("#update-form").submit(function(e) {
    var unselected = $('.inputDropdown').filter(function() {
      return $(this).find('option:selected').index() == 0;
    }).length;
  
    if (unselected != 0) {
      e.preventDefault(e);
      alert('Please complete all the boxes');
    }
  });
  
  $(".inputDropdown").change(function() {
    $("#update-form").submit();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="update-form" action="#">
<select name="dropdown_1" class="form-control inputDropdown">
  <option value="No Response" selected>Blank - Please Select A Option</option>
  <option value="No">No</option>
  <option value="Full">Yes</option>
</select>
<select name="dropdown_2" class="form-control inputDropdown">
  <option value="No Response" selected>Blank - Please Select A Option</option>
  <option value="No">No</option>
  <option value="Full">Yes</option>
</select>
<select name="dropdown_3" class="form-control inputDropdown">
  <option value="No Response" selected>Blank - Please Select A Option</option>
  <option value="No">No</option>
  <option value="Full">Yes</option>
</select>
</form>