Im trying to create my register page that posting the data to PHP File using Ajax and then the PHP file Check the Error of the form and return some error
My Form
<head>
<script type="text/javascript" src="assets/extra/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var fname=$('#firstname').val();
var lname=$('#lastname').val();
var displayname=$('#displayname').val();
var password=$('#password').val();
var cpassword=$('#cpassword').val();
var email=$('#email').val();
var terms=$('#terms').val();
$.ajax({
type: "POST",
url: "register.php",
data: "firstname="+fname+"&lastname="+lname+"&displayname="+displayname+"&password="+password+"&cpassword="+cpassword+"&email="+email+"&term="+terms ,
success: function(html){
$("#load").css('display','block');
$("#signupform").css('display','none');
$("#box").css('display','none');
$("#loading").fadeOut('500', function(){
$("#loading").css('display','none');
$("#box").html(html).show('slow');
});
}
});
return false;
});
});
</script>
</head>
<style type="text/css">
#loading
{
display:none;
width:500px;
height:500px;
background:url(img/loading.gif) no-repeat;
}
</style>
</head>
<div id="loading" style="">
</div>
<div id="box">
</div>
<div class="form-group">
<label for="firstname" class="col-md-3 control-label">Fistname</label>
<div class="col-md-9">
<input type="text" name="firstname" id="firstname" class="form-control inp" placeholder="Fistname" minlength="3" maxlength="50" value="" required>
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-md-3 control-label">Lastname</label>
<div class="col-md-9">
<input type="text" name="lastname" id="lastname" class="form-control inp" placeholder="Lastname" minlength="3" maxlength="50" value="" required>
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-md-3 control-label">Displayname</label>
<div class="col-md-9">
<input type="text" name="displayname" id="displayname" class="form-control inp" placeholder="Displayname" minlength="3" maxlength="50" value="" required>
</div>
</div>
<div class="form-group">
<label for="email" class="col-md-3 control-label">Email</label>
<div class="col-md-9">
<input type="email" name="email" id="email" class="form-control inp" value="" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<input type="password" name="password" id="password" class="form-control inp" value="" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-3 control-label">Confirm Password</label>
<div class="col-md-9">
<input type="password" name="cpassword" id="cpassword" class="form-control inp" value="" placeholder="Confirm Password" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<label><input type="checkbox" name="terms" id="terms" value="yes" checked> Accept<a href="#" target="_blank"> Term</a></label><div id="err_terms" class="err"></div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<button id="btn-signup" type="submit" class="btn btn-info signup-bt" id="submit" name="submit">   <i class="fa fa-user-plus"></i> Register</button>
</div>
</div>
</form>
And Here it's My PHP
if(isset($_POST['fistname']) && isset($_POST['lastname']) && isset($_POST['email']) && isset($_POST['displayname'])) {
$fname = mysql_real_escape_string($_POST['firstname']);
$lname = mysql_real_escape_string($_POST['lastname']);
$email = mysql_real_escape_string($_POST['email']);
$password = mysql_real_escape_string($_POST['password']);
$cpassword = mysql_real_escape_string($_POST['cpassword']);
$displayname = mysql_real_escape_string($_POST['displayname']);
$checkemail = mysql_query("SELECT `email` FROM `users` WHERE email='$email'");
$checkname = mysql_query("SELECT `displayname` FROM `users` WHERE displayname='$displayname'");
if(mysql_num_rows($checkemail) != 0){
echo '<span class="message error">Something</span>';
}
if(mysql_num_rows($checkname) != 0){
echo '<span class="message error">Something</span>';
}
if($terms!="yes"){
echo '<span class="message error">Something</span>';
}
if($password!=$cpassword){
echo '<span class="message error">Something</span>';
}
if($displayname==""){
echo '<span class="message error">Something</span>';
}
if($password==""){
echo '<span class="message error">Something</span>';
}
if(!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email)){
echo '<span class="message error">Something</span>';
}
if($terms != "yes"){
echo '<span class="message error">Something</span>';
}
else{
// QUERY
}
}
When I click Submit, And I try to check HTTP Header, It's doesnt send data to register.php So.. How can I fix it? Thank you
The browser is, for lack of better description, "confused" change your button type from submit to button so it wont' try to submit:
<button id="btn-signup" type="button" class="btn btn-info signup-bt" id="submit" name="submit">   <i class="fa fa-user-plus"></i> Register</button>
You should be passing an object and not a string for post ajax:
$.ajax({
type: "POST",
url: "register.php",
data: {
"firstname": fname,
"lastname": lname,
"displayname": displayname,
"password": password,
"cpassword": cpassword,
"email": email,
"term": terms
},
success: function(html){ /* you success function here*/
});
You have a typo here:
if(isset($_POST['fistname']) && ...
Should be 'firstname'.