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處理表單處理，則需要在button和form處理代碼中返回false 。

我是能夠實現使用下面的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>
這就是你所需要的