passing variable back from php to jquery?

Question

I am trying to convert my login page to use html and use jquery and php to fetch and process the results, Reason is if i want to go mobile with my project then i am nearly there.

The problem i have is passing variables back from php to jquery to display at the same time.

my example index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Auth Demo 2</title>
    <script src="jquery/jquery-1.7.2.min.js"></script>
    <script src="main.js"></script>
</head>

<body onload="handleLogin()">

        <form id="loginForm">

            <label for="email">Email:</label>
            <input type="text" name="email" id="email" value="" placeholder="email" />



            <label for="password">Password:</label>
            <input type="password" name="password" id="password" value="" placeholder="Password" />


        <input type="submit" value="Login" id="submitButton">
        </form>

</body>
</html>

main.js

    function handleLogin(){

        var form = $("#loginForm");
        var u = $("#email", form).val();
        var p = $("#password", form).val();

        if(u!= '' && p!= '') {
             $.post("http://www.mysite.co.uk/login.php",{ 
                        email:$('#email', form).val(),
                        password:$('#password', form).val(),
                        rand:Math.random() 
                      } ,function(data)
                          {
                             if(data=='yes') //if correct login detail
                             {
                                 alert( "Request success: ");
                             }
                             else
                             {  
                                  //add reason in alert box here
                                  alert ("failed reason")
                              }
                   });
        } else {
                    alert( "Username/password empty");
               }
         return false;//not to post the  form physically

     }

login.php

<?//get the posted values
require_once("../backend/functions.php");
dbconn(true);


if ($_POST["email"] && $_POST["password"]) {
    $password = passhash($_POST["password"]);

    if (!empty($_POST["email"]) && !empty($_POST["password"])) {
        $res = SQL_Query_exec("SELECT id, password, secret, status, enabled FROM users WHERE email = " . sqlesc($_POST["email"]) . "");
        $row = mysql_fetch_assoc($res);

        if ( ! $row || $row["password"] != $password )
            $message = "Wrong password";
        elseif ($row["status"] == "pending")
            $message = "Account Pending";
        elseif ($row["enabled"] == "no")
            $message = "Account Suspened";
    } else
        $message = "No Username/password added";

    if (!$message){
        logincookie($row["id"], $row["password"], $row["secret"]);
        if (!empty($_POST["returnto"])) {
            header("Refresh: 0; url=" . $_POST["returnto"]);
            die();
        }
        else {
            echo  "yes";
            die();
        }
    }else{
        echo $message;
    }
}

logoutcookie();

As you can see when the login fails have various reasons i want to pass back to the alert box. Whats the best way to go about this

it took me exactly 2 mins to format your answer(with wierd fromatting) .... and damn!! and i still see some extra space.. :( — bipen
– bipen, Commented Mar 25, 2013 at 11:43

bipen · Accepted Answer · 2013-03-25 11:35:16Z

1

just alert data

  if(data=='yes') //if correct login detail
  {
      alert( "Request success: ");
  } 
  else{
        alert (data)
   }

however i recommmend to get the response as JSON.....

if(u!= '' && p!= '') {
     $.post("http://www.mysite.co.uk/login.php",{ 
               email:$('#email', form).val(),
               password:$('#password', form).val(),
               rand:Math.random() 
         } ,function(data)
             {
                if(data=='yes') //if correct login detail
                {
                    alert( "Request success: ");
                }
                else
                {                                                      //add reason in alert box here
                    alert (data)
                 }
           });

  } else {
         alert( "Username/password empty");
  }

     return false;//not to post the  form physically
  }

answered Mar 25, 2013 at 11:35

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Steven Kinnear Over a year ago

This does work thanks and i will look into json as you all have recommended it and im sure once i get a grasp of it. it will help me in the future ;)

bipen Over a year ago

welcome.. and have a look to JSON... it better to use that... :):)... happy coding.. :)

user1467267 · Accepted Answer · 2013-03-25 11:35:30Z

1

Try to use JSON;

JSON.stringify(your_object, null, 2);

Catch the POST in PHP with this to get an array back: http://www.php.net/manual/en/function.json-decode.php

$data = json_decode($_POST);

When PHP is done echo a encoded JSON string of your array data back: http://www.php.net/manual/en/function.json-encode.php

echo json_encode($return_data);

In jQuery, for testing do;

console.log(data);
console.log(data.yes);

answered Mar 25, 2013 at 11:35

user1467267

Comments

Brian Mayer · Accepted Answer · 2013-03-25 11:34:16Z

0

The best way to do this is to use $.ajax() and use the "XML" type. Then have login.php return a XML file with whatever parameters you need (user id, error message if any, username, etc). You can then parse the XML file with jQuery to use those variables immediately. It's more secure to handle errors on the backend anyway.

answered Mar 25, 2013 at 11:34

Brian Mayer

1,0193 gold badges14 silver badges23 bronze badges

Comments

rajkumar · Accepted Answer · 2013-03-25 12:18:42Z

0

function handleLogin(){

    var form = $("#loginForm");
    var u = $("#email", form).val();
    var p = $("#password", form).val();

    if(u!= '' && p!= '') {

        jQuery.ajax({
             type: "POST", 
             url: "http://www.mysite.co.uk/login.php", 
             data: 'username='+u+'&password='+p+'&rand='+Math.random(),
             complete: function(data){

                 if(data.responseText == 'yes'){
                    alert( "Request success: ");
                 }else{
                    alert( "failed: ");
                 }

         });

    } else {

        alert( "Username/password empty"); 

    }

     return false;//not to post the  form physically

 }

edited Mar 25, 2013 at 12:18

answered Mar 25, 2013 at 12:11

rajkumar

114 bronze badges

Collectives™ on Stack Overflow

passing variable back from php to jquery?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related