CODEWITHSUNDEEP
javascriptjqueryforms
CTully12
CTully12

Reputation: 73

Alternatives to using a submit button with jQuery

Currently I am using a ajax post back to pass data to a my controllers, wherein I do my magic from there. The problem I am having right now is that we have removed a submit button and instead attached a handler using .keyup(), on a smaller database this works great! However when moving it to a larger database, as you might of guessed, it causes all sorts of issues, from delayed responses to crashes etc. So it won't work. My question to stack overflow would but this: What's a user-friendly version to submit a form? Since the front end user could potentially be searching for single character values (e.g 6 as in userid 6) I can't limit it to a minimum character submission. We don't want a delay timer as that could back fire in a couple different ways. so basically I've ruled out .delay(), .blur(), and .keyup().

Upvotes: 0

Views: 263

Answers (3)

Robban
Robban

Reputation: 6802

If your requirement is to not use a submit button but rather process the input as the user types then I have used solutions like this in the past.

First define a function to manage the delay, something like this:

var inputDelay = (function () {
    var timer = 0;
    return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();

Then for your actual ajax-call do something like this in your onkeyup event:

inputDelay(function () { 
    //AJAX-call goes here 
}, 400)

Please note that this is not a universal solution for handling the order of responses from the server though. You might very well get several AJAX requests sent to the server and this code does nothing to make sure you only handle the latest call.

Upvotes: 2

Mohammed R. El-Khoudary
Mohammed R. El-Khoudary

Reputation: 1203

I had the same issue as you.. What I did is the following: I used on keyup.. and I fire the search if the user stayed still for .. say 300 millisecond or 500 millisecond..

While the user is typing I clear and reset the setTimeout().. so if the user stayed still for the timeout time the search will fire.

Additionally you can take the reference of the xHR object and cancel it if another request was to take place..

Do I understand your question correctly? if you need a written example I can write you a fiddle.

Upvotes: 1

Justin Niessner
Justin Niessner

Reputation: 245399

The best way to handle your situation would be to use a form, complete with a submit button. You would then add your event listener to the submit event of the form, cancel the post-back, and then do your processing. This would handle both the user clicking the submit button as well as pressing the enter key from inside the form.

Upvotes: 1

Related Questions