在php中提交表单时页面挂起答案

【问题标题】：Page is hanging when submitting the form in php在php中提交表单时页面挂起
【发布时间】：2020-12-02 17:54:37
【问题描述】：

我正在尝试使用 jQuery 提交表单并最终挂起该页面。我有这一页，其中列出并为此使用了表格。对于每个列表，我都提供编辑选项。因此，当用户单击该行上的编辑按钮时，一个表单将落在tr 标记和更新按钮下方。当我点击更新按钮时，页面开始加载，但它一直在加载。

这是我的表单（示例），我有 foreach 用于列出，因此对于每一行，我们都有一个用 id 分隔的新表单。

<form action="" class="edit_form 1" method="POST">
    <div class="row filter-row">
        <div class="col-sm-12 col-md-6">
            <div class="form-group">
                <label class="focus-label">Order Id</label>
                <input type="text" name="order_id" class="form-control floating order_id" value="">
                <div class="orderid_error text-danger form_error"></div>
            </div>
        </div>
    </div>
    <div class="text-center">
        <button class="btn btn-primary submit-btn test_update" data-test_id="1" name="testupdate" type="button" value="test_update">Update</button>
    </div>
</form>

$(document).on("click",".test_update",function(){
    var test_id     = $(this).attr("data-test_id");
    if(typeof test_id!="undefined" && test_id!=""){
        $(".edit_form."+test_id).submit();
    }
});

【问题讨论】：

挂起是什么意思？
在检查元素网络选项卡中您的请求结果是什么？
hang 意味着，它只是继续加载，如果它正在加载并且您单击页面中的任何其他链接，它将不起作用。如果您再次复制粘贴 url 事件，它将不起作用。我必须清理缓存，然后页面将再次加载。网络选项卡为空白。
在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_)； 它们不能以数字开头、两个连字符或一个连字符后跟一个数字。
表单类中的数字基本上就是表单的id。正如我在问题中提到的，对于我的每一行，我都有一个表单并将表单标记为唯一，我必须将 id 附加到类。

标签： php jquery forms

【解决方案1】：

我认为问题已经结束了： $(".edit_form."+test_id).submit();

jQuery 搜索代码中不存在的 class 值为 => 'edit_form.1' 的元素。

为此，您需要为每个表单设置一个唯一的 ID（假设您已经按照您提到的那样完成了它）。试试这个：

$(document).on("click",".test_update",function(){
var test_id     = $(this).attr("data-test_id");
if(typeof test_id!="undefined" && test_id!=""){
    $(this).parent().parent().submit();
}
});

由于在 DOM 节点中，每个按钮都会以不同的方式保存，即使它具有相同的类，添加 parent() 应该不会有问题，因为它会调用单击元素的父元素，但不是所有具有类名的按钮.

让我知道它是否有效。 :)

【讨论】：

'edit_form.1' 是我们表单的类名。
class="edit_form 1" ，你把它作为你的类，所以'edit_form'和'1'将被分别视为不同的类。另外，我不建议在类名之间使用“点”(.)。
在 jQuery 或 CSS 中，如果您正在访问此类，则必须在类名之间添加 'dot'(.)
是的，我的错，同意，你可以在 jQuery 中做到这一点。我还尝试在本地运行您的代码，它按预期工作。

【解决方案2】：

在单个页面上分配多个表单可能会出现问题。由于您使用 jQuery 提交表单，因此有一个解决方法。

不要在foreach 中创建表单，而是只需创建一个输入框为空的表单，然后通过 jQuery 分配值，然后提交表单。

<form id="example" action="" class="edit_form 1" method="POST">
<div class="row filter-row">
    <div class="col-sm-12 col-md-6">
        <div class="form-group">
            <label class="focus-label">Order Id</label>
            <input id="orderid" type="text" name="order_id" class="form-control floating order_id" value="">
            <div class="orderid_error text-danger form_error"></div>
        </div>
    </div>
</div>
<div class="text-center">
    <button class="btn btn-primary submit-btn test_update" data-test_id="1" name="testupdate" type="button" value="test_update">Update</button>
</div>

$(document).on("click",".test_update",function(){
    var test_id     = $(this).attr("data-test_id");
    if(typeof test_id!="undefined" && test_id!=""){
       $("#orderid").val("YOUR VALUE");
       $("#example").submit();
    }
});

这肯定会奏效。

【讨论】：

让我做，我会检查它。
这个问题的优秀解决方案。我被这个问题困扰了很长时间。谢谢。
很高兴为您提供帮助！ :)