We Keep Coding

Only send post/get if form values has changed

I want to prevent multiple ajax calls (user holds enter key down or multi presses submit or other)
I'm thinking, the best way is to use a var with the previous form post values and compare them at each click/submit.. Is it the same? : Then do nothing
But I don't know how to go about it
Here is my javascript/jquery:
$('form').submit(function() {
$theform = $(this);
$.ajax({
url: 'validate.php',
type: 'POST',
cache: false,
timeout: 5000,
data: $theform.serialize(),
success: function(data) {
if (data=='' || !data || data=='-' || data=='ok') {
// something went wrong (ajax/response) or everything is ok, submit and continue to php validation
$('input[type=submit]',$theform).attr('disabled', 'disabled');
$theform.unbind('submit').submit();
} else {
// ajax/response is ok, but user input did not validate, so don't submit
console.log('test');
$('#jserrors').html('<p class="error">' + data + '</p>');
}
},
error: function(e) {
// something went wrong (ajax), submit and continue to php validation
$('input[type=submit]',$theform).attr('disabled', 'disabled');
$theform.unbind('submit').submit();
}
});
return false;
});

Not very creative with naming vars here:
var serial_token = '';
$('form').submit(function() {
$theform = $(this);
if ($(this).serialize() === serial_token) {
console.log('multiple ajax call detected');
return false;
}
else {
serial_token = $(this).serialize();
}
$.ajax({
url: 'validate.php',
type: 'POST',
cache: false,
timeout: 5000,
data: $theform.serialize(),
success: function(data) {
if (data=='' || !data || data=='-' || data=='ok') {
// something went wrong (ajax/response) or everything is ok, submit and continue to php validation
$('input[type=submit]',$theform).attr('disabled', 'disabled');
$theform.unbind('submit').submit();
} else {
// ajax/response is ok, but user input did not validate, so don't submit
console.log('test');
$('#jserrors').html('<p class="error">' + data + '</p>');
}
},
error: function(e) {
// something went wrong (ajax), submit and continue to php validation
$('input[type=submit]',$theform).attr('disabled', 'disabled');
$theform.unbind('submit').submit();
}
});
return false;
});
You could combine this with a timeout/interval function which aborts the submit, but the code above should just compare the data in the form

If you have some kind of submit button, just add a class 'disabled' to it when you start the ajax call, and check if it is present before trying to make the call. Remove the class when the server gives a response. Something like:
...
$theform = $(this);
$button = $theform.find('input[type=submit]');
if ($button.hasClass('disabled')) {
return false;
}
$button.addClass('disabled');
$.ajax({
....
},
complete: function () {
$button.removeClass('disabled');
}
});
...

validating and submitting form using jquery issue

I'm trying to submit form using j-query, before submitting it should do some validation and in that I've validation for capcha using ajax. Everything works fine without ajax validation.
<form id="RegistrationForm" name="RegistrationForm" method="post" action="save.php" >
jquery code
$('#RegistrationForm').submit(function(){
//some validation goes here
if($('#captcha').val() != '')
{
var captcha = $('#captcha').val();
$.ajax({
url:'validate.php',
type:'POST',
data:{captcha:captcha},
success: function(data){
if(data == 'false')
{
alert('Wrong Captcha is typed!');
return false;
}
else
{
alert('enter');
document.getElementById("RegistrationForm").submit();
return true;
}
}
});
}
});`
while submitting form it shows alert "enter" but form not getting submitted.
Thanks in advance.

You probably need to change your variable to a JSON seening how you are retreiving from a php. if thats not the solution try
if (data){
}else{
}
FYI this is not jquery validation. Jquery validation is a library set up in order to make sure the proper fields are set up correctly before submitting. What you have done is tested if the captcha is correct after submitting.

try something like this
$(function(){
$('#RegistrationForm').submit(function(){
if($('#captcha').val() != ''){
var captcha = $('#captcha').val();
$.ajax({
url:'validate.php',
type:'POST',
async:false,
data:{captcha:captcha},
success: function(response){
if(response == 'false')
{
alert('Wrong Captcha is typed!');
return false;
}
else
{
alert('enter');
return true;
}
}
});
}
});`
})

Try making ajax synchronous
$.ajax({
url:'validate.php',
type:'POST',
async: false,
data:{captcha:captcha},
success: function(data){
if(data == 'false')
{
alert('Wrong Captcha is typed!');
return false;
}
else
{
alert('enter');
document.getElementById("RegistrationForm").submit();
return true;
}
}
});

I think the problem is when the ajax request returns other value than false , every time you are again calling from submit , i think every time it calls to submit function , but could not submit successfully . because it calls submit function recursively.
try
$('#RegistrationForm').submit(function(){
//some validation goes here
if($('#captcha').val() != '')
{
var captcha = $('#captcha').val();
$.ajax({
url:'validate.php',
type:'POST',
data:{captcha:captcha},
success: function(data){
if(data == 'false')
{
alert('Wrong Captcha is typed!');
return false;
}
else
{
alert('enter');
}
}
});
}
});

How can I disable/enable form submit in an ajax request

I'm trying first disabling form submission before the request starts and then on success enable again the form submit
this is my code:
$.ajax({
beforeSend:function(){
//disable form
$('form').on('submit',function(){
return false;
});
},
success:function(){
//enable form
$('form').on('submit',function(){
return true;
});
},
complete:function(){
//enable form
$('form').on('submit',function(){
return true;
});
,
});
it seems not working on success and complete, the form is disabled but not enabled then.
I'm using latest jQuery version.

Better use different strategy: Set a global variable to decide whether or not to submit the form. Then check it while submitting the form.
var canSubmit = 1;
$.ajax({
beforeSend:function(){
//disable form
canSubmit = 0;
},
success:function(){
//enable form
canSubmit = 1;
},
complete:function(){
//disable form
canSubmit = 1;
});
$('form').on('submit',function() {
if (!canSubmit) {
return false;
}
});

jQuery events normally support multiple handlers so you would need to turn the previous event handlers off before attaching a new one.
To use off you need to keep a reference to your handler e.g.
var myForm = $("form"),
enableSubmit = function(event) { return true; },
disableSubmit = function(event) { return false; },
ajaxCompleteHandler = function() {
myForm.off(disableSubmit);
myForm.on(enableSubmit);
};
myForm.on(enableSubmit);
$.ajax({
beforeSend: function() {
myForm.off(enableSubmit);
myForm.on(disableSubmit);
},
success: ajaxCompleteHandler,
error: ajaxCompleteHandler,
complete: ajaxCompleteHandler //you might get away with just this as I believe it's called for success and failure
});
Alternatively you could just disable the submit button ($("mybutton").prop("disabled", true))which should be more intuitive to the user.

Instead of doing a return false in beforeSend try this
$('form').on('submit',function(e){
e.preventDefault();
return false;
});

Once you return false on the submit button,it is obvious that you cannot again invoke submit operation, because the form is not now able to submit info.
The another solution is that use onclick function,like below :
Javascript file
function savecustomquestion(){
$.ajax({
type : 'POST',
url : 'customquestion.php',
data:{tablename:$('#productname').val(),name:$('#uname').val(),email_address:$('#email').val(),voucher_code:$('#voucher_code').val(),question:$('#customquestion').val()},
success: function(response){
console.log("yes");
},
error : function(response){
console.log(response);
}
});
}
HTML code
<button type="button" id="customquestionbutton" class="span2" onclick="savecustomquestion()">Verstuur</button>
PHP code
mysql_select_db('mydatabase',$connect);
if(!isset($_POST['voucher_code'])){
$voucher_code = "";
}
else{
$voucher_code = $_POST['voucher_code'];
}
$email_address = $_POST['email_address'];
$name = $_POST['name'];
$question = $_POST['question'];
$tablename = $_POST['tablename'];
mysql_query("insert into customquestion (voucher_code,email_address,name,question) VALUES('$voucher_code','$email_address','$name','$question') ");

jQuery - Resume form submit after ajax call

Is it possible to stop a form from submitting and then resubmitting the same form from within the success of an ajax call?
At the moment it gets to the success bit but it doesn't resubmit the form which should submit and redirect the user to the http://example.com website.
Thank you very much for any help in advance
If it's not possible to do it this way, is there another way of getting it to work?
$(document).ready(function() {
$('form').submit(function(e) {
e.preventDefault();
$.ajax({
url: $('form').attr('action'),
type: 'post',
data: $('form').serialize(),
success: function(data) {
if (data == 'true')
{
$('form').attr('action', 'http://example.com');
$('form').unbind('submit').submit(); // mistake: changed $(this) to $('form') - Problem still persists though it does not resubmit and redirect to http://example.com
}
else
{
alert('Your username/password are incorrect');
}
},
error: function() {
alert('There has been an error, please alert us immediately');
}
});
});
});
Edit:
Stackoverflow posts checked out for the code below:
Resume form submission after $.ajax call
How to reenable event.preventDefault?
I just thought I'd mention I have also tried this code without avail.
var ajaxSent = false;
$(document).ready(function() {
$('form').submit(function(e) {
if ( !ajaxSent)
e.preventDefault();
$.ajax({
url: $('form').attr('action'),
type: 'post',
data: $('form').serialize(),
success: function(data) {
if (data == 'true')
{
alert('submit form');
ajaxSent = true;
$('form').attr('action', 'http://example.com');
$('form').submit();
return true;
}
else
{
alert('Your username/password are incorrect');
return false;
}
},
error: function() {
alert('There has been an error, please alert us immediately');
return false;
}
});
});
});
I have also tried this code without any luck as well.
$(document).ready(function() {
$('form').submit(function(e) {
e.preventDefault();
$.ajax({
url: $('form').attr('action'),
type: 'post',
data: $('form').serialize(),
success: function(data) {
if (data == 'true')
{
$('form').attr('action', 'http://example.com');
$('form').unbind('submit').submit();
return true;
}
else
{
alert('Your username/password are incorrect');
return false;
}
},
error: function() {
alert('There has been an error, please alert us immediately');
return false;
}
});
});
});

Solution was quite simple and involved adding and setting async to false in .ajax(). In addition, I have re-worked the code to work of the submit button instead which submits the form when the AJAX passes successfully.
Here is my working code:
$(document).ready(function() {
var testing = false;
$('#btn-login').on('click', function() {
$.ajax({
url: $('form').attr('action'),
type: 'post',
data: $('form').serialize(),
async: false,
success: function(data) {
if (data == 'true')
{
testing = true;
$('form').attr('action', 'https://example.com');
$('form').submit();
}
else
{
alert('Your username/password are incorrect');
}
},
error: function() {
alert('There has been an error, please alert us immediately');
}
});
return testing;
});
});

It's no good practice to reselect all form tags throughout your code, what if you have multiple forms on the page?
Also you'd better use .on() and .off() with jQuery.
$(document).ready(function() {
$('form').on('submit', function(e) {
e.preventDefault();
// cache the current form so you make sure to only have data from this one
var form = this,
$form = $(form);
$.ajax({
url: form.action,
type: form.method,
data: $form.serialize(),
success: function(data) {
if (data == 'true')
{
$form.attr('action', 'http://example.com').off('submit').submit();
}
else
{
alert('Your username/password are incorrect');
}
},
error: function() {
alert('There has been an error, please alert us immediately');
}
});
});
});

In one line you use $('form') to select the form to change its action, but then you use $(this) to try to select that same form. I would guess that this inside the callback function isn't what you expect it to be, and is something other than your form (possibly the window object).
Just chain the calls:
$('form').attr('action', 'http://example.com').unbind('submit').submit();

How to reset event.preventDefault() of a form submit event?

I have a form that submits shopping cart data to a payment gateway (WorldPay) payment processing page. I need to perform a couple of extra logic the moment the custom decides to proceed to the payment but before the form submission itself. Basically, I simply want to generate a unique reference to the order at the very last moment.
Here is the jQuery code for the submit event:
$(function(){
$('#checkout-form').submit(function(e){
var $form = $(this);
var $cartIdField = $('#cartId');
console.log($cartIdField.val());
if($cartIdField.val() == ''){
e.preventDefault();
$.ajax({
url: baseUrl + '/shop/ajax/retrieve-shopping-cart-reference/',
data: {}, type: 'post', dataType: 'json',
success: function(json){
if(json.error == 0){
$('#cartId').val(json.data.cart_reference_number);
$form.submit();
}else{
alert(json.message);
}
}
});
}else{
console.log('Submitting form...'); //Does not submit!
}
});
});
The problem is that during the second submit triggered within the success: clause, the form isn't submitted still. I am assuming event.preventDefault() persists beyond the current condition.
How can I get around this?

For performe the any operation before form submit i used the following menthod hope it wil help
$('#checkout-form').live("submit",function(event){
//handle Ajax request use variable response
var err =false;
var $form = $(this);
//alert($form);
var values = {};
$.each($form.serializeArray(), function(i, field) {
values[field.name] = field.value;
});
//here you get all the value access by its name [eg values.src_lname]
var $cartIdField = $('#cartId');
console.log($cartIdField.val());
if($cartIdField.val() == ''){
$.ajax({
// your code and condition if condition satisfy the return true
// else return false
// it submit your form
/*if(condition true)
{
var err =true;
}
else
{
var err = false;
}*/
})
}
else
{
return true;
}
if(err)
{
return false
}
else
{
return true;
}
})

e.preventDefault() remove default form submit attribute which can not be reverted if applied once.
Use below code instead to prevent a form before submitting. This can be reverted.
$('#formId').attr('onsubmit', 'return false;');
And below code to restore submit attribute.
$('#formId').attr('onsubmit', 'return true;');

Only call e.preventDefault() when you really need to:
if(not_finished_yet) {
e.preventDefault();
}