TPLMedia24 TPLMedia24 - 16 days ago 5
CSS Question

jQuery preventing form submission

My html



<p><select name="status" class="form-control" id="showThisItem">
<option value="">
Select Status
</option>
<option value="Paid">
Paid
</option>
<option value="Unpaid">
Unpaid
</option>
</select></p>

<td id="showHide">
<label>Due Date</label>
<input type="text" name="due_date" class="form-control" data-date-format="mm/dd/yy" id="datepicker" required="true">
</td>


My jquery code



<script>
$('#showHide').hide(500);
var showThis = $('#showThisItem');
var select = this.value;
showThis.change(function () {
if ($(this).val() == 'Unpaid') {
$('#showHide').show(500);
}
else {
$('#showHide').hide(500);
}
});
</script>


I have used this jQuery code to hide and show a
td
element. When I select "paid" the
td
will not show and when I select "unpaid" then the
td
will show. By default it will hide on page load.

However, if I select "unpaid" then I can submit the form and if I select "paid" the submit button does not work.

Answer

Your input is listed as required:

<input type="text" name="due_date" class="form-control" data-date-format="mm/dd/yy" id="datepicker" required="true">

This will cause the form to be invalid and not allow it to submit. If it is only required when Unpaid is selected then I would look into setting that attribute dynamically with jQuery when Unpaid is selected.

Something like

<script>
 $('#showHide').hide(500);
  var showThis = $('#showThisItem');
  var select = this.value;
  showThis.change(function () {
    if ($(this).val() == 'Unpaid') {
        $('#showHide').show(500).find('input').prop('required',true);
    }
    else {
      $('#showHide').hide(500).find('input').prop('required',false);;
    }
});
</script>