Question

我有一个Bootstrap模式，您可以在其中选择日期。在后台，填充了隐藏字段，这些字段也随表单一起提交。

问题在于，当您选择<xsl:template match="/"> <xsl:for-each select="descendant::*[not(child::*)]"> <xsl:value-of select="normalize-space(.)"/><xsl:text>;</xsl:text> </xsl:for-each> </xsl:template>元素时，它会因某些奇怪的原因（但只有Javascript填充的隐藏值）删除隐藏值。

Datepicker JS：

datepicker

隐藏字段填充JS：

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

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

隐藏的HTML元素：

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

当弹出模态框时，我可以看到隐藏的值字段已填充，但是当我单击<input type="hidden" name="request_id" id="request_id" value="">时，它将被删除。这是为什么？

Answer 1

问题是在打开bootstrap datepicker时会触发show.bs.modal。因此，当#request_id与模态打开相关时，您只需设置show.bs.modal值。可以使用一种方法来获取触发事件的元素是检查处理程序中的e.target.id值。

这是一份工作样本：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

使用受信任的Bootstrap-datepicker。如果您使用相同的并进行$ ajax调用，请在列出表单值的时候通过whilte制作$ ajax（）来防止额外的值。

添加Javascript时，如果选择了datepicker，则会删除HTML值

2 个答案: