0

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']));
}   
}
?>
Shrey
  • 23
  • 3
  • 9

2 Answers2

0

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")

sal
  • 3,515
  • 1
  • 10
  • 21
  • i changed it to id and tried, but it still is directing me to my php page and echoing the text – Shrey Jan 09 '16 at 03:19
  • Then you might have to catch and prevent the default behavior of click on the form. Try `e.preventDefault()` in your click event. Check this other post: http://stackoverflow.com/questions/10092580/stop-form-from-submitting-using-jquery – sal Jan 09 '16 at 03:23
  • Please try to `echo` at server side. `$.post` reaches to php code? – Parth Trivedi Jan 09 '16 at 03:34
  • it is echoing perfectly on my php page, but i want that to get directed to my html page, – Shrey Jan 09 '16 at 03:37
0

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.

Undersc0re
  • 302
  • 2
  • 7
  • Thank you, the video is helpful. Coming to the JS part it is showing me the error message which is given in JS i.e"error sending from data", but what i need is to print the echo statements given in my php script in the "#test" div of my html when a user does not fill the form as per php conditions designed, i.e for example username does not exist etc,. – Shrey Jan 10 '16 at 06:12
  • Yeah I get what you mean, I have a feeling it is to do with you having the link as "http://", why don't you try removing the "http://localhost" and do the actual path to the php script such as "/media/index.php" – Undersc0re Jan 10 '16 at 06:15
  • my php and html are not in the same folders – Shrey Jan 10 '16 at 06:20
  • So long as they are both on the same server you can link them. So if one was "localhost/media/index.php" then the other one in directory "localhost/html/index.html" would link like "../media/index.php" there is no need to type "localhost/media/index.php" as that can cause problems for other users/browsers – Undersc0re Jan 10 '16 at 06:24
  • Yes, they are in the same folders how you expected. I have a question, in the near feature i want to bundle the html part as a .apk file using phone gap, as phone gap don't allow php, if i upload only the html files to phonegap build , is it going to work the same way ? – Shrey Jan 10 '16 at 06:32
  • Well if you were to use phonegap(I have experience with it) then you would have the HTML make AJAX calls to the server which would have the PHP, the reason they don't allow PHP is because PHP is a server-side language and HTML is client side and so having PHP on the users device would be _pretty much_ useless. – Undersc0re Jan 10 '16 at 06:36
  • i know, that is reason im trying to rebuild everything in html and ajax now, and that is the reason i want my php echo messages to be directed to my html page – Shrey Jan 10 '16 at 06:39
  • Yeah that makes sense, good luck, I'd recommend reading the documentation it's really useful (http://api.jquery.com/jquery.ajax/) – Undersc0re Jan 10 '16 at 06:48