Jump to content

need help in PHP redirect after ajax form validation

doforumda

By doforumda
in PHP Coding Help

 Share

Recommended Posts

doforumda Advanced Member

doforumda

Posted
Posted

While trying to create a user friendly registration system i created an ajax validation works by sending the form data to register.php which in turn processes the data and displays an error above the form if anything is incorrect or missing.

 

However, the problem arises when i try to redirect the user to the next stage of registration. How can we do this?

my code is here

script.js

function sign() {
    $('#container').load('login.html');
}

function joinNow() {
    $('#container').load('register.html');
}

function register() {
    var url = 'register.php';
   
    var firstname = $('input#firstname').val();
    var lastname = $('input#lastname').val();
    var email = $('input#email').val();
    var password = $('input#password').val();
    var repeatpassword = $('input#repeatpassword').val();
    var sex = $('#sex').val();
    var day = $('#day').val();
    var month = $('#month').val();
    var year = $('#year').val();
   
    var queryString = 'firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&password=' + password + '&repeatpassword=' + repeatpassword + '&sex=' + sex + '&day=' + day + '&month=' + month + '&year=' +year;
                        //alert(queryString);
/*
    $.post(url,queryString,showRegister);
   
    function showRegister(d) {
        $('#error').html(d);
    }
*/   
   
    $.ajax(
    {
        type: 'POST',
        url: url,
        data: queryString,
        dataType: 'html',
        success: showRegister
    });
   
    function showRegister(d) {
        $('#error').html(d).fadeIn('slow');
    }

}

 

register.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lib/jquery-1.4.min(Production).js"></script>
<script src="js/jqueryscript.js" type="text/javascript"></script>
</head>

<body>
<div id="error"></div>
<div id="actionForm">
<p>Fill following form to Join us Now</p>
<form id="form1" name="form1" method="post" action="">
   <div>
    <label>First Name:</label>
      <input type="text" name="firstname" id="firstname" />
    </div>
     <div>
    <label>Last Name:</label>
      <input type="text" name="lastname" id="lastname" />
    </div>
    <div>
    <label>Your Email:</label>
      <input type="text" name="email" id="email" />
    </div>
    <div>
    <label>Password:</label>
      <input type="password" name="password" id="password" />
    </div>
    <div>
    <label>Repeat Password:</label>
      <input type="password" name="repeatpassword" id="repeatpassword" />
    </div>
    <div>
    <label>I am:</label>
      <select name="sex" id="sex">
        <option value="sex">Select Sex</option>
        <option value="m">Male</option>
        <option value="f">Female</option>
      </select>
    </div>
     <div>
    <label>Birthday:</label>
      <select name="month" id="month">
        <option>Month</option>
        <option value="jan">Jan</option>
        <option value="feb">Feb</option>
        <option value="mar">Mar</option>
        <option value="apr">Apr</option>
        <option value="may">May</option>
        <option value="jun">Jun</option>
        <option value="jul">Jul</option>
        <option value="aug">Aug</option>
        <option value="sep">Sep</option>
        <option value="oct">Oct</option>
        <option value="nov">Nov</option>
        <option value="dec">Dec</option>
      </select>
   
      <select name="day" id="day">
        <option>Day</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
      </select>
     
      <select name="year" id="year">
        <option selected="selected">Year</option>
        <option value="1900">1900</option>
        <option value="1901">1901</option>
        <option value="1980">1980</option>
        <option value="1987">1987</option>
        <option value="1995">1995</option>
        <option value="2000">2000</option>
      </select>
  </div>
  <div class="actions">
      <input type="button" name="submit" id="submit" value="Join Now" onclick="register()" />
   </div>
</form>
</div>
</body>
</html>

 

register.php

<?php

$firstname = strip_tags($_POST['firstname']);
$lastname = strip_tags($_POST['lastname']);
$email = strip_tags($_POST['email']);
$password = strip_tags($_POST['password']);
$repeatpassword = strip_tags($_POST['repeatpassword']);
$sex = strip_tags($_POST['sex']);
$month = strip_tags($_POST['month']);
$day = strip_tags($_POST['day']);
$year = strip_tags($_POST['year']);

$dob = date($year."-".$month."-".$day);
/*
echo $firstname.'<br>';
echo $lastname.'<br>';
echo $email.'<br>';
echo $password.'<br>';
echo $repeatpassword.'<br>';
echo $sex.'<br>';
echo $month.'<br>';
echo $day.'<br>';
echo $year.'<br>';
*/
if($firstname&&$lastname){
      if($email) {
         if (ereg("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email)) {
               
            $connect = mysql_connect("localhost","user","user");
               mysql_select_db("facebook");
               $emailcheck = mysql_query("SELECT email FROM users WHERE email='$email'");
               $count = mysql_num_rows($emailcheck);
               
               if($count == 0){
                  if($sex=='m'||$sex=='f') {
                     if($password&&$repeatpassword) {
                        if($password==$repeatpassword) {
                           if(strlen($password)<25 && strlen($password)>=6) {
                              $password = md5($password);
                              //echo $password;
                              $reg = mysql_query("INSERT INTO users VALUES ('','$email','$password')");
                              $_SESSION['email'] = $email;
                              echo "Welcome ".$firstname." ".$lastname.", You are now registered.";
                              //header("Location: /main.php");
                           }
                           else 
                              echo "Length of password must be between 6 and 25 characters.";
                        }
                        else 
                           echo "Password and Repeat password do not match!";
                     }
                     else 
                        echo "Please fill in password and repeat password fields!";
                  }
                  else 
                     echo "Pease select your gender!";
               }
               else 
                  echo "user with this email address already exist! Please choose another email.";
           }
           else 
              echo "Invalid email address!";   
      }
      else 
         echo "Please fill in your email address!";
   }
   else 
      echo "Please fill in firstname and lastname.";      
?>

Link to comment
Share on other sites
bbaker Newbie

bbaker

Posted
Posted

instead of using 'html' dataType, I'd use 'json' & change things around a little bit.

 

here's the code I'd use:

 

register.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lib/jquery-1.4.min(Production).js"></script>
<script src="js/jqueryscript.js" type="text/javascript"></script>
</head>

<body>
<div id="error"></div>
<div id="actionForm">
<p>Fill following form to Join us Now</p>
<form id="form1" name="form1" method="post" action="">
   <div>
    <label>First Name:</label>
      <input type="text" name="firstname" id="firstname" />
    </div>
     <div>
    <label>Last Name:</label>
      <input type="text" name="lastname" id="lastname" />
    </div>
    <div>
    <label>Your Email:</label>
      <input type="text" name="email" id="email" />
    </div>
    <div>
    <label>Password:</label>
      <input type="password" name="password" id="password" />
    </div>
    <div>
    <label>Repeat Password:</label>
      <input type="password" name="repeatpassword" id="repeatpassword" />
    </div>
    <div>
    <label>I am:</label>
      <select name="sex" id="sex">
        <option value="sex">Select Sex</option>
        <option value="m">Male</option>
        <option value="f">Female</option>
      </select>
    </div>
     <div>
    <label>Birthday:</label>
      <select name="month" id="month">
        <option>Month</option>
        <option value="jan">Jan</option>
        <option value="feb">Feb</option>
        <option value="mar">Mar</option>
        <option value="apr">Apr</option>
        <option value="may">May</option>
        <option value="jun">Jun</option>
        <option value="jul">Jul</option>
        <option value="aug">Aug</option>
        <option value="sep">Sep</option>
        <option value="oct">Oct</option>
        <option value="nov">Nov</option>
        <option value="dec">Dec</option>
      </select>

      <select name="day" id="day">
        <option>Day</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
      </select>

      <select name="year" id="year">
        <option selected="selected">Year</option>
        <option value="1900">1900</option>
        <option value="1901">1901</option>
        <option value="1980">1980</option>
        <option value="1987">1987</option>
        <option value="1995">1995</option>
        <option value="2000">2000</option>
      </select>
  </div>
  <div class="actions">
      <input type="button" value="Join Now" onclick="register()" />
   </div>
</form>
</div>
</body>
</html>

 

Notice....I removed the name & id attributes from the submit button.  I read somewhere a while back that there is an issue with using one of those with a javascript submit (which you'll see that I used in jqueryscript.js

 

register.php

<?php

$firstname = strip_tags($_POST['firstname']);
$lastname = strip_tags($_POST['lastname']);
$email = strip_tags($_POST['email']);
$password = strip_tags($_POST['password']);
$repeatpassword = strip_tags($_POST['repeatpassword']);
$sex = strip_tags($_POST['sex']);
$month = strip_tags($_POST['month']);
$day = strip_tags($_POST['day']);
$year = strip_tags($_POST['year']);

$dob = date($year."-".$month."-".$day);
/*
echo $firstname.'<br>';
echo $lastname.'<br>';
echo $email.'<br>';
echo $password.'<br>';
echo $repeatpassword.'<br>';
echo $sex.'<br>';
echo $month.'<br>';
echo $day.'<br>';
echo $year.'<br>';
*/
$error = 'yes';
if($firstname&&$lastname){
      if($email) {
         if (ereg("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email)) {

               $connect = mysql_connect("localhost","user","user");
               mysql_select_db("facebook");
               $emailcheck = mysql_query("SELECT email FROM users WHERE email='$email'");
               $count = mysql_num_rows($emailcheck);

               if($count == 0){
                  if($sex=='m'||$sex=='f') {
                     if($password&&$repeatpassword) {
                        if($password==$repeatpassword) {
                           if(strlen($password)<25 && strlen($password)>=6) {
                              $password = md5($password);
                              //echo $password;
                              $reg = mysql_query("INSERT INTO users VALUES ('','$email','$password')");
                              $_SESSION['email'] = $email;
                              $error = 'no';
                              $msg = "Welcome ".$firstname." ".$lastname.", You are now registered.";
                              //header("Location: /main.php");
                           }
                           else
                              $msg = "Length of password must be between 6 and 25 characters.";
                        }
                        else
                           $msg = "Password and Repeat password do not match!";
                     }
                     else
                        $msg = "Please fill in password and repeat password fields!";
                  }
                  else
                     $msg = "Pease select your gender!";
               }
               else
                  $msg = "user with this email address already exist! Please choose another email.";
           }
           else
              $msg = "Invalid email address!";
      }
      else
         $msg = "Please fill in your email address!";
   }
   else
      $msg = "Please fill in firstname and lastname.";

$JSON_response = '{';
$JSON_response .= '"error": "'.addslashes($error).'",';
$JSON_response .= '"fieldErrors": "'.$msg.'"';
$JSON_response .= '}';
echo $JSON_response;
?>

 

the line 

$msg = "Welcome ".$firstname." ".$lastname.", You are now registered.";

is not really needed.  Might handle this on the page you're submitting to. Though I didn't change the code here, it's difficult to understand where you're submitting to.  The code you have enters the email & password into a db, but doesn't store anything else....so I'm assuming the page that you intend to submit to will handle the rest.

 

You'll notice that instead of echoing the error message, I created a $msg variable to use later in the code.....

 

The $JSON_responce echos the JSON formatted response from the ajax submit.

 

 

jqueryscript.js

function sign() {
    $('#container').load('login.html');
}

function joinNow() {
    $('#container').load('register.html');
}

function register() {
    var url = 'register.php';
    var queryString = $('#form1').serialize();
    $.ajax(
    {
        type: 'POST',
        url: url,
        data: queryString,
        dataType: 'json',
        success: function(resultData){
		if(resultData.error=='no'){

                $('#error').fadeOut('slow');
			$('#form1').submit();
		}
		else {
			$('#error').html(resultData.fieldErrors).fadeIn('slow');
		}
	}
    });
}

 

serialize is your friend for submit forms with ajax.  You'll notice a lot less code here.  I changes the dataType to 'json' & added a function in the success setting.  If the "error" part of th JSON response == 'no', it submits the form (though there's no file set in the action attribute of your form).  Else, it shows the field Error.

 

Hope this helps

Link to comment
Share on other sites
doforumda Advanced Member

doforumda

Posted
  • Author
Posted

instead of using 'html' dataType, I'd use 'json' & change things around a little bit.

 

here's the code I'd use:

 

register.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lib/jquery-1.4.min(Production).js"></script>
<script src="js/jqueryscript.js" type="text/javascript"></script>
</head>

<body>
<div id="error"></div>
<div id="actionForm">
<p>Fill following form to Join us Now</p>
<form id="form1" name="form1" method="post" action="">
   <div>
    <label>First Name:</label>
      <input type="text" name="firstname" id="firstname" />
    </div>
     <div>
    <label>Last Name:</label>
      <input type="text" name="lastname" id="lastname" />
    </div>
    <div>
    <label>Your Email:</label>
      <input type="text" name="email" id="email" />
    </div>
    <div>
    <label>Password:</label>
      <input type="password" name="password" id="password" />
    </div>
    <div>
    <label>Repeat Password:</label>
      <input type="password" name="repeatpassword" id="repeatpassword" />
    </div>
    <div>
    <label>I am:</label>
      <select name="sex" id="sex">
        <option value="sex">Select Sex</option>
        <option value="m">Male</option>
        <option value="f">Female</option>
      </select>
    </div>
     <div>
    <label>Birthday:</label>
      <select name="month" id="month">
        <option>Month</option>
        <option value="jan">Jan</option>
        <option value="feb">Feb</option>
        <option value="mar">Mar</option>
        <option value="apr">Apr</option>
        <option value="may">May</option>
        <option value="jun">Jun</option>
        <option value="jul">Jul</option>
        <option value="aug">Aug</option>
        <option value="sep">Sep</option>
        <option value="oct">Oct</option>
        <option value="nov">Nov</option>
        <option value="dec">Dec</option>
      </select>

      <select name="day" id="day">
        <option>Day</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
      </select>

      <select name="year" id="year">
        <option selected="selected">Year</option>
        <option value="1900">1900</option>
        <option value="1901">1901</option>
        <option value="1980">1980</option>
        <option value="1987">1987</option>
        <option value="1995">1995</option>
        <option value="2000">2000</option>
      </select>
  </div>
  <div class="actions">
      <input type="button" value="Join Now" onclick="register()" />
   </div>
</form>
</div>
</body>
</html>

 

Notice....I removed the name & id attributes from the submit button.  I read somewhere a while back that there is an issue with using one of those with a javascript submit (which you'll see that I used in jqueryscript.js

 

register.php

<?php

$firstname = strip_tags($_POST['firstname']);
$lastname = strip_tags($_POST['lastname']);
$email = strip_tags($_POST['email']);
$password = strip_tags($_POST['password']);
$repeatpassword = strip_tags($_POST['repeatpassword']);
$sex = strip_tags($_POST['sex']);
$month = strip_tags($_POST['month']);
$day = strip_tags($_POST['day']);
$year = strip_tags($_POST['year']);

$dob = date($year."-".$month."-".$day);
/*
echo $firstname.'<br>';
echo $lastname.'<br>';
echo $email.'<br>';
echo $password.'<br>';
echo $repeatpassword.'<br>';
echo $sex.'<br>';
echo $month.'<br>';
echo $day.'<br>';
echo $year.'<br>';
*/
$error = 'yes';
if($firstname&&$lastname){
      if($email) {
         if (ereg("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email)) {

               $connect = mysql_connect("localhost","user","user");
               mysql_select_db("facebook");
               $emailcheck = mysql_query("SELECT email FROM users WHERE email='$email'");
               $count = mysql_num_rows($emailcheck);

               if($count == 0){
                  if($sex=='m'||$sex=='f') {
                     if($password&&$repeatpassword) {
                        if($password==$repeatpassword) {
                           if(strlen($password)<25 && strlen($password)>=6) {
                              $password = md5($password);
                              //echo $password;
                              $reg = mysql_query("INSERT INTO users VALUES ('','$email','$password')");
                              $_SESSION['email'] = $email;
                              $error = 'no';
                              $msg = "Welcome ".$firstname." ".$lastname.", You are now registered.";
                              //header("Location: /main.php");
                           }
                           else
                              $msg = "Length of password must be between 6 and 25 characters.";
                        }
                        else
                           $msg = "Password and Repeat password do not match!";
                     }
                     else
                        $msg = "Please fill in password and repeat password fields!";
                  }
                  else
                     $msg = "Pease select your gender!";
               }
               else
                  $msg = "user with this email address already exist! Please choose another email.";
           }
           else
              $msg = "Invalid email address!";
      }
      else
         $msg = "Please fill in your email address!";
   }
   else
      $msg = "Please fill in firstname and lastname.";

$JSON_response = '{';
$JSON_response .= '"error": "'.addslashes($error).'",';
$JSON_response .= '"fieldErrors": "'.$msg.'"';
$JSON_response .= '}';
echo $JSON_response;
?>

 

the line 

$msg = "Welcome ".$firstname." ".$lastname.", You are now registered.";

is not really needed.  Might handle this on the page you're submitting to. Though I didn't change the code here, it's difficult to understand where you're submitting to.  The code you have enters the email & password into a db, but doesn't store anything else....so I'm assuming the page that you intend to submit to will handle the rest.

 

You'll notice that instead of echoing the error message, I created a $msg variable to use later in the code.....

 

The $JSON_responce echos the JSON formatted response from the ajax submit.

 

 

jqueryscript.js

function sign() {
    $('#container').load('login.html');
}

function joinNow() {
    $('#container').load('register.html');
}

function register() {
    var url = 'register.php';
    var queryString = $('#form1').serialize();
    $.ajax(
    {
        type: 'POST',
        url: url,
        data: queryString,
        dataType: 'json',
        success: function(resultData){
		if(resultData.error=='no'){

                $('#error').fadeOut('slow');
			$('#form1').submit();
		}
		else {
			$('#error').html(resultData.fieldErrors).fadeIn('slow');
		}
	}
    });
}

 

serialize is your friend for submit forms with ajax.  You'll notice a lot less code here.  I changes the dataType to 'json' & added a function in the success setting.  If the "error" part of th JSON response == 'no', it submits the form (though there's no file set in the action attribute of your form).  Else, it shows the field Error.

 

Hope this helps

 

thanks bbaker your code is working. but where should i place that page to where i want to redirect. i want to redirect to main.php file which is in the same directly.

 

Link to comment
Share on other sites
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.

×
 Share
Go to topic listing
×
×
  • 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.