通过ajax进行表单验证

Question

I have form validation and insert query through ajax. It is running correctly. But If email exists then it should go on another page.

My index.php is:

<div id="wrap"> <!--wrap start-->
    <br />
    <h1>Check the Email if Already Exist</h1>
     <form action="" method="post" id="mainform">
    <table id="table_data">
        <tr>
            <td>First Name</td>
            <td><input name="fname" type="text" size="30"></td>
            <td><span class="fname_val validation"></span></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td><input name="lname" type="text" size="30"></td>
              <td><span class="lname_val validation"></span></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input name="email" type="text" size="30"></td>
            <td><span class="email_val validation"></span></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input name="register" type="button" value="Register"> <span class="loading"></span></td>
            <td></td>
        </tr>
    </table>
   </form>
 </div> <!--wrap end-->

script is:

 <script>
 jQuery(function($) {
var val_holder;
$("form input[name='register']").click(function() { // triggred click
    /************** form validation **************/
    val_holder      = 0;
    var fname       = jQuery.trim($("form input[name='fname']").val()); // first name field
    var lname       = jQuery.trim($("form input[name='lname']").val()); // last name field
    var email       = jQuery.trim($("form input[name='email']").val()); // email field
    var email_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; // reg ex email check

    if(val_holder == 1) {
        return false;
    }
    val_holder = 0;
    /************** form validation end **************/
    /************** start: email exist function and etc. **************/
    $("span.loading").html("<img src='images/ajax_fb_loader.gif'>");
    $("span.validation").html("");
    var datastring = 'fname='+ fname +'&lname='+ lname +'&email='+ email; // get data in the form manual
    //var datastring = $('form#mainform').serialize(); // or use serialize
    $.ajax({
                type: "POST", // type
                url: "check_email.php", // request file the 'check_email.php'
                data: datastring, // post the data
                success: function(responseText) { // get the response
                    if(responseText == 1) { // if the response is 1
                        $("span.email_val").html("<img src='images/invalid.png'> Email are already exist.");
                        $("span.loading").html("");
                    } else { // else blank response
                        if(responseText == "") {
                            $("span.loading").html("<img src='images/correct.png'> You are registred.");
                            $("span.validation").html("");
                            $("form input[type='text']").val(''); // optional: empty the field after registration
                        }
                    }
                } // end success
    }); // ajax end
    /************** end: email exist function and etc. **************/
}); // click end
}); // jquery end

</script>

check_email.php

<?php
require_once("database.php"); // require the db connection
/* catch the post data from ajax */
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
$query = mysql_query("SELECT `email` FROM `users` WHERE `email` = '$email'");
if(mysql_num_rows($query) == 1) { // if return 1, email exist.
echo '1';
} 
else { // else not, insert to the table
$query = mysql_query("INSERT INTO `users` (`first_name` ,`last_name` ,`email`) VALUES ('$fname', '$lname', '$email')");

echo "<script type='text/javascript'>window.location='payment.php'  </script>";                 

}
?>

At the check_email.php, if email not exist then page should go on payment.php. But it is still on same page and payment.php, there is some more query.

Answer 1

Use

window.location.href = 'payment.php'

to redirect your browser to another php file, or any file at that

Answer 2

I see you already use window.location.href = 'payment.php'"; in ajax response. So you have two choices :

Interpret this response ajax in your html like :

success: function(responseText) { // get the response
       if(responseText == "1") { // if the response is 1
             $("span.email_val").html("<img src='images/invalid.png'> Email are already exist.");
             $("span.loading").html("");
        } else { // else blank response
             $("span.loading").html(responseText);
         }
  } // end success

with (don't forget the href ) :

echo "<script type='text/javascript'>window.location.href = 'payment.php&email=" . $email;</script>";      

OR you can directly put the redirection in success function like :

success: function(responseText) { // get the response
       if(responseText == "1") { // if the response is 1
             $("span.email_val").html("<img src='images/invalid.png'> Email are already exist.");
             $("span.loading").html("");
        } else { // else blank response
             window.location.href = 'payment.php&email = ' + email;
        }
  } // end success

Moreover, be careful to SQL Injection.

Now, if i call your check_email.php with a POST parameter : email = foo'.'DROP DATABASE; , i am able to DROP all your database.

Check this link to prevent of sql injection : this is essential.

Answer 3

check_email.php is not returning blank response if e-mail not exits. It is returning <script type='text/javascript'>window.location='payment.php'</script> so you need to change if(responseText == "") to if(responseText == "<script type='text/javascript'>window.location='payment.php'</script>") or just simply remove if statement.

Other option is removing

echo "<script type='text/javascript'>window.location='payment.php'</script>";

and using

window.location.replace('payment.php')

in ajax call