时间戳

首页 > 解决方案 > jquery中基于表单下拉选择的输入触发器

javascript - jquery中基于表单下拉选择的输入触发器

问题描述

我的表单有下拉表单invoice type，当用户选择服务时，我想从表单中隐藏 from_date 和 to_date 字段，当用户选择里程碑时，我想从表单中隐藏upload_file 输入时，我的表单有两个值。

<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>

标签： javascriptjquery

解决方案

您可以使用简单change的功能来检查option选择了哪个并divs相应地隐藏相关内容。

//加载时隐藏 $('.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()
  }
})

现场演示：

//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>

推荐阅读