RPeraltaJr
6/5/2017 - 3:47 PM

Conditionally Show/Hide Field

Show An Extra Input/Select Field Depending on Select Option Value

index.html
content_copyfile_download
<select name="multiple_stops">
  <option value="" selected>Multiple Stops?</option>
  <option value="Yes">Yes</option>
  <option value="No">No</option>
</select>

<input type="number" name="stops" min="2" placeholder="Number of stops">
main.js
content_copyfile_download
let multipleStops = $("select[name='multiple_stops']");
let stops = $("input[name='stops']");

stops.hide(); // hide by default

multipleStops.change(function() {
    if( $(this).val().toLowerCase() == 'yes' ){
        // console.log('checked');
        stops.fadeIn('fast');
        stops.prop('required',true);
    } else {
        // console.log('NOT checked');
        stops.fadeOut('fast');
        stops.prop('required',false);
    }
});