在标签外渲染的表单元素答案

【问题标题】：Form elements rendering outside tag在标签外渲染的表单元素
【发布时间】：2018-11-01 09:10:50
【问题描述】：

我在 laravel PHP 中创建了一个简单的 Bootstrap 4 模式，并在其中添加了一个表单。但是，当我尝试提交表单时，它似乎没有这样做。经过几个小时试图找出问题所在，我想我设法找到了问题所在。表单元素似乎在 form 标记之外呈现。有谁知道这个问题的解决方案？请帮忙。

提前致谢！

代码：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form>
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                    </div>

                    <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

【问题讨论】：

您希望我们猜测您生成表单的代码吗？如果是 - 你会等待很长时间的答案。
您的表单似乎根本不包含任何标签。将结束表单标签放在适当的位置，请不要发布您的代码图片。
如果您不提供代码，我们将无法帮助您。
显示你的代码@ProblemChild
对不起，伙计们。我刚刚编辑并添加了代码。我不认为它会有用，因为我什至尝试使用 Bootstrap 4 本身的基本形式，但问题似乎仍然存在。 :(

标签： php html laravel bootstrap-4 adminlte

【解决方案1】：

在modal-body 中添加form 标签并使用jquery 在点击按钮时提交表单

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
              <form id="FormExample">
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>

                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
              </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" id="SaveFormexample" class="btn btn-primary">Save changes</button>
            </div>

    </div>
</div>

jquery：

$('#SaveFormexample').click(function() {
   $('#FormExample').submit();
});

【讨论】：

表单元素似乎仍然呈现在form 标记之外。
检查所有标签是否关闭？ @ProblemChild

【解决方案2】：

您编写的代码是 100% 工作的，但是 ...

确保：

您关闭了此模态组件之前的所有“表单”标签。
您没有将您的表单包含在另一个表单标签中。

【讨论】：