I want to display my echo text generated by php on to a seperate html page, for which i tried jquery and it didn't work. Please don't block this question, because i refered to all the previous posts related to this kind of problem, but nothing really worked for me.
Here is the code HTML
<form id="register-form" action="http://localhost/Exercises/media/index.php" method="post" role="form" >
<input type="text" name="fname" id="firstname" tabindex="1" class="form-control" placeholder="Firts name" value="">
<input type="text" name="lname" id="lname" tabindex="1" class="form-control" placeholder="Last name" value="">
<input type="text" name="username" id="username" tabindex="2" class="form-control" placeholder="Username">
<input type="text" name="dob" id="username" tabindex="2" class="form-control" placeholder="D-O-B">
<input type="text" name="location" id="location" tabindex="2" class="form-control" placeholder="Location">
<input type="text" name="email" id="email" tabindex="2" class="form-control" placeholder="Email">
<input type="text" name="email2" id="email2" tabindex="2" class="form-control" placeholder="Confirm Email">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
<input type="password" name="password2" id="password2" tabindex="2" class="form-control" placeholder="Re-Enter Password">
<input type="submit" name="reg" id="reg" tabindex="4" class="form-control btn btn-register" value="Register Now" style="background: #1AB188; border: 0px; border-radius: 3px;">
</form>
<div id = "test"> </div><!--where i expect my php echo data to be displayed-->
JS
function getpage(sign_up) {
$.ajax({
type: "POST",
dataType: "json",
url: "http://localhost/Exercises/media/index.php",
data: {page: sign_up},
success: function(data) {
$('#test').html(data.msg);
}
});
};
PHP
<?php
//json array to store echo messages foe ajax
$result = array(
'un_limit' => 'the maximum limit for username/firstname/lastname is 25 characters',
'pw_length' => 'Your Password must be between 8 and 30 characters long!',
'pw_match' => 'Your password do not match',
'all_fields' => 'Please fill in all the fields',
'em_alrdy' => 'E-mail already used!',
'un_alrdy' => 'Username already taken ...',
'em_match' => 'Your E-mails do not match!',
);
//Registration form
$fn = strip_tags(@$_POST['fname']);
$ln = strip_tags(@$_POST['lname']);
$un = strip_tags(@$_POST['username']);
$dob = date(@$_POST['dob']);
$loc = strip_tags(@$_POST['location']);
$em = strip_tags(@$_POST['email']);
$em2 = strip_tags(@$_POST['email2']);
$pswd = strip_tags(@$_POST['password']);
$pswd2 = strip_tags(@$_POST['password2']);
$d = date("Y-m-d"); //Year - Month - Day
if ($reg) {
if ($em == $em2) {
//Check the username already exists
$u_check = mysql_query(" SELECT username FROM users WHERE username='$un' ");
//Count the amount of rows where username = $un
$check = mysql_num_rows($u_check);
//Check whether the email is already registered to DB
$e_check = mysql_query ("SELECT email FROM users Where email='$em'");
//Count the number of rows returned
$email_check = mysql_num_rows ($e_check);
if ($check == 0) {
if ($email_check == 0) {
//Check all of the fields have been filled in
if ($fn && $ln && $un && $dob && $loc && $em && $em2 && $pswd && $pswd2) {
//Check the passwords match
if ($pswd == $pswd2) {
//Check the maximum length of username/first name/last name does not exceed 25 characters
if (strlen($un)>25||strlen($fn)>25||strlen($ln)>25) {
echo json_encode(array('msg'=>$result['un_limit']));
}
else
{
//Check the maximum length of the password does not exeed 25 characters and is not less than 8 characters
if (strlen($pswd)>30||strlen($pswd)<8) {
echo json_encode(array('msg'=>$result['pw_length']));
}
else
{
//Encrypt password and password 2 using md5 before sending to DB
$pswd = md5($pswd);
$pswd2 = md5($pswd2);
$query = mysql_query("INSERT INTO users VALUES ('','$un','$fn','$ln','$dob','$loc','$em','$pswd','$d','0','','','','','','no')");
die("<h2>Account successfully created</h2>Login to your World of Videos account ...");
}
}
}
else {
echo json_encode(array('msg'=>$result['pw_match']));
}
}
else
{
echo json_encode(array('msg'=>$result['all_fields']));
}
}
else
{
echo json_encode(array('msg'=>$result['em_alrdy']));
}
}
else
{
echo json_encode(array('msg'=>$result['un_alrdy']));
}
}
else {
echo json_encode(array('msg'=>$result['em_match']));
}
}
?>
I think jQuery is not able to match, because your div has a class of "test", but your jQuery selector is for "id" since you are using $("#test")
Try either changing: <div class="test"> into <div id="test"> in your html, or change the selector: $("#test") into $(".test")
When I put this code on my system it didn't work, so I have improved the Jquery so it listens for the form to be submitted before doing it. Bare in mine I am using the latest version of jquery(2.1.4).
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
New HTML:
<form id="register-form">
<input type="text" name="fname" id="firstname" tabindex="1" class="form-control" placeholder="Firts name" value="">
<input type="text" name="lname" id="lname" tabindex="1" class="form-control" placeholder="Last name" value="">
<input type="text" name="username" id="username" tabindex="2" class="form-control" placeholder="Username">
<input type="text" name="dob" id="username" tabindex="2" class="form-control" placeholder="D-O-B">
<input type="text" name="location" id="location" tabindex="2" class="form-control" placeholder="Location">
<input type="text" name="email" id="email" tabindex="2" class="form-control" placeholder="Email">
<input type="text" name="email2" id="email2" tabindex="2" class="form-control" placeholder="Confirm Email">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
<input type="password" name="password2" id="password2" tabindex="2" class="form-control" placeholder="Re-Enter Password">
<input type="submit" name="reg" id="reg" tabindex="4" class="form-control btn btn-register" value="Register Now" style="background: #1AB188; border: 0px; border-radius: 3px;">
</form>
New Javascript:
<script type="text/javascript">
$("#register-form").on('submit', function(e) {
e.preventDefault(); // Prevent page change
$.ajax({
type: "POST", // Request type
dataType: "json",
url: "http://localhost/Exercises/media/index.php",
data: $("#register-form").serialize(), // Get form data and organise it
success: function(data) {
$('#response').html(data.msg);
},
error: function(e) {
$('#response').html("Error sending form data");
}
});
});
</script>
Please Note:
The new javascript should go after the form and from looking at your PHP code you are storing the passwords in an insecure way, please watch this video as hashing passwords with md5 is massively insecure. Also you are still using mysql instead of the new mysqli functions in your php, which shouldn't really be used anymore as it has security issues.