javascript - 如何使用 jquery 在 div 单击时提交表单？

Question

我已经在单个 php 文件中尝试过，但没有成功，所以我现在在两个单独的 php 文件中尝试，一个用于表单，另一个用于流程。

如何在 div 或链接点击上提交表单？

我试过的代码

$(document).ready(function(){
    jQuery('.web').click(function () {
        $("#g_form").submit();
        alert('alert');
    });
});

表格

<form action="p.php" id="g_form" method="POST">
    <input type="text" name="f1" value="">
    <input type="submit" value="submit!" name="submit"/>
</form>

<div class="web">click</div>

这里是进程文件代码p.php

<?php
if(isset($_POST['f1'])){
    echo $_POST['f1'];
} ?>

当我单击提交按钮时，表单正在提交，但是当我单击 .web div 时，它没有提交表单，即使我收到警告消息但没有提交。

我在这里做错了什么？如果我有想法会很有帮助。

Answer 1

.submit() docs

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.

您将提交按钮命名为提交，上面的段落告诉您这将导致“令人困惑的失败”

因此，如果您访问 dom 元素并查看 .submit 属性，您会发现，因为您将按钮命名为 submit 而不是 .submit 是一个函数对按钮 dom 元素的引用

HTML

<form action="p.php" id="g_form" method="POST">
    <input type="text" name="f1" value="">
    <input type="submit" value="submit!" name="submit"/>
</form>

<div class="web">click</div>

JS

//Get the form element
var form = $("#g_form")[0];
console.log(form.submit);
//prints: <input type="submit" value="submit!" name="submit"/>

当你更改提交名称时

<form action="p.php" id="g_form" method="POST">
    <input type="text" name="f1" value="">
    <input type="submit" value="submit!" name="psubmit"/>
</form>

<div class="web">click</div>

JS

var form = $("#g_form")[0];
console.log(form.submit);
//prints: function submit() { [native code] } 

因此只需为您的提交按钮指定一个与表单属性不冲突的不同名称即可。