Javascript 添加 HTML 选择日期选择器时删除值

Question

我有一个 Bootstrap 模式，你可以在其中 select 约会。在后台填充隐藏字段，这些字段也随表单一起提交。

问题是，当您 select 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 时，它已被删除。这是为什么？

Answer 1

使用受信任的Bootstrap-datepicker。如果您使用相同的方法并进行 $ajax 调用，请通过列出您的表单值来防止在进行 $ajax() 时产生额外的值。

Answer 2

问题是 show.bs.modal 在 bootstrap 日期选择器打开时触发。因此，当 show.bs.modal 与模式打开相关时，您只需设置 #request_id 值 only。获取触发事件的元素的一种方法是检查处理程序中的 e.target.id 值。

这是一个工作示例：

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

Javascript 添加 HTML 选择日期选择器时删除值

Javascript added HTML value is removed when datepicker is selected

javascript

html

twitter-bootstrap

datepicker

bootstrap-datepicker