Javascriptが追加されましたdatepickerが選択されるとHTML値が削除されます

Question

日付を選択できるBootstrapモーダルがあります。バックグラウンドでは、フォームとともに送信された隠しフィールドが設定されます。

datepicker要素を選択すると、いくつかの奇妙な理由で隠し値が削除されるという問題があります（ただし、隠し値のみがJavascriptによって作成されます）。

日付ピッカーJS：

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

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

隠しフィールドの移入JS：

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

隠されたHTML要素：

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

Modalボックスが最初にポップアップすると、隠し値フィールドに値が設定されているのがわかりますが、datepickerをクリックすると削除されます。どうしてこれなの？

Answer 1

問題は、ブートストラップdatepickerが開かれたときに、show.bs.modalが発生することです。したがって、show.bs.modalがモーダルオープニングに関連する場合、#request_id値のみをに設定する必要があります。イベントを発生させた要素を取得するために使用できる1つの方法は、ハンドラ内でe.target.idの値をチェックすることです。ここ

ワーキングサンプル：.valと

$('#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

信頼済みBootstrap-datepickerを使用してください。同じものを使って$ ajaxを呼び出す場合は、フォーム値をリストして$ ajax（）を作成している間に余分な値を避けてください。