parser error in ajax php-login authentication in jquery mobile

Question

Here is my javascript and php code for loging in jquery mobile but i got parser error for this request. please help me with this.

<script>    

            $("#login").click( function () {

                //collect userName and password entered by users
                var username = $("#username").val();
                var password = $("#password").val();


                //call the authenticate function
                authenticate(username, password);
            });


        //authenticate function to make ajax call
           function authenticate(username, password) {
           $.ajax({url: "http://localhost/track/signinmobile.php",
           data: '{"username": "' + username + '", "password" : "' + password + '"}',

            dataType: "jsonp",
            jsonpCallback: 'successCallback',
            async: true,
            beforeSend: function() {
                $.mobile.showPageLoadingMsg(true);
            },
            complete: function() {
                $.mobile.hidePageLoadingMsg();
            },
            success: function (result) {
                alert(result);
            },
            error: function (request,error) {
                alert("this is"+ error);
            }, 
           successCallback:function(){

            }
        });

    </script>

    <div data-role="fieldcontain" class="ui-hide-label">
                                   <form id="login" >
                                    <label for="username">Username:</label>
                                    <input type="text" name="username" id="username" value="" placeholder="Username"/>
                                    <label for="password">Password:</label>
                                    <input type="password" name="password" id="password" value="" placeholder="Password"/>

                                    <input type="submit" name="login" id="login"  value="Login"/>
                                    </form>                               
                        </div>  

Is there any error in my javascript code? Here is my signinmobile.php and the data base connections are working.

<?php include"connection.php";

$email=$_GET['username'];
$password=$_GET['password'];
$user=mysql_query("SELECT * FROM users");
while($row=mysql_fetch_array($user))
{
    if (($email==$row['email']) && ($password==$row['password']))
    { 

    $response_array['status'] = 'success'; 

    }
    else {
   $response_array['status'] = 'error'; 
      }
}
header('Content-type: application/json');
echo json_encode($response_array);

?>

Answer 1

You are missing a } to close the authenticate function.

Besides that your form and the submit button have the same id. It is in general a bad idea to have two html tags with the same id and this means that your function is called after clicking on the form.

You should wrap your script inside a $(document).ready.

$(document).ready(function() {
    // your script.
});

This will prevent your script from running before the elements are loaded.

You should also prevent the form from submitting by ending the click function with a return false; statement. This prevents the page refresh.

And I don't have experience with jsonp but it generates an error for me. I would suggest using normal json but I don't know your other plans with the script.

Answer 2

The data you send to the server is a string, you should use a javascript object. This is done by removing the quotes and the plus signs.

data: { username: username, password: password },