CODEWITHSUNDEEP
javascriptjqueryhtmlforms
PHP9274745382389
PHP9274745382389

Reputation: 169

Stopping form from submitting until all dropdown boxes are completed

I have created an HTML form that is generated from a PHP script. The PHP script outputs an HTML dropdown based on data held in a database. The number of dropdowns being displayed on the page varies as it is based on the number of lines in a MySQL database. All the dropdowns have the same ID inputDropdown

I am trying to create a jquery script that prevents the form from being submitted until all the dropdown boxes have been completed (So whenever the value doesn't equal No Response).

This is the HTML code outputted from the PHP Script. Please note the number in the name (E.G. "1" in dropdown_1) is generated based on the ID of a row in the database. 

<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>

I tried the following jquery Code, however, this only worked for the first of the dropdowns and didn't check the other dropdown values.

$(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;
    });
});

Please, could someone advise of an efficient way on how to do this?

Thank you in advance!

Upvotes: 1

Views: 32

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337627

Your first issue is that you have repeated the same id in the DOM, which is invalid. Use a class to group the elements instead.

Then you can use filter() to find how many of the selects still have the first option selected when the form is submit. If any of them do, show the alert(). You also need to call preventDefault() at this point only. Try this:

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>

Upvotes: 2

Related Questions