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>

停止提交表单，直到所有下拉框都完成

1 个答案: