從Enter提交到jQuery，無需提交按鈕，無需表單操作

Question

我看過許多類似的問題，但是也許我不明白如何調用函數。

我的目標是允許用戶在表單字段中鍵入內容，然后按Enter鍵提交。

當前，如果有人在表單中輸入值，則單擊Enter不會執行任何操作。 要執行，他們必須單擊“搜索庫存”按鈕。

我的搜索表單簡化了……有很多字段，所有字段都帶有一類jquerydata。 類stockstock_search_db_connect綁定到jQuery函數，該函數以jquerydata作為類來收集所有內容並執行其操作。

<form method="post"  action="" name="form3" id="form3">
<input type=text name="title" size=25 value="" class="jquerydata">
<input type=button class="inventory_search_db_connect" value="   Search Inventory" class="jquerydata">
</form>

javascript / jQuery

$(document).ready(function () {
pageBinds.db_actions();
SearchBinds.search_actions();
});


var pageBinds = {

db_actions: function() {
var that = this;
 $('.inventory_functions_db_connect').on(
      'click', function(event){


          var query= $(this).closest('.parent').find('.jquerydata').serialize();

....does stuff here
  );
},
unbind: function() {
$('.inventory_functions_db_connect').off();
this.db_actions();
}

}

我嘗試了幾件事，雖然我可能會做的是

$(document).ready(function() {

$('#form3').on("submit", function() {
    this.db_actions();
});
});

在我添加的表單標簽上

<form method="post"  action="" name="form3" id="form3" onsubmit="return false">

因為我在這里，所以這顯然行不通。

還有許多其他解決方法，但是我無法解釋如何調用所需的函數。

預先感謝您的任何見解... Mike

Answer 1

在html中刪除onsubmit =“ return false”，因為它阻止了執行

$('#form3').on("submit", function() {
   this.db_actions();
});

然后在JS中，您必須通過調用preventDefault（）來阻止自動提交：

$('#form3').on("submit", function(e) {
    e.preventDefault();
    this.db_actions();
 });

---

編輯：

this.db_actions(); 

將不起作用，因為這是DOM元素，因此

$('#form3').on("submit", function() {
   pageBinds.db_actions();
});

讓我知道這個是否奏效 ;）

Answer 2

嘗試這個 ：

$('input').keypress(function(e) { 
if (e.which = 13) 
{ 
this.db_actions();
}
});

要么

$('input').keydown(function (e) {
    if (e.keyCode == 13) {
        this.db_actions();
    }
});

要么

$("input").keypress(function (e) {
    if (e.which == 13) {
        e.preventDefault();
        $("form").submit();
    }
});

Answer 3

感謝您的答復。 @艾倫·瓦格納（Alan Wagner）帶領我朝着正確的方向前進。

我最終添加了一個隱藏的提交按鈕，其類與單擊提交的按鈕相同。 這綁定到該功能。

<input type="submit" class="inventory_search_db_connect" style="display: none;">

然后在我添加的功能中

event.preventDefault();

停止自動提交

謝謝，我希望這最終可以幫助別人