form drop-down selection based input trigger in jquery

user_12832400 0
Viewed 52

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>

jquery javascript
2 Answers

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>

user_136690480

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>

user_11759660
Related