Jquery提交表单错误

Question

我有一个表单，我想在按钮点击时提交表单，这是我的HTML：

<form id="checkin" name="checkin" id="checkin" action="#" method="post">
    <input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
    <input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>

这是我的jQuery：

$("button").live('click', function() {
    $("#checkin").submit();
});

$("#checkin").live('submit', function() {

});

当我单击表单内的提交按钮时，提交确定，但是当我点击表单标签之外的按钮时它没有提交，为什么？我该如何解决这个问题？

Answer 1

您正在选择所有<button>元素，但您正在尝试选择<input>。

它在表单内部时有效，因为正常的提交功能会运行。

更改选择器以匹配您实际拥有的元素：input[type=submit]

更好的是，忘记JS并更好地构建HTML，以便提交按钮位于表单内。

Answer 2

如果您正在使用JavaScript处理表单处理，那么您需要在false和button处理代码中返回form。

我能够使用下面的JavaScript和两个HTML示例（button元素内外的form）获得相同的结果。

的JavaScript / jQuery的

    $("button").live('click', function() {
        $("#checkin").submit();
        return false;
    });

    $("#checkin").live('submit', function(){
        alert("Hello world!");
        return false;
    });

HTML示例1

表单内的按钮。

<form id="checkin" name="checkin" id="checkin" action="" method="post">
    <input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
    <input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
    <button>test</button>
</form>

HTML示例2

表单外的按钮。

<form id="checkin" name="checkin" id="checkin" action="" method="post">
    <input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
    <input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">

</form>

<button>test</button>

正如我所说，两个例子都按预期执行。您可能需要仔细检查button监听代码，以确保您实际上正在使用button元素。如果您使用id属性设置为button的元素，那么您需要确保使用正确的jQuery选择器：

$("#button").live('click', function() { // ...

Answer 3

你可以在表单之外有一个简单的超链接，如下所示 <a href="javascript: $('form checkin').submit()"> click to submit </a>
这就是你所需要的一切