Jump to content


Photo

My Ajax Values Are Not Being Returned

ajax post

  • Please log in to reply
7 replies to this topic

#1 andreea115

andreea115

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 11 December 2012 - 06:24 AM

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


#2 jazzman1

jazzman1

    Advanced Member

  • Gurus
  • 2,249 posts
  • LocationMississauga, Canada

Posted 11 December 2012 - 07:27 AM

Could you post a result of the string:

// alert(dataStrings)

// console.log(dataStrings)


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


#3 andreea115

andreea115

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 11 December 2012 - 10:53 AM

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.

#4 jazzman1

jazzman1

    Advanced Member

  • Gurus
  • 2,249 posts
  • LocationMississauga, Canada

Posted 11 December 2012 - 11:26 AM

@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.


#5 jazzman1

jazzman1

    Advanced Member

  • Gurus
  • 2,249 posts
  • LocationMississauga, Canada

Posted 11 December 2012 - 12:02 PM

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.


#6 andreea115

andreea115

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 12 December 2012 - 09:41 AM

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)

};




});




#7 jazzman1

jazzman1

    Advanced Member

  • Gurus
  • 2,249 posts
  • LocationMississauga, Canada

Posted 12 December 2012 - 03:10 PM

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.


#8 P5system

P5system

    Advanced Member

  • Members
  • PipPipPip
  • 34 posts
  • LocationUSA

Posted 06 February 2013 - 11:44 PM

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

If you like my reply please click on https://plus.google....w.p5systems.com to approve it.


Thanks,
P5 Systems
http://www.p5systems.com/





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com