Login Check using jQuery, Ajax & PHP

Question

I have been trying to understand how jQuery works while checking the login details of a user. I have created these pages:

db.php (DB Connection)
signin.html (Login Form)
check.php (Login check - MySQL select)
myscript.js (jQuery)

Signin Form:

<script src="js/jquery.min.js"></script>
<script src="js/myscript.js"></script>

<div id="loginForm">
 <label>Please Login</label><br/>
 <form id="myForm" action="check.php" method="post">
 <input name="emailid" id="email" type="text" placeholder="Enter your Email ID"/><br/>
 <input name="password" id="pass" type="password" placeholder="Enter your password"/><br/>
 <button id="submit"> Login</button>
 </form>
</div>
<div id="ack"></div>

myscript.js

 $(document).ready(function (){
   $("#submit").click(function (){
        alert("hi");
        if($("#email").val()==""||$("#pass").val()=="")
            $("div#ack").html("please enter email and pass");
        else
            $.post( $("#myForm").attr("action"), 
                    $("#myForm :input").serializeArray(),
                    function(data){
                        $("div#ack").html(data);
                    });
        $("#myForm").submit( function(){
            return false;
        });
     });
    });

check.php

$email = $_POST['emailid'];
$pass = $_POST['password'];
include "db.php";
$sql = "select count(*)from students where email = '$email' and password = '$pass';";
$result = mysqli_query($con,$sql);
$row=mysqli_fetch_array($result);
if($row[0]>0)
    echo "found result";
else
    echo "no result";

Everything is working fine. The only problem is that the data is not getting posted. $_POST[] is receiving null values even though I'm entering the values.

Please help.

Check the data you are sending using $("#myForm :input").serializeArray() Is it really what you expect it to be? — A. Wolff
– A. Wolff, Commented Sep 24, 2013 at 11:59
try to use ajax for this it will be better way to check for login. — Dhaval Bharadva
– Dhaval Bharadva, Commented Sep 24, 2013 at 12:13

Ritesh A · Accepted Answer · 2013-09-24 12:36:29Z

4

Changed the code and it's working now. Thanks for your inputs.

I was posting the wrong data.

  $(document).ready(function (){
  $("button#submit").click(function (){
        alert("hi");
        e = $("#email").val();
        p = $("#pass").val();
        if($("#email").val()==""||$("#pass").val()=="")
            $("div#ack").html("please enter email and pass");
        else
            $.post( $("#myForm").attr("action"), 
                    //$("#myForm :input").serializeArray(),
                    {emailid: e, password: p},
                    function(data){
                        $("div#ack").html(data);
                    });
        $("#myForm").submit( function(){
            return false;
        });
     });
});

answered Sep 24, 2013 at 12:36

Ritesh A

2831 gold badge2 silver badges12 bronze badges

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

Comments

Swapnil Patil · Accepted Answer · 2013-09-24 12:00:50Z

0

Change form action

<form id="myForm" action="login.php" method="post">

to

<form id="myForm" action="check.php" method="post">

answered Sep 24, 2013 at 12:00

Swapnil Patil

9772 gold badges18 silver badges41 bronze badges

3 Comments

Ritesh A Over a year ago

Oh! I have changed the name of action file only for the sake of simplicity over here. No minor mistakes.

Swapnil Patil Over a year ago

@RiteshA try to simple echo any string at the beginning to whether really it submitted to check.php

Ritesh A Over a year ago

Solved the problem. Posted the mistake too. Was sending wrong data from the post.

Darren · Accepted Answer · 2013-09-24 12:10:32Z

0

You should be escaping those inputs. You can never trust user input.

<?php
$name = mysqli_real_escape_string($_POST['emailid']);
$password = mysqli_real_escape_string($_POST['password']);
?>

keep in mind, you'll most likely need to include the active database connection.

You should be posting to the correct file, in your form you need to change the action from login.php to check.php

answered Sep 24, 2013 at 12:10

Darren

13.1k4 gold badges44 silver badges81 bronze badges

2 Comments

Ritesh A Over a year ago

Yes! I'have now included this along with server side validations too.

Ritesh A Over a year ago

It is working now. I was posting the wrong content. emailid: e, password: p did the job as explained in the last comment.

KIRANJOSHI · Accepted Answer · 2014-01-28 15:20:49Z

0

put action="javascript:void(0)" in form tag and everything works like great

answered Jan 28, 2014 at 15:20

KIRANJOSHI

1271 silver badge10 bronze badges

1 Comment

KIRANJOSHI Over a year ago

sample: <form action="javascript:void(0)" method="post" name="frmlogin"> <table> <tr> <td>username</td><td><input type="text" name="user" id="user" ></td> </tr> <tr> <td>password</td><td><input type="password" name="password" id="passowrd" ></td> </tr> <tr><td><input type="submit" name="submit" onclick="checklogin();" ></td></tr> </table> </form>

Collectives™ on Stack Overflow

Login Check using jQuery, Ajax & PHP

Signin Form:

myscript.js

check.php

4 Answers 4

Comments

3 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Signin Form:

myscript.js

check.php

4 Answers 4

Comments

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related