How to allow ajax form submit on each click? - ajax

Question

I noticed that my ajax form can submit twice at the most, meaning once I submit and retrieve data and want to submit the form again to refine search(it's a search form) it can do it. More than twice it cannot submit, the submit button also becomes disabled. Is there any restriction on ajax form to get submitted multiple times?
My form submission is trigered by
$("form").on("submit", function () ...
ajax:
var getData;
$("form").on("submit", function () {
//$(this).find(':submit').attr('disabled','disabled');
var data = {
"action": "test"
};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "ajax2.php",
data: data,
success: function (data) {
getData=data;
//$("#main_content").slideUp("normal",function(){
$(".the-return").show();
if(data!=""){
console.log(data.length);
for (i = 0; i < data.length; i++) {
//availability
if(data[i].weekM==0)
{
var avail="Not available";
}
else
{
avail="Available";
}
if(data[i].endA==0)
{
var avail2="Not available";
}
else
{
avail2="Available";
}
if(data[i].weekE==0)
{
var avail3="Not available";
}
else
{
avail3="Available";
}
$(".the-inner-return").append("<div class='inside_return'><section class='row'><div class='small-10 medium-10 large-8 small-centered medium-centered large-centered columns d_result'><div class='text-center post_id'>" + data[i].id +"</div><div class='small-12 medium-12 large-9 columns subject'>"+ data[i].subject+" Instructor</div><div class='small-12 meidum-12 large-3 columns rate'>" + data[i].rate +"</div><span class='hourly'>hourly</span><div class='small-12 medium-12 large-12 text-center name'>" + data[i].name +"</div><div class='small-12 medium-12 large-4 columns plusneg'><img src='img/happy.png'>" + data[i].plus+"<br/><img src='img/sad.png'>"+ data[i].neg+"</div><div class='small-12 medium-12 large-4 columns gender text-center'>Male<br/>Availabiliy:<br/>Mornings:<span class='avail'>" + avail+"</span><br/>Afternoons:<br/><span class='avail'>"+ avail2+"</span><br/>Evening:<span class='avail'>"+ avail3+"</span></div><div class='small-12 medium-12 large-4 columns score text-center'><h6>Reputation score</h6>"+ data[i].reputation+"</div><div class='row'><div class='small-12 medium-12 large-5 columns shortlist text-center'>Add to Shorlist</div><div class='small-12 medium-12 large-5 columns gettutor text-center'>Get Tutor</div></div><div class='small-12 medium-12 large-12 columns text-center date'>Posted on:<span class='elec'>"+ data[i].postDate+"</span></div></div></section></div>");
//alert(data[i].name)
}
}else{
$(".the-return").hide();
$("#the-return-fail").show();
}
//});//closes #main_content
}
});
return false;
});

Answer 1

There is no counter that prevents multiple ajax submissions. However, if you are attempting to submit before the previous request is complete then you probably are going to have problems if you use global variables.
Here's an example that does multiple submissions.
<form action="" method="post">
<input name="foo" id="foo" type="text" />
<button>Send It</button>
</form>
<div id="output">
</div>
The data here is formatted for JSFiddle's echo service
$("form").on("submit", function(event) {
event.preventDefault();
// prevent next submission before request is complete
$("button").prop("disabled", true);
var dt = new Date();
$.ajax({
url: "/echo/json/",
method: "post",
data: {
json: JSON.stringify({
date: new Date(),
foo: $("#foo").val()
}),
delay: 3
},
success: function(result) {
$("#output").append($("<div>").html(result.foo + " " + result.date));
$("button").prop("disabled", false);
}
});
});