Question

我的表格如下：

<form action="/Soeg.aspx" method="GET" id="searchFormHeader"></form>

在下面的代码中，我有一个提交按钮，表单由form =“”触发但是，IE不支持，然后我尝试在jQuery for IE中制作解决方案

<input type="submit" form="searchFormHeader" value="Søg" class="site-search-input">

jQuery解决方案如下：

//If IE submit site search form
if ($jq(".ie")) {
    $jq(".site-search-input").click(function () {
        alert("clicked");
        $jq('#searchFormHeader').submit(function () {
            alert('Handler for .submit() called.');
            return false;
        });
    });
}

然而，它永远不会进入submit（），这没有任何意义？

Answer 1

您已为表单提交提供了处理程序，但您实际上从未提交表单。拨打：

$jq('#searchFormHeader').submit();

Answer 2

submit函数与click非常相似，传递的参数是相应事件的事件处理程序。因此，在click事件中，您似乎正确地指出了它，但您在该事件处理程序中唯一要做的就是将事件处理程序附加到form.submit事件。你不会触发那个事件。

查看您的代码和问题，似乎您希望在点击按钮时提交表单。如果是这样，您可以将代码更改为以下

if ($jq(".ie")) {
    $jq('#searchFormHeader').submit(function () {
            alert('Handler for .submit() called.');
            return false;
        });
    $jq(".site-search-input").click(function () {
        alert("clicked");
        $jq('#searchFormHeader').submit();
    });
}

我已将事件处理程序移到click事件之外，以避免反复附加与事件处理程序相同的功能（每次单击该按钮时）。这将确保如果您多次单击该按钮，则每次都不会将事件处理程序附加到提交事件

修改如果没有提交输入值，您的问题有三个选项

如果您希望支持IE8-，请将输入移动到表单内部。这将是我的首选，它很简单，可以消除整个问题。

不使用提交，但使用$ .post
发回
克隆输入元素将其添加到表单并在提交后再次将其删除。我发现这是hackish

如果你想发回来，你可以做这样的事情

var form,formId,data,url,id, submit = function () { //find the form of whatever activated the submitting form = $(this).closest("form"); formId = form.attr('id'); //iterate all related input fields and collect the data //note selects, textareas and checkbox/radiobuttons //needs attention if those are also possible data = {}; $jq("input[form="+formId + "]").each(function(){ id = this.attr('name') ? this.attr('name') : this.attr('id'); data[id] = this.val(); }); //find the url to post to url = form.attr('action') ? form.attr('action') : windows.location; //post the data to the server //using your original submit event handler as callback $jq.post(url,data,function () { alert('Handler for .submit() called.'); }); return false; } //make sure they all have a form attribut $jq("input").each(function(){ if(!this.attr('form')){ formId = this.closest("form").attr('id'); this.attr('form',formId); } } //attach click event handler to the button $jq(".site-search-input").click(submit.call(this)) .closest("form") .submit(submit.call(this));

Answer 3

Jquery功能：

$jq(".site-search-input").click(function () {
    alert("clicked");
    $jq('#searchFormHeader').submit(function () {
        alert('Handler for .submit() called.');
        return false;
    });
});

HTML元素：

<form action="/Soeg.aspx" method="GET" id="searchFormHeader">

  <input type="submit" form="searchFormHeader" value="Søg" class="site-search-input"/>

</form>

Answer 4

HTML代码：

<form action="#" method="POST" id="searchFormHeader">
<input type="submit" form="searchFormHeader" value="Søg" class="site-search-input">
</form>

JQ代码：

$(document).ready(function () {
if ($(".ie")) {
    $(".site-search-input").click(function () {
        alert("clicked");
        $('#searchFormHeader').submit(function () {
            alert('Handler for .submit() called.');
            return false;
        });
    });
}
});

用jQuery提交表单不起作用？

4 个答案: