选择字段时清除模态表单

Question

我正在开发一个库存管理系统，我有一个 table 显示购买和使用的库存。我已经包含了编辑按钮来使用模式编辑一行信息。

当模式打开时，它会显示一个包含来自 table 的信息的表单。我遇到的问题是，当单击日期字段时，它会清除表单中所有其他字段的信息。选择产品或交易类型字段时不会发生这种情况。

<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>

这是日期选择器的代码，并将数据放入模式中。

$('#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});

如果有人能看出我做错了什么，或者对可能导致此问题的原因有任何想法，我们将不胜感激

Answer 1

只需将模式事件从 show 更改为 shown 即可解决问题

问题重现Here

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

Problem Solved

选择字段时清除模态表单

Modal form clearing when a field is selected

javascript

jquery

twitter-bootstrap

bootstrap-modal