I have a form which is validated through AJAX and the problem is that after the ajax gives response 1 it should submit the same form to the same page.
As I have used $('#bigform').submit() this does not allow me to submit the form to the PHP that resides on same page.
$(document).ready(function() {
$('#bigform').submit(function(event) {
var captcha_checks = $('#password_again').val();
$(this).validate();
if (!$(this).valid())
return false;
$.ajax({
type: 'post',
url: 'http://trigma.com/mobile-app-development/verify_captcha.php',
data: { captcha_checks: captcha_checks },
dataType: 'html',
success: function(data) {
if (data == 1) {
$('#bigform').submit();
}
if (data == 2) {
$('#captcha_error').text("Invalid Captcha! Please fill captcha carefully");
}
}
});
event.preventDefault();
});
});
You can add a Boolean variable like this:
$(document).ready(function() {
var first = true;
$('#bigform').submit(function(event) {
if(first){
var captcha_checks = $('#password_again').val();
$(this).validate();
if (!$(this).valid())
return false;
$.ajax({
type: 'post',
url: 'http://trigma.com/mobile-app-development/verify_captcha.php',
data: { captcha_checks: captcha_checks },
dataType: 'html',
success: function(data) {
if (data == 1) {
first = false;
$('#bigform').submit();
}
if (data == 2) {
$('#captcha_error').text("Invalid Captcha! Please fill captcha carefully");
}
}
});
}
else
{
$('#bigform').submit();
}
event.preventDefault();
});
});
This is an odd thing to do, but if you must use a separate function, like:
$(document).ready(function(){
function onSubmit(theElement){
var captcha_checks = $('#password_again').val();
theElement.validate();
if (!theElement.valid()) return false;
$.ajax({
type: 'post',
url: 'http://trigma.com/mobile-app-development/verify_captcha.php',
data: {captcha_checks:captcha_checks},
dataType: 'html',
success: function(data) {
if(data == 1){
onSubmit(theElement);
}
if(data == 2){
$('#captcha_error').text("Invalid Captcha! Please fill captcha carefully");
}
}
});
event.preventDefault();
}
$('#bigform').submit(function(event){
onSubmit($(this));
});
});
</script>
Why not set click event handler for the SUBMIT button instead?
$('#submit-btn').click(function(event){
event.preventDefault();
var form = $(this).closest('form');
$(form).validate();
if (!$(form).valid())
return false;
//...your AJAX call...
if(data == 1){
form.submit();
}
//...
});
Related
I would like to submit a form only after checking if some of the inputs are not already existing in the database.
I use beforeSend for checking if there are some fabrics to add, if so, I create a variable with all the fabrics name, and my php script "check_fabric.php" controls if the fabrics are not already in the database.
I would like to submit the form only if the fabrics name are new.
$("#addorder").validate({
submitHandler: function(form, event) {
event.preventDefault();
var form = $("#addorder");
var id_customer = $("#id_customer").val();
$.ajax({
type: 'POST',
dataType: 'html',
url: "process.php",
data: form.serialize()+"&id_customer="+id_customer,
beforeSend: function(xhr) {
$("#submit-btn").removeClass("effet add").addClass("sending").val('Adding....').attr('disabled',true);
var nbfabric = $("#nbfabric").val();
if(nbfabric>0) {
var arrayFabric = new Array();
for (var i=0;i<nbfabric;i++) {
arrayFabric.push($('input[name="fabric_'+i+'"]').val());
}
var jsonString = JSON.stringify(arrayFabric);
$.ajax({
type: "post",
url: "check_fabric.php",
data: {data : jsonString},
success: function (data) {
if (data === "ok") {
form.submit();
} else {
alert(data);//data lists all the fabrics name already existing in the database
$("#submit-btn").removeClass("sending").addClass("effet ajout").val('Ajouter').attr('disabled',false);
event.preventDefault();
return false;
}
}
});
}
},
success: function(data) {
form.fadeOut("normal", function(){
$("#return_message").html(data).fadeIn();
});
},
}
});
}
});
Any idea ?
Hi guys I would like to display an error message when the result is not found and A user should be able to enter the number with or without spaces.
$(document).ready(function () {
$("button").click(function () {
var account = $("#number").val();
if (account.length !== 10) {
$("p").text("number is not valid").css("color","red");
}
if (account != "") {
$.ajax({
url: "profile.php",
method: "POST",
data: {
number:account,
},
dataType: "JSON",
success: function(data) {
$("#name").text(data.name);
$("#phone").text(data.phone);
$("#email").text(data.email);
}
});
}
else {
$("p").text("Please Enter Phone Number");
}
})
})
You can use the error: to do something when there is an error or exception from the URL.
You can edit your code as follows:
$(document).ready(function () {
$("button").click(function () {
var account = $("#number").val();
if (account.length !== 10) {
$("p").text("number is not valid").css("color","red");
}
if (account != "") {
$.ajax({
url: "profile.php",
method: "POST",
data: {
number:account,
},
dataType: "JSON",
success: function(data) {
$("#name").text(data.name);
$("#phone").text(data.phone);
$("#email").text(data.email);
}
error: function(err) {
// do something or alert user
alert("Result is not found")
}
});
}
})
})
I have this function to open dialog box via ajax :
function gps(uid) {
$.ajax({
type: "POST",
url: "file.php",
data: {},
success: function (data) {
for(i=0;i<data.length;i++){
$('#gps').html("Data : "+data[i]['latitude']+"");
}
}
});
$('#gps').dialog('open');
return false;
}
How can i dynamically change the content of opened dialog box like every 1 second without closing the dialog box?
setInterval( function()
{
gps(uid);
},1000);
var loading_progress = false;
function gps(uid) {
//stop queue callbacks
if ( loading_progress ) return;
loading_progress = true;
$.ajax({
type: "POST",
url: "file.php",
data: "data="+uid,
async: false,
cache: false,
success: function (data,status) {
if( ( status == "success") {
var i;
for(i=0;i<data.length;i++){
$('#gps').html("Data : "+data[i]['latitude']+"");
loading_progress = false;
}
}
});
$('#gps').dialog('open');
}
I need to fetch records on the bases of search data and if search data is empty than load
another page as i used the ajax code as below
function search_alumni()
{
$data = $('#search_alumni').val();
if($data.value!='')
{
$this = $(this);
$.ajax(
{
url: 'include/search.php',
type: 'post',
data:{data:$data},
datatype: 'html',
async:true,
success: function(data){
$('table >tbody').append(data);
$result_row = $('table >tbody >tr').length;
// display no result found row
if($result_row == 0) { $('#no_found_result').css('display','');}
else { $('#no_found_result').css('display','none'); }
}
});
}else
{
$this = $(this);
$.ajax(
{
url: 'view/alumni/alumni.php',
datatype: 'html',
async:true,
beforeSend : function(){
// $('#ajax_loader').show();
$('#content').hide();
},
success: function(data){
// $('#ajax_loader').hide();
$box = $('#content');
$box.after(data);
$box.remove();
}
});
}
}
$(document).on('keyup','#search_alumni',$(this),search_alumni);
There is any way for two load pages in php and ajax based on if else condition.
when you use val() dont need use value.
...
$data = $('#search_alumni').val();
if($data!='')
...
I am trying to have my form validate before the ajax runs but can't seem to get the coding right for this to happen.
if i seperate them i can post using ajax with no validation or validation but it posts the default way
here is my current code i am trying
$(document).ready(function(){
// ajax code start
$('#form').on('submit', function (e){
e.preventDefault();
if (spry.widget.form.validate('#form') == true)
{
$.ajax({
type: "POST",
url: "localProxy.php",
data: $('#form').serialize(),
success: function (response) {
document.location = '/thank-you';
// do something!
},
error: function () {
alert('There was a problem!'); // handle error
}
});
};
});
});
figured it out
$(document).ready(function(){
// ajax code start
$('#form').on('submit', function (e){
e.preventDefault();
Spry.Widget.Form.onSubmit = function(e, form)
{
if (Spry.Widget.Form.validate(form) == false) {
return false;
}
{
$.ajax({
type: "POST",
url: "localProxy2.php",
data: $('#consult').serialize(),
success: function (response) {
document.location = '/thank-you';
// do something!
},
error: function () {
alert('There was a problem!'); // handle error
}
});
};
};
});
});