从Enter提交到jQuery，无需提交按钮，无需表单操作

Question

I have looked at many similar questions, but perhaps I do not understand how to call my function.

My goal is to allow the user to type in the form field and hit enter to submit.

Currently if someone enters a value into the form it does nothing if you click enter. To execute they have to click the Search Inventory Button.

My search form simplified...there are many fields, all with a class of jquerydata. The class inventory_search_db_connect is bound to a jQuery function that gathers everything with jquerydata as a class and does its thing.

<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>

The 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();
}

}

I tried several things, the one I though might work was

$(document).ready(function() {

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

On the form tag I added

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

Since I am here, this obviously did not work.

There are many other workarounds but I was unable to decipher how to call the function I want.

Thanks in advance for any insights... Mike

Answer 1

In the html remove the onsubmit="return false" Because it is preventing to execute that

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

Then in the JS you have to prevent the automatic submission by calleing preventDefault():

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

---

Edit:

this.db_actions(); 

will not work because this is the DOM element so

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

Let me know if this works ;)

Answer 2

try this :

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

Or

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

Or

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

Answer 3

Thanks for the replies. @Alan Wagner led me in the right direction.

I ended up adding a hidden submit button, with a class that is the same as the button that is clicked to submit. This is bound to the function.

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

Then in the function I added

event.preventDefault();

to stop the automatic submission

Thanks, I hope this eventually helps someone else Mike