Блог

Главная - Вопросы по программированию - триггер ввода на основе выбора формы в jquery

триггер ввода на основе выбора формы в jquery

#javascript #jquery

#javascript #jquery

Вопрос:

в моей форме есть раскрывающаяся форма, invoice type которая имеет два значения, когда пользователь выбирает сервисы, я хочу скрыть поля from_date и to_date из формы, когда пользователь выбирает milestone, я хочу скрыть ввод 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>

Комментарии:

1. Я думаю, вы обнаружите, что мой ответ делает именно то, что вам требуется.

2. Выпадающий выбор invoice_type не запускает ввод

3. @cssyphus Это не то, что хотел OP. Пожалуйста, просмотрите свой ответ.

Ответ №1:

Вы можете использовать change функцию simply, чтобы проверить, что option было выбрано, и divs соответственно скрыть соответствующее.

//скрыть при загрузке $(‘.from_date, .to_date’).скрыть() $(‘.upload_field’).скрыть()

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

Комментарии:

1. этот код работает только при первом выборе каждого выбора, также я хочу скрыть from_date, to_date и загрузить файл, когда invoice_type не выбран

2. @rock Я отредактировал свой ответ — проверьте мое недавнее редактирование — все работает, я знал, что вы захотите что-то подобное 🙂

3. могу ли я скрыть входные данные from_date, to_date и upload_file, когда invoice_type выбран один

4. @rock Да, все сделано. Проверьте мой ответ еще раз. Я прочитал ваш комментарий позже.

5. При загрузке i он не скрывает эти три ввода.

Ответ №2:

Вы можете использовать toggle(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>