當選擇日期選擇器時，添加了Javascript的HTML值

我有一個Bootstrap模式，您可以在其中選擇一個日期。在後臺填充隱藏字段，這些字段也會隨表單一起提交。當選擇日期選擇器時，添加了Javascript的HTML值

問題是，當您選擇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="">

當模式框最初彈出時，我可以看到隱藏值字段已填充，但當我單擊datepicker時，它將被刪除。爲什麼是這樣？

來源

2017-02-24 Ben

抓鬥和存儲形式的值（）; –

問題是當引導日期選擇器打開時會觸發show.bs.modal。所以你只需要設置#request_id值只有當show.bs.modal是與模態開放有關。您可以使用獲取觸發事件的元素的一種方法是在處理程序中檢查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>

來源

2017-02-26 22:41:49 VincenzoC

非常感謝你！它完美的作品。 – Ben

使用可信Bootstrap-datepicker。如果您使用相同的方法並進行$ ajax調用，則在通過列出表單值來製作$ ajax（）時防止出現額外的值。

來源

2017-02-24 16:38:39

這是我正在使用的那個。 – Ben

當選擇日期選擇器時，添加了Javascript的HTML值

回答

相關問題