jquery提交不提交表單

Question

我不想使用input type =“image”或input type =“submit”。 在點擊時嘗試使用img html標簽作為提交按鈕。 img標簽上的click事件和表單上的提交事件有效，但表單未提交。 有以下HTML代碼

<form id="srch_id_form" name="srch_form" method="post" action="http://phbtxt.com.au:8080/cgi-bin/testpost.cgi" > 
    <img id="srch_id_submitform" src="update.png" />
</form>

粘貼下面的jquery代碼。 當單擊圖像但表單未提交時，我收到提示框“表單正在提交”。

$("#srch_id_submitform").click(function(){
    $("#srch_id_form").submit();
});

$("#srch_id_form").submit(function(){
    alert('Form is submitting');
    return true;
});

Answer 1

jQuery選擇器和DOM元素之間的區別 ：jQuery選擇器是DOM元素集合的包裝器。 如果在jquery選擇器上調用函數，則調用的函數是jQuery函數。 如果需要在DOM元素上調用函數，則必須訪問jQuery集合中的DOM元素，並從中調用該函數。 要執行此操作，請使用get(index) ，其中index是jQuery集合中元素的索引。 如果您的jQuery選擇器只有一個元素，則.get(0)是DOM元素。

submit()是兩個非常不同的東西：

• 在jQuery中，它是一個事件，通常在提交表單時觸發（即通常，當提交表單時，觸發此事件，如果已為其定義了處理程序，則可以執行某些操作）。 如果你在jQuery中調用.submit() ，它將觸發此事件的所有處理程序......但它不會提交表單。
• 在DOM元素中，它僅存在於form元素中，並且是提交表單的方法

您不必觸發submit（）事件，而是調用表單DOM元素的submit（）方法。

為此，請不要使用jQuery選擇器，而是使用DOM表單元素本身：

$("#srch_id_form").get(0).submit();

get（）從jQuery選擇器返回DOM元素。

注意：當您使用元素作為img來觸發動作時，建議給用戶提供視覺線索。 您可以使用css cursor樣式執行此操作，並在:hover state（偽類）屬性中稍微更改樣式。