CODEWITHSUNDEEP
jquery
user1091856
user1091856

Reputation: 3158

JQuery: Submiting data without the need of pressing the submit button?

$(function(){
   $("input[type=text]").keypress(function(){
        $("#loader").load("saveinputtodatabase.php", {...});
   });
});

This works fine on my code. It saves data on the database everytime the user types something on the input. But I know this isnt fair to the server because it will load many the same file many times, thus causing bandwidth to be used more than it should.

How can I make it load "saveinputtodatabase.php" only if 10 seconds has passed since the user has pressed a key?

Upvotes: 1

Views: 110

Answers (6)

sohaan
sohaan

Reputation: 261

$('textarea').on('keyup', _.throttle(_.debounce(function() {
$.ajax(...);
}, 2000), 60000));

This will save your data as soon as the user stops typing for at least 2 seconds, but not more than once every minute. checkout underscore.js for more info

Upvotes: 0

biziclop
biziclop

Reputation: 14596

Check out these underscore.js functions:

http://documentcloud.github.com/underscore/#throttle

Creates and returns a new, throttled version of the passed function, that, when invoked repeatedly, will only actually call the original function at most once per every wait milliseconds. Useful for rate-limiting events that occur faster than you can keep up with.

http://documentcloud.github.com/underscore/#debounce

Creates and returns a new debounced version of the passed function that will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked. Useful for implementing behavior that should only happen after the input has stopped arriving. For example: rendering a preview of a Markdown comment, recalculating a layout after the window has stopped being resized, and so on.

Upvotes: 0

Mandeep Pasbola
Mandeep Pasbola

Reputation: 2639

Try this

$(function(){
   $("input[type=text]").keypress(function(){
    save();        
});
});
function save(){
setTimeout($("#loader").load("saveinputtodatabase.php", {...}),10000)
}

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

var timeout;
$('input[type=text]').keypress(function() {
    if(timeout) {
        clearTimeout(timeout);
        timeout = null;
    }    
    timeout = setTimeout(somefunc, 10000)
});
function somefunc() {
  $("#loader").load("saveinputtodatabase.php", {...});
}

Upvotes: 1

Netorica
Netorica

Reputation: 19327

$(function(){
   $("input[type=text]").keypress(function(){
        var t=setTimeout(function(){
             $("#loader").load("saveinputtodatabase.php", {...})
        },10000);
   });
});

Upvotes: 0

Pavel Strakhov
Pavel Strakhov

Reputation: 40492

You can use setTimeout and clearTimeout for that.

$(function(){
  var timeout = 10000; // 10 seconds
  var tmt = null;
  $("input[type=text]").keypress(function() {
    if (tmt) clearTimeout(tmt);
    tmt = setTimeout(function() {   
      $("#loader").load("saveinputtodatabase.php", {...});
    }, timeout);
  });
});

Upvotes: 2

Related Questions