Modal form clearing when a field is selected

问题

I'm working on an inventory management system and I have a table showing inventory purchased and used. I have included edit buttons to edit a row of information using a modal.

When the modal opens, it displays a form with information from the table. The issue I am having is that when the date field is clicked, it clears the information from all the other fields in the form. This doesn't happen when selecting the product or transaction type fields.

<div class="modal fade" id="editinvModal" role="dialog">
<div class="modal-dialog">

    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
            <h4 class="modal-title custom_align" id="Heading">Edit The Transaction</h4>
        </div>
        <div class="modal-body">
            <form method="post" action="inventory_update.php">
                <!-- Product -->
                <div class="form-group">
                    <select class="form-control" title="Select Product" id="prod1" name="productName">
                        <optgroup>
                            <option value="" disabled>Select Product</option>
                            <option>Product 1</option>
                            <option>Product 2</option>
                        </optgroup>
                    </select>
                </div>

                <!-- Transaction type -->
                <div class="form-group">
                    <select class="form-control" title="Transaction Type" id="type1" name="transactionType">
                        <optgroup>
                            <option value="" disabled>Select Transaction Type</option>
                            <option>Inventory Used</option>
                            <option>Inventory Received</option>
                            <option>Inventory Reconciled</option>
                        </optgroup>
                    </select>
                </div>

                <!-- Date -->
                <div class="form-group input-group">
                    <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
                    <input readonly class="form-control form_datetime" name="date" id="date123" type="text">
                </div>

                <button type="submit" name="submit" class="btn btn-info btn-lg">
                    <span class="glyphicon glyphicon-ok-sign"></span> Update</button>
            </form>
        </div>

        <div class="modal-footer ">
            <div class="row-fluid">
                <button name="cancel" data-dismiss="modal" class="btn btn-warning btn-lg">
                    <span class="glyphicon glyphicon-ok-sign"></span> Cancel
                </button>
            </div>
        </div>

    </div>
</div>

Here is the code for the date selector and putting the data into the modal.

$('#editinvModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); //button that triggered the modal

    var productName = button.data('product');
    var transactionType = button.data('type');
    var date = button.data('date');

    var modal = $(this);

    modal.find('.modal-body #prod1').val(productName);
    modal.find('.modal-body #type1').val(transactionType);
    modal.find('.modal-body #date1').val(date);
});


$(".form_datetime").datetimepicker({
    format: 'dd-mm-yyyy',
    minView: 2,
    pickTime: false,
    autoclose: true,
    todayBtn: true});

If anyone can see what I'm doing wrong, or has any ideas of what might be causing this it would be greatly appreciated

回答1:

Just change modal event from show to shown will fix the issue

Issue reproduced Here

$('#editinvModal').on('shown.bs.modal', function (event) {
     //Rest of the code
});

Problem Solved

来源：https://stackoverflow.com/questions/34280203/modal-form-clearing-when-a-field-is-selected