Im trying to use if else statement in success ajax function, but the value always false and data inserted
I use jQuery v1.7.1, here my code
// Contact Submiting form
function Contact_form(form, options){
$.ajax({
url: 'contact.php',
data: $('#contactform').serialize(),
success: function(data){
if(data.check == '1'){ // if Ajax respone data.check =1 or Complete
$('.notifications').slideDown(function(){
setTimeout("$('.notifications').slideUp();",7000);
}); // Show notifications box
$('#contactform').get(0).reset(); // reset form
}
else if(data.check == '0'){
$('#preloader').fadeOut(400,function(){ $(this).remove(); });
alert("No complete");
return false;
}
},
cache: false,type: 'POST',dataType: 'json'
});
}
if else is bad in success function use
function Contact_form(form, options){
$.ajax({
url: 'contact.php',
data: $('#contactform').serialize(),
success: function(data){
$('.notifications').slideDown(function(){
setTimeout("$('.notifications').slideUp();",7000);
}); // Show notifications box
$('#contactform').get(0).reset(); // reset form
unloading(); // remove loading
},
error: function(data){
$('#preloader').fadeOut(400,function(){ $(this).remove(); });
alert("No complete");
return false;
},
cache: false,type: 'POST',dataType: 'json'
});
}
Can you try to use data.result in logic statement
Related
Hello guys I'm trying to input data using ajax to sql server
This is the ajax script use to input data
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#pengajuan').submit(function(){
$.ajax({
url: 'catcha.php',
type: 'POST',
data: $(this).serialize(),
success: function(data){
alert(data);
// catch data
$('[name=Seafarers]').val("");
$('[name=date]').val("");
$('.kontent').append('Success');
},
// jika gagal
error: function() {
alert("Failed");
}
});
return false;
});
});
</script>
Then I use display error.log(e); not displaying anything. Please help me
Here is the which is used to pass the from data with ajax to server
$('#pengajuan').submit(function(){
$.ajax({
url: "catcha.php",
type: 'POST',
data: $('form#formId').serialize(),
})
.done(function(data){
alert(data);
$('.kontent').append('Success');
})
.fail(function(){
alert("Failed");
});
return false;
});
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 9 years ago.
I'm wanting to use AJAX to determine whether or not a form's values are acceptable to me (this is not form validation). The AJAX result will determine if the form is submitted or not.
Below, you'll see that I perform an AJAX call when the form is submitted and depending what is returned (either blank which is acceptable, or an error message which is not acceptable), I'd like to return true; or return false; the $("form").submit.
I suspect my trouble to be in the AJAX's success:. Please help me get the result out of the AJAX call so that I can do something like if (result == "") { return true; } else { return false; }.
WORKING:
$("form").submit(function(e) {
e.preventDefault();
var form = this;
var tray = $('select[name=tray_id]').val();
$.ajax({
type: "POST",
url: "modules/reserve-check.php",
data: {tray_id: tray},
cache: false
}).done(function(result) {
if (result == "")
form.submit();
else
alert(result);
}).fail(function() {
alert('ERROR');
});
});
ORIGINAL:
$("form").submit(function() {
var tray = $('select[name=tray_id]').val();
$.ajax({
type: "POST",
url: "modules/reserve-check.php",
data: {tray_id: tray},
cache: false,
success: function(result) {
alert(result);
},
error: function(result) {
alert(result); //This works as expected (blank if acceptable and error msg if not acceptable)
}
});
/*
if (result == "")
return true;
else
return false;
*/
return false; //this is here for debugging, just to stop the form submission
});
As the ajax call is asynchronous, you have to prevent the form from submitting, and then when a result is returned, you check if it matches the condition and submit the form with the native submit handler, avoiding the preventDefault() in the jQuery event handler :
$("form").submit(function(e) {
e.preventDefault();
var self = this,
tray = $('select[name=tray_id]').val();
$.ajax({
type: "POST",
url: "modules/reserve-check.php",
data: {tray_id: tray},
cache: false
}).done(function(result) {
if (result == "") self.submit();
}).fail(function() {
alert('error');
});
});
use e.preventDefault(); to prevent the form from submitting, and then use this.submit() (isn't calling the jQuery .submit() trigger function, but rather the native <form> .submit() function) to submit the form.
$("form").submit(function(e) {
e.preventDefault();
var tray = $('select[name=tray_id]').val();
var form = this;
$.ajax({
type: "POST",
url: "modules/reserve-check.php",
data: {tray_id: tray},
cache: false,
complete : function(result){callback(result, form)}
});
});
var callback = function(result, form){
if(!result)
form.submit();
};
I am using ajax validation in URL field, I getting correct message (after a check from database), but still form is submitting
I want if I getting an invalid message then the form should not submit, how can I do this ?
<script>
$(document).ready(function(){
$("#Url").blur(function() {
var element = $(this).val();
$.ajax
({
url: "<?php echo site_url('Welcome/check_user_status'); ?>",
type: 'POST',
data: "url="+element,
success: function(data){
alert(data);
$('#emailInfo').html(data);
if(jQuery.trim(data) === "Emailvalid")
{
alert("Emailvalid");
}
else
{
alert("Email Invalid");
}
console.log(data);
}
});
});
// return false;
});
</script>
<form name="myForm" id="myForm">
<script>
$(document).ready(function(){
$("#Url").blur(function() {
var element = $(this).val();
$.ajax
({
url: "<?php echo site_url('Welcome/check_user_status'); ?>",
type: 'POST',
data: "url="+element,
success: function(data){
alert(data);
$('#emailInfo').html(data);
if(jQuery.trim(data) === "Emailvalid")
{
alert("Emailvalid");
}
else
{
alert("Email Invalid");
$("form").submit(function(e){
e.preventDefault();
});
}
console.log(data);
}
});
});
// return false;
});
</script>
Your tests are placed in the success callback, which is fired after the $.ajax() call has successfully POSTed data and received a response. No matter what you put in there, it is only ever going to happen after the form has been submitted.
If you are trying to do validation before your POST, you need to add that separately. Depending on what kind of validation you need, you could write your own simple tests, or use a plugin - jQuery Validation is a great option.
add this in your footer file
<script>
var burl="<?php echo base_url('') ?>";
var surl="<?php echo site_url('') ?>";
</script>
and then use this surl on ajax url...
like this
<script>
$(document).ready(function(){
$("#Url").blur(function(e) { // add e
e.preventDefault();// prevent other events
var element = $(this).val();
$.ajax
({
url: surl+"Welcome/check_user_status",
type: 'POST',
data: {"url":element}, // check the change
success: function(data){
if($.trim(data) === "Emailvalid"){ // instead of jQuery use $
alert("Emailvalid");
$('#emailInfo').html(data); // put here
}else{ // remove the space between if and else
alert("Email Invalid");
return false; // add here
}
console.log(data);
}
});
});
});
</script>
I have the following script
$('a[name=deleteButton]').on('click', function () {
arr=[];
var arr = $("input[name='post[]']:checked").map(function() {
return this.value;
}).get();
var content = $(this).parents('tr').find('.key').html();
$(this).parents('tr').fadeOut('slow', function() {$(this).remove();}); //THIS IS THE ONE WHICH FADES THE ROW
makeAjaxCall(content);
return false;
});
function makeAjaxCall(content){
$.ajax({
type: "post",
url: "http://localhost/partner/app/deleteRowUsingApiKey/delete",
cache: false,
data: {id : content},
success: function(data){
// alert(data);
//BUT IM NOT ABLE TO USE IT HERE,IN THE SUCCESS
},
error: function(td){
}
});
}
I have a line $(this).parents('tr').fadeOut('slow', function() {$(this).remove();});
which removes the div.But Im not able to use it inside the success of the ajax.Can anyone tell me why.
Try,
pass the $(this) reference while calling the function,
makeAjaxCall(content,$(this));
receive it like,
function makeAjaxCall(content, _this) {
and in the success call back,
success: function(data){
_this.parents('tr').fadeOut('slow', function() {$(this).remove();});
}
I want to display a loading message while retrieving results via AJAX, but I can't. Can anybody help please?
<script type="text/javascript">
$(function() {
$(".search_button").click(function() {
// getting the value that user typed
var searchString = $("#search_box").val();
// forming the queryString
var data = 'search='+ searchString;
// if searchString is not empty
if(searchString) {
// ajax call
$.ajax({
type: "POST",
url: "do_search.php",
data: data,
beforeSend: function(html) { // this happens before actual call
$("#results").html('');
$("#search_result_box").show();
$("#searchresults").show();
$(".word").html(searchString);
},
success: function(html){ // this happens after we get results
$("#results").show();
$("#results").append(html);
}
});
}
return false;
});
});
</script>
I would change the message before firing the AJAX request. So, on click or on submit:
<script>
$('form').on('submit', function(e) {
e.preventDefault();
$('#response').html('<p>Loading…</p>');
$.post($(this).attr('action'), $(this).serialize(), function(response) {
// do something here with the response
$('#response').html('<p>Request successful.</p>');
});
});
</script>
Why not using beforeSend and success methods to show/hide a loading message
beforeSend: function(html) { // this happens before actual call
// DO SOMEHTING HERE TO SHOW YOUR LOADING MESSAGE AS $('#loading').show();
$("#results").html('');
$("#search_result_box").show();
$("#searchresults").show();
$(".word").html(searchString);
},
success: function(html){ // this happens after we get results
// DO SOMEHTING HERE TO HIDE YOUR LOADING MESSAGE AS $('#loading').hide();
$("#results").show();
$("#results").append(html);
}
rgds