当选择日期选择器时，添加了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值

回答

相关问题