Jump to content

My Ajax Values Are Not Being Returned


andreea115

Recommended Posts

hi everyone

 

i am still fairly new to AJAX and am not clear how to get values to return from the sucess of my AJAX POST.

 

i have enclosed my function below. it works. however the callback is not returning the values and i am not sure why.

 

i would appriciate any adivice on this.

 

 

 

 

$(".buttona").click(function(e) {

e.preventDefault();
// validate and process form
// first hide any error messages
$('.error').hide();
//get the values from teh field
var valid = '';
 var required = ' is required.';
var name = $("form input#name_sec").val();
var email = $('form input#email_reg').val();
var cat = $('form #cat option:selected').val();
var location = $('form #country_loc option:selected').val();
var honeypot = $('form input#honeypot').val();
var humancheck = $('form input#humancheck').val();

// perform error checking
if (name == '' || name.length <= 1 || name == 'name*' ) {
valid = '<p>Your name' + required +'</p>';
}
if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
valid += '<p>Your email' + required +'</p>';
}
if (cat == '' || cat.length < 1) {
valid += '<p>Please tell us whether you are; seeking work or looking for a careworker' + required + '</p>';
}
if (location == '' || location.length < 1) {
valid += '<p>Please tell us your current location' + required + '</p>';
}
if (honeypot != 'http://') {
valid += '<p>System error, unable to register you at this moment. </p>';
}
if (humancheck != '') {
valid += '<p>ystem error, unable to register you at this moment </p>';
}
// let the user know if there are erros with the form
if (valid != '') {
e.preventDefault();
$('form #response').removeClass().addClass('error')
.html('<strong>Please correct the errors below.</strong>' +valid).fadeIn('fast')
}
else
{//start else cluase for where the form validates
$('.homepage_reg_form').removeClass().addClass('processing').html('Processing...').fadeIn('fast');
// alert(name); alert(email); alert(cat); alert(location); alert(honeypot); alert(humancheck);

var dataStrings = 'name=' + name + '&email=' + email + '&cat=' + cat + '&country_loc=' + location + '&honeypot=' + honeypot + '&humancheck=' + humancheck ;
// alert(dataString)
$.ajax({
 type: "POST",
 url: "cms/views/jobs/joint_reg_ajaxversion.php",
 data: dataStrings,
 success: function(data) {
 $('.processing').removeClass().html("<div id='message'></div>").fadeIn('slow');
 $('#message').html("<h2>The Registration Form Has Been Submitted!</h2>")
 .append("<p>An email has been sent to you. To activate your membership, kindly click the link in the email.</p>")
	 .append("<img id='checkmark' src='images/check.png' />")

 .fadeIn(1500, function() {
	 $('#message').html(data.msg);
 });

// .append("<img id='checkmark' src='images/check.png' />")


 }
 });

}//end "else clause" for where the form validates and is sent to database
//the return false below prevents the browser from sending the form via normal methods
return false;
});
//END THE FUNCTION FOR THE SUBMISSION OF "QUICK REGISTRATION" VIA AJAX

 

 

Below is the code for the receiviing page.

 

 


if (!empty($error_message)) {
$return['error'] = true;
$return['msg'] = "<h3>Oops! The form was not not filled out correctly.</h3>".$error_message;
echo json_encode($return);
} else {

$return['error'] = false;
$return['msg'] = "<p>Thanks for registering " .$name .".</p>";
$form_completedcorrectly ='its correct';
echo json_encode($return);
 }

Link to comment
Share on other sites

Hi Jazzman1

 

this is the code for alert(dataStrings)

 

name=testajax&email=testajax@yahoo.com&cat=E&country_loc=3&honeypot=http://&humancheck=

 

However when i tried to use: console.log(dataStrings); it did not produce any result. nothing occurred.

 

Please note that the data actually submits correclty to the database . However, i am trying to get data back from the subbmitted page. i.e success or failure of the ajax post. i am not able to get the post back and i am unclear why it is not returning the data.

Link to comment
Share on other sites

@Andreea115, the basic structure of a post() function is: $.post(url, data, callback).

Just make a simple test for me:

Replace yours $.ajax() method with next code and tell me what results you get:

 


data = {

name: "testajax",
email: "testajax@yahoo.com",
cat: "E",
country_log: 3,
honypot: "http://example.com",
humancheck: "true"
}

function processResponse(data, status) {
if(status=='success') {
alert(true)
} else {
alert(false)
}

$.post('cms/views/jobs/joint_reg_ajaxversion.php', data, processResponse)

 

PS. console is a tool from firebug, have you ever heard about firebug?

Edited by jazzman1
Link to comment
Share on other sites

Hi jazzman1

 

sorry for the delay in getting back to you, i was trying to get the code, u sent me, to work. i tried the code below but got no responce from the server. the data did enter into the database.

 

i will now try the new thing you just gave me and get straight back here.

 

 

 

$(".buttona").click(function(e) {

 

e.preventDefault();

// validate and process form

// first hide any error messages

$('.error').hide();

//get the values from teh field

 

var name = $("form input#name_sec").val();

var email = $('form input#email_reg').val();

var cat = $('form #cat option:selected').val();

var location = $('form #country_loc option:selected').val();

var honeypot = $('form input#honeypot').val();

var humancheck = $('form input#humancheck').val();

 

// alert(name); alert(email); alert(cat); alert(location); alert(honeypot); alert(humancheck);

 

var dataStrings = 'name=' + name + '&email=' + email + '&cat=' + cat + '&country_loc=' + location + '&honeypot=' + honeypot + '&humancheck=' + humancheck ;

 

//alert(dataStrings);

 

 

 

data = {

 

name: "testajax",

email: "testajax@yahoo.com",

cat: "E",

country_log: 3,

honypot: "http://example.com",

humancheck: "true"

}

 

function processResponse(data, status) {

if(status=='success') {

alert(true)

} else {

alert(false)

}

 

$.post('cms/views/jobs/joint_reg_ajaxversion.php', data, processResponse)

 

};

 

 

 

 

});

 

 

Link to comment
Share on other sites

Hi Andreea115,

 

when you send a post data to the server I recommend you to use a object litteral like this: data {}

 

Take a look at this for a minute, how you to make a very simple test in ajax:

 

Create two new files, named - index.php and debug.php, to be located in the same directory (folder)

 

In an index.php file copy/paste this code:

 


<script type="text/javascript" src="// link to jquery "></script>

<script type="text/javascript">

var name = 'testajax';

var email = 'jazzman@jazzman.com';

var url = 'debug.php';

data = {

 name: name,
 email: email

}

function processResponse(data, status) {
 if(status == 'success') {
	 // alert(true)
	 // console.log(data);
 } else {
	 alert (false)
 }
}
$.post(url, data,processResponse);
</script>

 

In the debug.php, just create an array contains a post data comming from $.post() function.

 


<?php

echo '<pre>'.print_r($_POST, 1).'</pre>';

 

If you install firebug in firefox(recommend you) and open a console, you can see this result:

 

<pre>Array
(
[name] => testajax
[email] => jazzman@jazzman.com
)
</pre>

 

That means that the data has been successfully sent to the server and returned back to the client (browser).

 

In the processResponse function you can apply styling to the output.

 

This is a very basic principle how ajax works - nothing special.

Edited by jazzman1
Link to comment
Share on other sites

  • 1 month later...
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.