form drop-down selection based input trigger in jquery

Question

my form has drop-down form invoice type which has two value when user select services i want to hide from_date and to_date field from form, when user select milestone i want to hide upload_file input from form.

 <form id="raise-invoice-form-validation" accept-charset="UTF-8" method="post"> <div class="row"> <div class="field columns large-3"> <label class="required" for="raise_invoice_invoice_type">Invoice type</label> <select name="raise_invoice[raised_invoice_type]" id="raise_invoice_raised_invoice_type"><option value="">Select One</option> <option value="0">services</option> <option value="1">milestones</option></select> </div> <div class="field columns large-3"> <label class="required" for="raise_invoice_from_date">From date</label> <input class="datepicker hasDatepicker" type="date" name="raise_invoice[from_date]" id="raise_invoice_from_date"><button type="button" class="ui-datepicker-trigger"><img src="/images/calendar.gif" alt="..." title="..."></button> </div> <div class="field columns large-3"> <label class="required" for="raise_invoice_to_date">To date</label> <input class="datepicker hasDatepicker" type="date" name="raise_invoice[to_date]" id="raise_invoice_to_date"><button type="button" class="ui-datepicker-trigger"><img src="/images/calendar.gif" alt="..." title="..."></button> </div> <input value="20" type="hidden" name="raise_invoice[payment_milestone_id]" id="raise_invoice_payment_milestone_id"> <div class="field columns large-2"> <label for="raise_invoice_upload_file">Upload file</label> <input type="file" name="raise_invoice[raised_invoice_file]" id="raise_invoice_raised_invoice_file"> </div> </div> <div class="row"> <div class="field columns large-3"> <label for="raise_invoice_raised_invoice_for">Raised invoice for</label> <select name="raise_invoice[raised_invoice_for]" id="raise_invoice_raised_invoice_for"><option value="">Select One</option> <option value="0">Performa Invoice</option> <option value="1">Tax Invoice</option></select> <div class="actions text-center"> <input type="submit" value="Raise invoice" class="button primary button-margin-top" data-disable-with="Raise invoice"> </div> </form>

Answer 1

You can use simply change function to check which option was selected and hide the relevant divs accordingly.

//hide on load $('.from_date, .to_date').hide() $('.upload_field').hide()

//watch the change
$(document).on('change', '#raise_invoice_raised_invoice_type', function() {
  if ($(this).val() == '0') {
    $('.from_date, .to_date').hide()
    $('.upload_field').show()
  } else if ($(this).val() == '1') {
    $('.upload_field').hide()
    $('.from_date, .to_date').show()
  } else {
    $('.upload_field').hide()
    $('.from_date, .to_date').hide()
  }
})

Live Demo:

 //hide on load $('.from_date, .to_date').hide() $('.upload_field').hide() //watch the change $(document).on('change', '#raise_invoice_raised_invoice_type', function() { if ($(this).val() == '0') { $('.from_date, .to_date').hide() $('.upload_field').show() } else if ($(this).val() == '1') { $('.upload_field').hide() $('.from_date, .to_date').show() } else { $('.upload_field').hide() $('.from_date, .to_date').hide() } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="raise-invoice-form-validation" accept-charset="UTF-8" method="post"> <div class="row"> <div class="field columns large-3"> <label class="required" for="raise_invoice_invoice_type">Invoice type</label> <select name="raise_invoice[raised_invoice_type]" id="raise_invoice_raised_invoice_type"> <option value="" selected>Select One</option> <option value="0">services</option> <option value="1">milestones</option> </select> </div> <div class="field columns large-3 from_date"> <label class="required" for="raise_invoice_from_date">From date</label> <input class="datepicker hasDatepicker" type="date" name="raise_invoice[from_date]" id="raise_invoice_from_date"><button type="button" class="ui-datepicker-trigger"><img src="/images/calendar.gif" alt="..." title="..."></button> </div> <div class="field columns large-3 to_date"> <label class="required" for="raise_invoice_to_date">To date</label> <input class="datepicker hasDatepicker" type="date" name="raise_invoice[to_date]" id="raise_invoice_to_date"><button type="button" class="ui-datepicker-trigger"><img src="/images/calendar.gif" alt="..." title="..."></button> </div> <input value="20" type="hidden" name="raise_invoice[payment_milestone_id]" id="raise_invoice_payment_milestone_id"> <div class="field columns large-2 upload_field"> <label for="raise_invoice_upload_file">Upload file</label> <input type="file" name="raise_invoice[raised_invoice_file]" id="raise_invoice_raised_invoice_file"> </div> </div> <div class="row"> <div class="field columns large-3"> <label for="raise_invoice_raised_invoice_for">Raised invoice for</label> <select name="raise_invoice[raised_invoice_for]" id="raise_invoice_raised_invoice_for"> <option value="">Select One</option> <option value="0">Performa Invoice</option> <option value="1">Tax Invoice</option> </select> <div class="actions text-center"> <input type="submit" value="Raise invoice" class="button primary button-margin-top" data-disable-with="Raise invoice"> </div> </form>

Answer 2

You can use toggle(boolean) and use selected value comparison to create the boolean

 $('#raise_invoice_raised_invoice_type').change(function() { const val = $(this).val(); $('.from_date, .to_date').toggle(val === '0') $('.upload_field').toggle(val === '1'); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="raise-invoice-form-validation" accept-charset="UTF-8" method="post"> <div class="row"> <div class="field columns large-3"> <label class="required" for="raise_invoice_invoice_type">Invoice type</label> <select name="raise_invoice[raised_invoice_type]" id="raise_invoice_raised_invoice_type"> <option disabled selected>Select One</option> <option value="0">services</option> <option value="1">milestones</option> </select> </div> <div class="field columns large-3 from_date"> <label class="required" for="raise_invoice_from_date">From date</label> <input class="datepicker hasDatepicker" type="date" name="raise_invoice[from_date]" id="raise_invoice_from_date"><button type="button" class="ui-datepicker-trigger"><img src="/images/calendar.gif" alt="..." title="..."></button> </div> <div class="field columns large-3 to_date"> <label class="required" for="raise_invoice_to_date">To date</label> <input class="datepicker hasDatepicker" type="date" name="raise_invoice[to_date]" id="raise_invoice_to_date"><button type="button" class="ui-datepicker-trigger"><img src="/images/calendar.gif" alt="..." title="..."></button> </div> <input value="20" type="hidden" name="raise_invoice[payment_milestone_id]" id="raise_invoice_payment_milestone_id"> <div class="field columns large-2 upload_field"> <label for="raise_invoice_upload_file">Upload file</label> <input type="file" name="raise_invoice[raised_invoice_file]" id="raise_invoice_raised_invoice_file"> </div> </div> <div class="row"> <div class="field columns large-3"> <label for="raise_invoice_raised_invoice_for">Raised invoice for</label> <select name="raise_invoice[raised_invoice_for]" id="raise_invoice_raised_invoice_for"> <option value="">Select One</option> <option value="0">Performa Invoice</option> <option value="1">Tax Invoice</option> </select> <div class="actions text-center"> <input type="submit" value="Raise invoice" class="button primary button-margin-top" data-disable-with="Raise invoice"> </div> </form>