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') ");
Related
I have tried everything. I find other questions but no answer solves my problem:
$(document).on('submit', 'form#formNuevoContacto', function(event) {
var $form = $(this);
var $accionActual = $form.find('#action');
$form.find('#action').val('validate');
$.post($form.attr("action"), $form.serialize(), function(response) {
if (response.resultValidation == "true") {
$form.submit(); // ==> INFINITE LOOP!
} else {
alert('Form is not valid!');
}
});
event.preventDefault();
});
I tried: $form.unbind().submit() but didn't work.
You could use a toggle to selectivelly pre-process the submit or otherwise let the browser do its job; In the edit bellow, just before issuing the second submit I place a variable in the form object called "isPreProcessing". As you can see, the first thing the code does is to check if this value is present, and if so, delegate the submit to the browser.
$(document).on('submit', 'form#formNuevoContacto', function(event) {
if(this.isPreProcessing) {
//allow for actual submit to run
this.isPreProcessing = false;
return;
}
var $form = $(this);
var $accionActual = $form.find('#action');
$form.find('#action').val('validate');
$.post($form.attr("action"), $form.serialize(), function(response) {
if (response.resultValidation == "true") {
//prevent the loop
this.isPreProcessing = true;
$form.submit();
} else {
alert('Form is not valid!');
}
});
event.preventDefault();
});
You should just do a single ajax call, and handle the error if it doesn't validate. If the server validates it, the server should then store it. It is messy code as you have it now, and it is also a waste of an ajax call/waste of time. You're posting the exact same data twice
$.ajax({
type: {most like put 'POST' here},
url: {action url},
data: {your form},
success: success_function(),
error: error_function()
});
I am a java/jquery novice and struggling with the following:
$(document).ready(function() {
//Prevent SUBMIT if Session setting = On (Ajax)
$('#formID').submit(function(e) {
var prevent = false;
$.ajax({
type: "POST",
url: "url/to/ajax_file.php",
cache: false,
success: function(res){
if(res == "On") { alert('Session is ON so submit should be prevented'); prevent = true; }
}
});
if (stop2) { e.preventDefault(); }
});
});
The session setting is returned ok, and the alert is presented. But I also want to prevented the form submit if the session setting returned = 'On'. This is not happening. There is obviously something I do not understand, any advice?
You can't do that because of the asynchronous nature of ajax requests, instead in the submit handler you need to directly prevent the default action then in the ajax handler you can submit the form programatically.
$(document).ready(function() {
//Prevent SUBMIT if Session setting = On (Ajax)
$('#formID').submit(function(e) {
e.preventDefault();
var form = this;
$.ajax({
type: "POST",
url: "url/to/ajax_file.php",
cache: false,
success: function(res) {
if (res == "On") {
alert('Session is ON so submit should be prevented');
} else {
form.submit();
}
}
});
});
});
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');
}
});
...
When I click on the submit button of my form I'm redirected because of the PHP on the page "Form sent". How to stay in the same page with jQuery validate form plugin please ?
PHP FILE
<?php
// [I HAVE CUT THE CODE]
if(mail($to, $subject, $message, $headers)){
echo "Form sent";
} else {
echo "Form not sent";
}
?>
JQUERY FILE
$("#form-contact").validate({
submitHandler: function(form) {
$('.btn-validate-group:visible').hide();
$('.message-success').fadeIn(1000);
form.submit();
}
});
HTML FILE
<form id="form-contact" action="php/traitement.php" method="post"></form>
UPDATE 1
submitHandler: function(form) {
$('.btn-validate-group:visible').hide();
$('.message-success').fadeIn(1000);
$.ajax({
type: "POST",
url: url,
data: data,
success: function(result){ console.log("success!", result);},
dataType: dataType
});
return false;
}
I'm always redirected on "Form sent" page. I know nothing about Ajax :-/
UPDATE 2
http://jsfiddle.net/Xroad/2pLS2/25/
jQuery .ajax() can be used to submit data to the server without a page refresh, but it's not exclusive to the jQuery Validate plugin.
However, here are your two options using the jQuery Validate plugin.
Standard form submit using the default action of the form element (as you've done)...
$("#form-contact").validate({
submitHandler: function(form) {
$('.btn-validate-group:visible').hide();
$('.message-success').fadeIn(1000);
form.submit(); // standard submit of the default form action
}
});
To stay on same page, use .ajax() in the submitHandler callback...
$("#form-contact").validate({
submitHandler: function(form) {
$('.btn-validate-group:visible').hide();
$('.message-success').fadeIn(1000);
$.ajax({ // submit form using ajax
// your ajax options here
});
return false; // block default form action
}
});
See the jQuery .ajax() documentation for the options.
This is your own jsFiddle, which shows everything is working. I cannot test the ajax but the form is not refreshing the page as you claim.
If I understand correctly what you want, one way would be to try to submit from jQuery. In the submitHandler have something like:
$.ajax({
type: "POST",
url: url,
data: data,
success: function(result){ console.log("success!", result);},
dataType: dataType
});
The tricky part would be to get all the information into the data object before calling this.
The success function would have the data from the server after posting.
More info: https://api.jquery.com/jQuery.post/
If you make it work without validate plugin and more organised validation process then I would like you to have a look my code:
jQuery(document).ready(function($) {
$('#MyForm').on('submit', function(){
var form = this;
if(validateForm(form)) {
var values = $(form).serialize();
$.ajax({
url: "test.php",
type: "post",
data: values ,
success: function (response) {
// you will get response from your php page (what you echo or print)
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
event.preventDefault(); //changed to allow the tag manager to notice that the form was submitted
}
else{
event.preventDefault();
return false;
}
});
// validate Form
function validateForm(form) {
valid = true;
$(form).find('input[type=text], input[type=email]').each(function(i, val){
if(validateField(val, true) == false) { valid = false; }
});
return valid;
}
// validate all form fields
function validateField(field, submit) {
var val = $(field).val();
if($(field).attr('aria-required') == 'true' && submit){
if(val == '') {
$(field).parent().removeClass('valid');
$(field).parent().addClass('error');
return false;
}else {
$(field).parent().removeClass('error');
$(field).parent().addClass('valid');
return true;
}
// you can more specific
if($(field).attr('type') == 'text') {
$(field).parent().addClass('error');
return false; }
else {
$(field).parent().removeClass('error');
$(field).parent().addClass('valid');
return true;
}
// you can more specific
if($(field).attr('type') == 'email') {
$(field).parent().addClass('error');
return false; }
else {
$(field).parent().removeClass('error');
$(field).parent().addClass('valid');
return true;
}
}
}
// Run validation before Submit the form
$('input[type=text], input[type=email]').on('change', function(){
if($(this).val() != ''){
$(this).parent().removeClass('error valid');
validateField(this, false);
}
});
});
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();
}