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!