Bootstrap Modal + Datepicker + Form Values
I have a form inside a bootstrap mod that has an input with bootstrap datepicker. I am using this modal format to update a saved database record. Values are passed to the form correctly. However, if I click on the datepicker entry, the date dropdown menu appears and the form loses all of its values.
Please see: http://jsfiddle.net/fn8hmve8/
$('#form-update-task').on('show.bs.modal', function(f) {
var name = $(f.relatedTarget).data('form_name');
var priority = $(f.relatedTarget).data('form_priority');
var rr = $(f.relatedTarget).data('form_rr');
var due_date = $(f.relatedTarget).data('form_due_date');
var assigned = $(f.relatedTarget).data('form_assigned');
var id = $(f.relatedTarget).data('form_id');
$(this).find('.modal-header').html("Update " + name);
$(".modal-body #name").val( name );
$(".modal-body #priority").val( priority );
$(".modal-body #rr").val( rr );
$(".modal-body #due_date").val( due_date );
$(".modal-body #assigned").val( assigned );
$(".modal-body #id").val( id );
});
$('.datepicker').datepicker({
format: "yyyy-mm-dd",
startDate: "Today"
});
<a href="#" data-keyboard="false" data-backdrop="static" data-toggle="modal" data-target="#form-update-task" data-form_id="1" data-form_name="form name" data-form_priority="priority" data-form_rr="123456" data-form_due_date="2015-08-13" data-form_assigned="some guy">Edit</a>
<!-- Form Modal -->
<div class="modal fade" id="form-update-task" tabindex="-1" role="dialog" aria-labelledby="form-submission" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<form action="dashboard.php?action=update&type=tasks" type="POST" role="form">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name" id="name">
</div>
<div class="form-group">
<label for="priority">Priority</label>
<input class="form-control" type="text" name="priority" id="priority">
</div>
<div class="form-group">
<label for="rr">Resource Request ID</label>
<input class="form-control" type="text" name="rr" id="rr">
</div>
<div class="form-group">
<label for="due_date">Due Date</label>
<input class="datepicker form-control" type="text" name="due_date" id="due_date">
</div>
<div class="form-group">
<label for="assigned">Assigned</label>
<input class="form-control" type="text" name="assigned" id="assigned">
</div>
<input type="hidden" name="id" id="id">
<button class="btn btn-default" type="submit">Update</button>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- Form Modal -->
I put this together from a bit of code I found on the net. Any suggestions on how to fix this is appreciated.
source to share
The datepicker you are using also has an event show
and the modal trigger show.bs.modal
fires again.
A workaround for this is to simple check and if f.relatedTarget
is undefined then the trigger is from datepicker.
$('#form-update-task').on('show.bs.modal', function(f) {
if (f.relatedTarget === undefined) return;
// Do other stuff here
});
See demo here
source to share