如何使用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'];
} ?>

当我单击提交按钮时,表单正在提交,但是当我单击.webdiv时,即使我收到警报消息但没有提交,也没有提交表单.

我在这做什么错？如果我有个主意,那会很有帮助.

Answer 1

.submit()docs

表单及其子元素不应使用与表单属性冲突的输入名称或ID,例如提交,长度或方法.名称冲突可能导致混乱的故障.有关规则的完整列表以及检查这些问题的标记,请参阅 DOMLint.

您提交提交按钮的名称,上述段落告诉您将导致"混乱的失败"

因此,如果您访问dom元素并查看.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] } 

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