javascript 如何使用jquery在div点击时提交表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21533629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a form submit on div click using jquery?
提问by rram
I already tried this in single php file but doesn't work out, so i tried now in two separate php file one for form and another one for process.
我已经在单个 php 文件中尝试过这个，但没有成功，所以我现在在两个单独的 php 文件中尝试，一个用于表单，另一个用于进程。
How to submit the form on a div or link click?
如何在 div 或链接点击上提交表单？
Code i tried
我试过的代码
$(document).ready(function(){
jQuery('.web').click(function () {
$("#g_form").submit();
alert('alert');
});
});
FORM
形式
<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>
Here is the process file code p.php
这是进程文件代码p.php
<?php
if(isset($_POST['f1'])){
echo $_POST['f1'];
} ?>
When i click the submit button the form is submitting but when i click the .webdiv it is not submitting the form even i get the alert message but not submitting.
当我单击提交按钮时，表单正在提交，但是当我单击.webdiv 时，它没有提交表单，即使我收到警报消息但没有提交。
What wrong am doing here? It'll be helpful if i get a idea.
我在这里做错了什么？如果我有想法会很有帮助。
采纳答案by Patrick Evans
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.
表单及其子元素不应使用与表单属性（例如提交、长度或方法）冲突的输入名称或 ID。名称冲突会导致令人困惑的失败。有关规则的完整列表并检查您的标记是否存在这些问题，请参阅 DOMLint。
You give your submit button a name of submit, which the above passage tells you will cause "confusing failures"
你给你的提交按钮命名为提交，上面的段落告诉你这会导致“混淆失败”
So if you accessed the dom element and looked at the .submitproperty you would see that since you name the button submit instead of .submitbeing a function its a reference to the buttons dom element
因此，如果您访问 dom 元素并查看.submit属性，您会看到，因为您将按钮命名为 submit 而不是.submit函数，它是对按钮 dom 元素的引用
HTML
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
JS
//Get the form element
var form = $("#g_form")[0];
console.log(form.submit);
//prints: <input type="submit" value="submit!" name="submit"/>
And when you change the submit name
当您更改提交名称时
<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
JS
var form = $("#g_form")[0];
console.log(form.submit);
//prints: function submit() { [native code] }
so simply give your submit button a different name that does not conflict with a form's properties.
所以只需给你的提交按钮一个不与表单属性冲突的不同名称。
回答by Awlad Liton
You can trigger submit button click.
您可以触发提交按钮单击。
<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');
});
});
回答by AlexanderMP
HTML (provide a name for the form, strip the name from the submit):
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
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');
});
});
回答by Senthilmurugan
Change the name of the submit and Try,
更改提交和尝试的名称，
<input type="submit" value="submit!" name="mySubmit"/>
回答by Fabricio
Remove the submit from the form and try again:
从表单中删除提交并重试：
<form action="http://test.com" id="g_form" method="GET">
<input type="text" name="f1" value=""/>
</form>
<div class="web">click</div>
I changed the action to a real URL and the method to a GET so something is seen changing.
我将操作更改为真实 URL，将方法更改为 GET，因此可以看到某些内容发生了变化。
Fiddle
小提琴
回答by Sérgio S. Filho
$(".web").live('click', DivClick);
function DivClick(){
$("#g_form").submit();
}
