JavaScript dodana wartość HTML jest usuwana po wybraniu datepicker

Question

Mam mod Bootstrap, w którym można wybrać datę. W tle wypełniane są ukryte pola, które są również przesyłane wraz z formularzem.

Problem polega na tym, że po wybraniu elementu datepicker, usuwa on ukrytą wartość z jakiegoś dziwnego powodu (ale tylko ukryte wartości w Javascript).

Datepicker JS:

var date = new Date(); 
date.setDate(date.getDate()); 

$('#datepicker').datepicker({ 
    format: "dd/mm/yyyy", 
    startDate: date, 
    autoclose: true, 
}); 

Ukryte pola wypełniania JS:

$(function() { 
    $('#appointment').on("show.bs.modal", function (e) { 
     $("#request_id").val($(e.relatedTarget).data('request-id')); 
    }); 
}); 

Ukryte HTML Element:

<input type="hidden" name="request_id" id="request_id" value=""> 

Kiedy początkowo pojawia się okno Modal, widzę pole ukrytej wartości, ale po kliknięciu na datepicker jest ono usuwane. Dlaczego to?

Answer 1

Problem polega na tym, że show.bs.modal jest uruchamiany, gdy otwarty jest datepicker programu startowego. Musisz więc ustawić #request_id wartość tylko, gdy show.bs.modal jest związane z otwarciem modalnym. Jednym ze sposobów użycia elementu, który wystrzelił zdarzenie, jest sprawdzenie wartości wewnątrz twojego handlera.

Tu próbka robocza:

$('#datepicker').datepicker({ 
 
    format: "dd/mm/yyyy", 
 
    startDate: new Date(), 
 
    autoclose: true, 
 
}); 
 

 
$(function() { 
 
    $('#appointment').on("show.bs.modal", function (e) { 
 
    if(e.target.id == 'appointment'){ 
 
     $("#request_id").val($(e.relatedTarget).data('request-id')); 
 
    } 
 
    }); 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> 
 

 

 
<input type="hidden" name="request_id" id="request_id" value=""> 
 

 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#appointment" data-request-id="myExampleId"> 
 
    Open appointment modal 
 
</button> 
 

 
<div id="appointment" class='modal fade'> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class='modal-header'> 
 
     <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button> 
 
     <h4 class="modal-title">Title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="form-group"> 
 
      <label for="datepicker">Date bootstrap</label> 
 
      <input type="text" id="datepicker"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Użyj zaufanego Bootstrap-datepicker. Jeśli użyjesz tego samego i wykonasz wywołanie $ ajax, zablokuj dodatkowe wartości podczas robienia $ ajax() przez whilte z listą wartości twojego formularza.