如何使用 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

表单及其子元素不应使用与表单属性（例如提交、长度或方法）冲突的输入名称或 ID。 名称冲突可能会导致令人困惑的失败。如需完整列表 规则并检查这些问题的标记，请参阅 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] } 

所以只需给您的提交按钮一个不与表单属性冲突的不同名称。

Answer 2

HTML（为表单提供名称，从提交中去除名称）：

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

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

JavaScript

//use jQuery instead of $ in the global scope, to avoid conflicts. Pass $ as parameter
jQuery(document).ready(function($){
    //use on(), as it's the recommended method
    $('.web').on('click', function () {
        //use plain JavaScript. Forms are easily accessed with plain JavaScript.
        document.g_form.submit();
        alert('alert');
    });
});

Answer 3

从表单中删除提交并重试：

<form action="http://test.com" id="g_form" method="GET">
    <input type="text" name="f1" value=""/>
</form>

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

我将操作更改为真实的 URL，将方法更改为 GET，因此可以看到一些变化。

Fiddle

Answer 4

更改提交名称并尝试，

<input type="submit" value="submit!" name="mySubmit"/>

Answer 5

$(".web").live('click', DivClick);

function DivClick(){
    $("#g_form").submit();
}

Answer 6

您可以触发提交按钮点击。

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

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



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

演示：http://jsfiddle.net/awladnas/a6NJk/610/