javascript – 如何使用jquery在div上单击提交表单?

前端之家收集整理的这篇文章主要介绍了javascript – 如何使用jquery在div上单击提交表单?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经在单个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时,即使我收到警报消息但未提交,也未提交表单.

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

解决方法

.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
07001.

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

因此,如果您访问dom元素并查看.submit属性,您会看到,因为您将按钮提交命名而不是.submitbeing函数,因此它对按钮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] }

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

原文链接:https://www.f2er.com/jquery/150957.html

猜你在找的jQuery相关文章