选择字段时清除模态形式 [英] 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

推荐答案

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

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

问题已复制此处

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

已解决的问题

这篇关于选择字段时清除模态形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！