Submitting form via Ajax and PHP

Dev Shed Forums Sponsor:

October 17th, 2012, 02:51 AM

koy88

Registered User

Join Date: Oct 2012

Posts: 1

Time spent in forums: 3 m 24 sec
Reputation Power: 0

jQuery - Submitting form via Ajax and PHP

Hello,

I'm trying to accomplish the following:

1. Show login form in a jQuery lightbox
2. Use Ajax to send request to PHP script to check if user exists in database -- I'll only need to check for user's email address
3. If user exists show welcome message then redirect to the welcome page
4. If user doesn't exist then show registration form in the same lightbox
5. Again use Ajax/PHP to collect user registration data and save data to mySQL database, display thanks for registering message then redirect to welcome page

----

First, here's my php code to connect to database and do a mySQL select of the email field.

PHP Code:


		
			
//connect to db

$db = mysql_connect("localhost", "dbuser", "dbpw"); 

  if(!$db) { 

  echo mysql_error();

}

$select_db = mysql_select_db("dbname"); 

  if(!$select_db) { 

  echo mysql_error(); 

}



//get post data from ajax

$email = mysql_real_escape_string((string)$_POST['email']);



$query = mysql_query("SELECT `email` FROM `tblname` WHERE `email` = '$email' LIMIT 1");

$rows = mysql_num_rows($query);



if($rows  <= 0){

     // user doesn't exist show registration form

    // then insert user inputted data into database

   //$query = mysql_query("INSERT INTO `tblname` (`fname` ,`lname` ,`email`) VALUES ('$fname', '$lname', '$email')");



}else{

    // at least one row has been found

    header("Location: welcome.html");

    exit;

}

Here's the AJAX:

Code:


var datastring = '&email='+ email;

$.ajax({
	type: "POST", 
	url: "login.php",
	data: datastring, 
	success: function(responseText) {
	if(responseText == 1) { 
		//email exists in db
               //display welcome message then redirect to welcome page				
	} 
       error: function(responseText) {
	if(responseText == 0) { 
		//email doesn't exist in db so show registration form						
	} 
} 
});

What's working so far:
- Email validation
- Redirects user to the welcome page if email exists in database

Where I'm lost:

- Need to show login success message before redirecting to welcome page
- Need to display registration form if email doesn't exist in database then show thanks for registering message then redirect to welcome page

I would like to display both login and registration forms inside a jQuery lightbox. I would imagine the need for AJAX callbacks but I'm not sure.

Please can anyone help? Thank you.

October 18th, 2012, 07:06 AM

leonvv

Registered User

Join Date: Jul 2012

Posts: 24

Time spent in forums: 3 h 47 m 48 sec
Reputation Power: 0

You're on the right track.
Some tips:

- In the 'else' statement of your PHP code you're redirecting to another page. While in the JavaScript part you expect the PHP code to return 1. So try to empty the 'else' statement and put a command that returns 1 instead.
( This also applies to the if statement returning 0 )

PHP Code:


		
			
else { echo 1;}

- Try to alert the responseText once. So you know what the AJAX returns if the email exist and when not.

- You might want to save the data so you don't have to ask on each page for the login data. Google for 'PHP sessions' ( If you have questions about this feel free to ask. )

- To display a success message you will need to change an elements display with JavaScript ( when the PHP returns 1 ).
And after that redirect to the welcome page.
This is all very easy to do with JavaScript.

Léon

jQuery - Submitting form via Ajax and PHP

Developer Shed Advertisers and Affiliates