7 replies to this topic

[andreea115]

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);
	 }

[jazzman1]

Could you post a result of the string:

// alert(dataStrings)

// console.log(dataStrings)

Edited by jazzman1, 11 December 2012 - 07:28 AM.

[andreea115]

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.

[jazzman1]

@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, 11 December 2012 - 11:28 AM.

[jazzman1]

EDIT: on the top of joint_reg_ajaxversion.php, put it this code and alert(data)

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

Edited by jazzman1, 11 December 2012 - 12:05 PM.

[andreea115]

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)

};




});

[jazzman1]

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, 12 December 2012 - 03:14 PM.

[P5system]

I have gone through the code. It is returning the values you need to display the value with return type variable name