Два разных ввода текста с датой выборки на основе выпадающего списка

Question

<div class="row"> 
     <div class="col-md-6"> 
     <div class="input-group date xdue_date datepicker1"> 
      <input type="text" id="ap_due_date" name="ap_due_date/"> 
     </div> 
     <div class="input-group date xdue_date2 datepicker2" style="display:none;"> 
      <input type="text" id="ap_due_date2" name="ap_due_date"/> 
     </div> 
     </div> 
    </div> 

    <div class="form-group"> 
     <select id="ap_status" name="ap_status"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="2">3</option> 
     <option value="2">4</option> 
     <option value="2">5</option> 
     </select> 
    </div> 

<script> 

    $('#ap_status').change(function() { 
     var ap_status = $(this).val(); 
     $('.xdue_date').hide(); 
     $('.xdue_date2').hide(); 

     if (ap_status == 1) { 
      $('.xdue_date2').show(); 
      $('.xdue_date').hide(); 
     } else if (ap_status == 2) { 
      $('.xdue_date').show(); 
      $('.xdue_date2').hide(); 
     } else if (ap_status == 3) { 
      $('.xdue_date').show(); 
      $('.xdue_date2').hide(); 
     } else if (ap_status == 4) { 
      $('.xdue_date2').show(); 
      $('.xdue_date').hide(); 
     } else if (ap_status == 5) { 
      $('.xdue_date').show(); 
      $('.xdue_date2').hide(); 

     } 
    }); 

    $(function(){ 
     $('.datepicker1').datepicker({ 
      format: 'mm-dd-yyyy', 
      //startDate: '-0m' 
     }).on('changeDate', function(ev){ 
      //$('#sDate1').text($('.datepicker1').data('date')); 
      $('.datepicker1').datepicker('hide'); 
     }); 

     $('.datepicker2').datepicker({ 
      format: 'mm-dd-yyyy', 
      startDate: '-0m' 
     }).on('changeDate', function(ev){ 
      $('#sDate1').text($('.datepicker2').data('date')); 
      $('.datepicker2').datepicker('hide'); 
     }); 

    }); 

</script> 

У меня есть один ввод текста и один выпадающий список. Если я выберу = 2, другой текстовый ввод будет виден, другой будет скрыт. Моя проблема теперь в том, чтобы получить правильные даты. Поскольку теперь, если оба поля ввода имеют даты, когда я сохраню значение ap_due_date, оно будет основано на первых полях ввода.

Answer 1

Я думаю, что проблема в вашем коде заключается в том, что вы указали одинаковый атрибут имени для обоих ваших текстовых полей.

Таким образом, при переключении между текстовыми полями сохраняется только дата выбора даты.

Решение: при сохранении формы для проверки выпадающих значений, а если значение равно 1, сохраните с первым атрибутом имени datepicker, если выбрано 2-е, затем используйте другое имя для значения.

<div class="row"> 
     <div class="col-md-6"> 
     <div class="input-group date xdue_date datepicker1"> 
      <input type="text" id="ap_due_date" name="ap_due_date/"> 
     </div> 
     <div class="input-group date xdue_date2 datepicker2" style="display:none;"> 
      <input type="text" id="ap_due_date2" name="ap_due_date2"/> 
     </div> 
     </div> 
    </div> 

Когда выпадающее значение 1, кроме даты, используя ap_due_date имя и, когда выпадающее значение-сохранить дату, используя ap_due_date2 атрибут в вашей форме.

Поскольку форма должна иметь уникальное имя атрибута для каждого элемента. EDIT: Так что в вашей форме представить использование метода, если условие

if(ap_status == 1) 
    //save ap_due_date value in ap_due_date 
else if() apc_status == 2 
    // save ap_due_date2 value in ap_due_date 

Answer 2

Вы можете добавить атрибут «отключил» на выбор опции в нужное поле ввода. поле ввода с атрибутом disabled, не отправляется.

Fiddle Link

Js

$(function(){ 
    $('#test').on('submit',function(e){ 
    e.preventDefault() 
    alert($(this).serialize()) 
    }) 
    $('#ap_due_date').datepicker({ 
     dateFormat: 'dd-mm-yy', 
     altField: '#thealtdate', 
     altFormat: 'yy-mm-dd' 
    }); 
    $('#ap_due_date2').datepicker({ 
     dateFormat: 'dd-mm-yy', 
     altField: '#thealtdate', 
     altFormat: 'yy-mm-dd' 
    }); 

    $('select').on('change',function(){ 
      if($(this).val()==1){ 
      $("#xdue_date2").hide() 
      $("#ap_due_date2").prop('disabled',true) 
      $("#ap_due_date").prop("disabled", false); 
      $("#xdue_date").show() 
     } 
     if($(this).val()==2){ 
      $("#xdue_date2").show() 
      $("#ap_due_date2").prop("disabled", false); 
      $("#ap_due_date").prop('disabled',true) 
      $("#xdue_date").hide() 
     } 
    }) 

}); 

HTML

<form action="" id="test"> 
    <div class="row"> 
    <div class="col-md-6"> 
     <div class="input-group date xdue_date datepicker1" id="xdue_date"> 
     <input type="text" id="ap_due_date" name="ap_due_date" placeholder="first"> 
     </div> 
     <div class="input-group date xdue_date2 datepicker2" id="xdue_date2" style="display:none;"> 
     <input type="text" id="ap_due_date2" name="ap_due_date" disabled placeholder="second" /> 
     </div> 
    </div> 
    </div> 

    <div class="form-group"> 
    <select id="ap_status" name="ap_status"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
    </select> 
    <button type="submit"> Submit</button> 
    </div> 
</form>