-1

what is the wrong with my PHP/AJAX/jQuery login script?

I have this code:

dologin.php file is:

<?php

$is_ajax = $_REQUEST['is_ajax'];
if(isset($is_ajax) && $is_ajax) {

    $username = $_REQUEST['username'];
    $password = $_REQUEST['password'];

    if($username == 'demo' && $password == 'demo') {
        echo "success";
    }
}
?>

index.php file is:

<html>
<head>
<script type= "text/javascript" scr= "jquery.latest.min.js" ></script>
<script type="text/javascript">

        $(documnt).ready(function) {

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

        var action = $("#form1").attr("action");
        var form_data = {
         username: $("#username").val(),
         password: $("#password").val(),
         is_ajax: 1         
    };

    $.ajax({
       type: 'POST',
       url: action,
       data: form_data, 
       success: function(response)
        {
            if(response == 'success')
            {
                $("form1").slideUp('slow', function() {
                $("#message").html('<p class="success"> You have logged in. </p>');
              });
              }
               else 
               $("#message").html('<p class="error"> Invalid username and/or password. </p>');
                }

    });
    return false;
 });
 });
</script>
</head>
<body>
<p>&nbsp;</p>    
<div id="content"> 
 <h1>Login form</h1>   

    <form name="form1" id="form1"  method="post" action="dologin.php">
        <p>
            <label for="username"> Username:</label>
            <input type="text" id="username" name="usernmae" />
        </p>
        <p>
             <label for="password">Password:</label>
            <input type="text" id="password" name="password" /> 
        </p>
        <p>
            <input type="submit" id="login" name="login" value="Login" />
        </p>
    </form>

 </div>
</body>
</html>

It keep giving me this error message:

Notice: Undefined index: is_ajax in C:\wamp\www\final project\passnumber\dologin.php on line 3

I'm new at AJAX and jQuery, please would you help me?

MRAN
  • 127
  • 2
  • 12

6 Answers6

3

The index is_ajax does not exist in the array $_REQUEST.

You should verify it this way:

if (isset($_REQUEST['is_ajax']) 
{
    #Do something. For instance:
    $myVar = $_REQUEST['is_ajax'];
}
else
{
    return "Something went wrong";
}

You also have a syntax error in your JavaScript object.

form_data - {...} should be form_data = {...}

Jeff Noel
  • 7,500
  • 4
  • 40
  • 66
1

Your logic is wrong, you are setting a variable and getting a warning and after that you are using isset to check if the variable you just set, is set.

You should change:

$is_ajax = $_REQUEST['is_ajax'];
if(isset($is_ajax) && $is_ajax) {

to something like:

$is_ajax = isset($_REQUEST['is_ajax']) && $_REQUEST['is_ajax'];
if($is_ajax) {

And you have typo in your javascript, an - that should be an =.

Edit: You should double-check all your javascript, as the first line should read:

$(document).ready(function() {

instead of:

$(documnt).ready(function) {
jeroen
  • 91,079
  • 21
  • 114
  • 132
  • I've used your code, the error has been gone, but nothing happened or showed at all..! – MRAN Jun 06 '13 at 15:56
  • It gave me: array (size=3) 'usernmae' => string 'demo' (length=4) 'password' => string 'demo' (length=4) 'login' => string 'Login' (length=5) – MRAN Jun 06 '13 at 16:03
  • @MRAN You should check your javascript for errors and typos as it seems it is not running and you are submitting your form the normal way (without ajax). Note for example the first line, it should be `$(document).ready(function() {`. – jeroen Jun 06 '13 at 17:02
0

You have nothing submitted with the name is_ajax, so it is an undefined index in your code.

Naftali
  • 144,921
  • 39
  • 244
  • 303
0

To check if it's an ajax request, try this:

function isAjax() {
    return !empty($_SERVER['HTTP_X_REQUESTED_WITH'])
    && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}

Anyway, if you are not sure if a key in array exists, do isset() before you assign it to any variable.

ioan
  • 751
  • 1
  • 9
  • 26
0

Its easier to show you the difference so just try this instead of your jQuery:

$(function() {
    var action = '';
    var form_data = '';
    $('#login').click(function () {
         action = $("#form1").attr("action");
         form_data = {
         username: $("#username").val(),
         password: $("#password").val(),
         is_ajax: '1'};  

        $.ajax({
            type: 'POST',
            url: action,
            data: form_data, 
            success: function(response) {
                 if(response == 'success') {
                   $("#form1").slideUp('slow', function() {
                     $("#message").html('<p class="success"> You have logged in. </p>');
                   });
                 } else { 
                    $("#message").html('<p class="error"> Invalid username and/or password. </p>');
                 }
            }

         }); 
        return false;      
    });  
});
AJames
  • 64
  • 3
  • Did you replace your javascript with this javascript? – AJames Jun 06 '13 at 16:42
  • My only other change was adding a adding a doctype at the top , typically getting a white page is a usually a PHP issue. Using your code with my updated js their should be no php on the page. – AJames Jun 06 '13 at 16:45
  • I've added all of these as it shown in the video tutorial (goo.gl/15wjF): – MRAN Jun 06 '13 at 16:51
  • What did you mean, please? `typically getting a white page is a usually a PHP issue. Using your code with my updated js their should be no php on the page` – MRAN Jun 06 '13 at 16:55
  • I will post code in a new comment because it is too long to post here. – AJames Jun 06 '13 at 17:10
0

If you are just seeing a blank white page that usually means that you have a syntax error with your php. Or you have not added anything to that page.

Here is what is working for me:

I have a page in a directory called test.php

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
$(function() {
    var action = '';
    var form_data = '';
    $('#login').click(function () {
         action = $("#form1").attr("action");
         form_data = {
         username: $("#username").val(),
         password: $("#password").val(),
         is_ajax: '1'};  

        $.ajax({
            type: 'POST',
            url: action,
            data: form_data, 
            success: function(response) {
                 if(response == 'success') {
                   $("#form1").slideUp('slow', function() {
                     $("#message").html('<p class="success"> You have logged in. </p>');
                   });
                 } else { 
                    $("#message").html('<p class="error"> Invalid username and/or password. </p>');
                 }
            }

         }); 
        return false;      
    });  
});
</script>
</head>
<body>
<p id="message">&nbsp;</p>    
<div id="content"> 
 <h1>Login form</h1>   

    <form name="form1" id="form1"  method="post" action="dologin.php">
        <p>
            <label for="username"> Username:</label>
            <input type="text" id="username" name="usernmae" />
        </p>
        <p>
             <label for="password">Password:</label>
            <input type="password" id="password" name="password" /> 
        </p>
        <p>
            <input type="submit" id="login" name="login" value="Login" />
        </p>
    </form>

 </div>
</body>
</html>

In that same directory I have a php file called dologin.php

$is_ajax = $_REQUEST['is_ajax'];
if(isset($is_ajax) && $is_ajax) {

    $username = $_REQUEST['username'];
    $password = $_REQUEST['password'];

    if($username == 'demo' && $password == 'demo') {
        echo "success";
    } 
}

Hope that helps

Neil
  • 54,642
  • 8
  • 60
  • 72
AJames
  • 64
  • 3