[英]How to make a form submit on div click using jquery?
我已经在单个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时,即使我收到警报消息但未提交,也未提交表单。
我在这做什么错? 如果我有个主意,那会很有帮助。
表单及其子元素不应使用与表单属性冲突的输入名称或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] }
因此,只需为您的提交按钮指定一个不与表单属性冲突的名称。
您可以触发提交按钮单击。
<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');
});
});
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');
});
});
更改提交的名称并尝试,
<input type="submit" value="submit!" name="mySubmit"/>
从表单中删除提交,然后重试:
<form action="http://test.com" id="g_form" method="GET">
<input type="text" name="f1" value=""/>
</form>
<div class="web">click</div>
我将操作更改为实际URL,将方法更改为GET,以便看到某些内容发生变化。
$(".web").live('click', DivClick);
function DivClick(){
$("#g_form").submit();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.