Question

大家好，大家只想让你们看一下，看看我的表格标签有什么问题。我在这里要做的是提交2个主要div的值，我正在使用bootstrap。

这个不起作用：

<form class="" action="" id="pos_data" method="post">
    <div class="input-group barcode">
        <input type="text" class="form-control" id="txtSearch" name="txtSearch" placeholder="barcode" autofocus>
        <span class='input-group-addon' style='cursor: pointer;' data-toggle='modal' data-target='#myModal'><i class='fa fa-pencil'></i> Edit</span>
    </div>

    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">The Value that would be Inputed will be added to the current value.</h4>
                </div>
                <div class="modal-body">
                    <input type="text" id="addtoQuantity" class="form-control" />
                </div>
                <div class="modal-footer">
                   <button type="button" class="btn btn-default" data-dismiss="modal">Add</button>
                </div>
            </div>      
        </div>
    </div>
</form>

但是当我这样做时

<form class="" action="" id="pos_data" method="post">
    <div class="input-group barcode">
        <input type="text" class="form-control" id="txtSearch" name="txtSearch" placeholder="barcode" autofocus>
        <span class='input-group-addon' style='cursor: pointer;' data-toggle='modal' data-target='#myModal'><i class='fa fa-pencil'></i> Edit</span>
    </div>
</form>

    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">The Value that would be Inputed will be added to the current value.</h4>
                </div>
                <div class="modal-body">
                    <input type="text" id="addtoQuantity" class="form-control" />
                </div>
                <div class="modal-footer">
                   <button type="button" class="btn btn-default" data-dismiss="modal">Add</button>
                </div>
            </div>      
        </div>
    </div>

EDITED 我正在使用ENTER按钮作为提交。因此，如果我点击编辑范围，MODAL div将显示，我可以在该div的文本框中输入一个值。单击添加按钮后，我在输入组的txtSearch上输入要搜索的内容，然后按Enter键。第二种表单结构有效，但我想要提交MODAL div中文本框的值。这有意义吗？

Answer 1

检查一下......我想这会对你有帮助..

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<br /><br />
<form class="" action="" id="pos_data" method="post">
    <div class="input-group barcode">
        <input type="text" class="form-control" id="txtSearch" name="txtSearch" placeholder="barcode" autofocus>
        <span class='input-group-addon' style='cursor: pointer;' data-toggle='modal' data-target='#myModal'><i class='fa fa-pencil'></i> Edit</span>
    </div>

    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">The Value that would be Inputed will be added to the current value.</h4>
                </div>
                <div class="modal-body">
                    <input type="text" name="addtoQuantity" id="addtoQuantity" class="form-control" />
                </div>
                <div class="modal-footer">
                   <button id="add-qty-btn" type="button" class="btn btn-default" data-dismiss="modal">Add</button>
                </div>
            </div>      
        </div>
    </div>
</form>

＆＃13;

npm run build

＆＃13;

Answer 2

如果你想要包含modal的文本框，那么在模态div结束后放置表单的结尾否则，如果你想删除它并且你不想包含它的值，那么在使用这个jquery函数提交时删除它

    $("form").submit(function() {
   $(this).children('#your input id').remove();
});

用CSS给模态显示无然后使用按钮编辑模态单击事件将模态显示设置为阻止

html中的表单结构问题

2 个答案: