表单提交 jQuery 不起作用

小开

当用户试图提交表单。表单只能附加在元素上。表单可以点击一个显式的 <input type="submit">, 或者按 <button type="submit">，或者按 Enter 当某些形式元素有焦点时。

所以基本上，.submit是一个绑定函数，提交表单时你可以使用简单的 Javascript:

document.formName.submit().

小开

因为当您调用 $( "#form_id" ).submit();时，它会触发外部提交处理程序，该处理程序阻止默认操作，而是使用

$( "#form_id" )[0].submit();

或者

$form.submit();//declare `$form as a local variable by using var $form = this;

当您以编程方式调用 dom 元素的提交方法时，它不会触发附加到元素的提交处理程序

小开

最佳答案

第一个错误是在您的表单中有任何与保留字 submit为 ID或 NAME的内容。

如果您计划在表单上调用 .submit()，并且表单在任何表单元素上都有作为 id 或 name 的 submit，那么您需要 重命名那个表单元素，因为表单的提交方法/处理程序被 name/id 属性遮蔽。

还有几件事:

如前所述，您需要使用比 jQuery 更简单的事件提交表单

但是你也需要取消链接上的点击

顺便问一句，你为什么有两个按钮？因为您使用 jQuery 来提交表单，所以您永远不会知道单击了两个按钮中的哪一个，除非您在单击时设置了一个隐藏字段。

<form action="deletprofil.php" id="form_id" method="post">
<div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
<button type="submit" value="1" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>
<button type="submit" value="2" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>
</div>
</form>


$(function(){
$("#NOlink, #OKlink").on("click", function(e) {
e.preventDefault(); // cancel default action
$("#popupDialog").popup('close');
if (this.id=="OKlink") {
document.getElementById("form_id").submit(); // or $("#form_id")[0].submit();
}
});


$('#form_id').on('submit', function(e){
e.preventDefault();
$("#popupDialog").popup('open');
});
});

从你的评论来看，我认为你真的想这么做:

<form action="deletprofil.php" id="form_id" method="post">
<input type="hidden" id="whichdelete" name="whichdelete" value="" />
<div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
<button type="button" value="1" class="delete ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>
<button type="button" value="2" class="delete ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>
</div>
</form>


$(function(){
$("#NOlink, #OKlink").on("click", function(e) {
e.preventDefault(); // cancel default action
$("#popupDialog").popup('close');
if (this.id=="OKlink") {
// trigger the submit event, not the event handler
document.getElementById("form_id").submit(); // or $("#form_id")[0].submit();
}
});
$(".delete").on("click", function(e) {
$("#whichdelete").val(this.value);
});
$('#form_id').on('submit', function(e){
e.preventDefault();
$("#popupDialog").popup('open');
});
});

小开

如果提交函数中有一个错误，将执行提交函数。在其他句子防止默认(或返回假)不工作时，一个错误存在于提交功能。

小开

如果正在进行表单验证，例如

type="submit" onsubmit="return validateForm(this)"


validateForm = function(form) {
if ($('input#company').val() === "" || $('input#company').val() === "Company")  {
$('input#company').val("Company").css('color','red'); finalReturn = false;
$('input#company').on('mouseover',(function() {
$('input#company').val("").css('color','black');
$('input#company').off('mouseover');
finalReturn = true;
}));
}


return finalReturn;
}

再次检查你是否回真。这似乎很简单，但我有

var finalReturn = false;

当表单正确时，validateForm 没有更正它，因此没有作为 finalReturn 提交仍然被初始化为 false 而不是 true。顺便说一下，上面的代码可以很好地处理地址、城市、州等等。

小开

好吧，这并不适用于 OP 的具体情况，但是对于任何像我一样来到这里面对类似问题的人来说，我认为我应该把这个抛出去——也许可以省去一两个头疼的问题。

如果你使用一个非标准的“按钮”来确保 submit事件不被调用:

<form>
<input type="hidden" name="hide" value="1">
<a href="#" onclick="submitWithChecked(this.form)">Hide Selected</a>
</form>

然后，当您尝试访问脚本中的 this.form时，它将出现未定义的结果。正如我所发现的，显然锚元素不能像标准表单元素那样访问父 form元素。

在这种情况下(同样，假设您目前有意避免 submit事件) ，可以将 button与 type="button"一起使用

<form>
<input type="hidden" name="hide" value="1">
<button type="button" onclick="submitWithChecked(this.form)">Hide Selected</a>
</form>

(附录2020: 所有这些年来，我认为更重要的教训是从这一点是检查您的投入。如果我的函数不厌其烦地检查它接收到的参数实际上是一个表单元素，那么问题就会容易得多。)

小开

别忘了用 </form>关闭表单，这样就不能为我提交表单了。

小开

由于在表单元素(参见表格说明书)上引用了每个控件元素的名称，因此名称为“ commit”的控件将重写内置提交函数。

这导致了上述评论中提到的错误:

未捕捉到的 TypeError: 对象 #<HTMLFormElement>的属性“提交”不是函数

正如上面的公认答案一样，最简单的解决方案是更改控制元素的名称。

然而，另一种解决方案是对表单元素使用 dispatchEvent方法:

$("#form_id")[0].dispatchEvent(new Event('submit'));

小开

有时必须将所有表单元素放入同一个 div 中。

例子:-

如果您使用模态的 ajax 提交。

所有的元素都在模态主体中。

有时候我们把提交按钮在模式页脚。

小开

你可以这样使用 jQuery:

$(function() {
$("#form").submit(function(event) {
// do some validation, for example:
username = $("#username").val();
if (username.length >= 8)
return; // valid
event.preventDefault(); // invalidates the form
});
});

在你的 HTML 中:

<form id="form" method="post">
<input type="text" name="username" required id="username">
<button type="submit">Submit</button>
</form>

参考文献:

Https://developer.mozilla.org/en-us/docs/web/api/htmlformelement/submit_event Https://api.jquery.com/submit/

小开

我的问题是，我有一个形式在另一个形式。

<form>
<form></form>
</form>