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

Posted 2023-05-07

【中文标题】选择日期选择器时删除 Javascript 添加的 HTML 值

【英文标题】：Javascript added HTML value is removed when datepicker is selected

【发布时间】：2017-07-15 13:49:54

【问题描述】：

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

问题在于，当您选择 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 时，它被删除了。这是为什么呢？

【问题讨论】：

使用 .val(); 获取和存储表单值；

【参考方案1】：

问题是show.bs.modal 在打开引导日期选择器时被触发。因此，当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>

【参考方案2】：

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

【讨论】：

这是我正在使用的。