Bootstrap Modal + Datepicker + Form Values

Question

I have a form inside a bootstrap modal that has an input using bootstrap datepicker. I use this modal as an "update" form to update a saved database record. The values get passed to the form correctly. However, if I click on the datepicker input, the date dropdown comes up, and the form loses all 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've pieced this together from bits of code I've found around the net. Any suggestions on how to fix this is appreciated.

Answer 1

The datepicker you are using also has a show event and the modal trigger show.bs.modal runs again.

A workaround for this is to put a simple check and if f.relatedTarget is undefined, then the trigger is from the datepicker.

$('#form-update-task').on('show.bs.modal', function(f) {
    if (f.relatedTarget === undefined) return; 
    // Do other stuff here
});

See a demo here