How to get php return value using javascript?

Question

I'm trying to create an ajax request. Here's my code :

function cek(){
        var username = $("#username").val();
        var password = $("#password").val();

        if (username == "" && password == "") {
            alert("Username and password can't be empty!");
        }else {
            $.ajax({
                url: "processLogin.php",
                type: "POST",
                data:{
                    username: $("#username").val(), password: $("#password").val()
                },
                success:function(e){
                    alert("e");
                }
            });
        }
    }

And here is the php code :

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

$sql = "SELECT * FROM user WHERE nama='$username' AND password='$password'";
$query = $db->query($sql)or die(mysqli_error($db));
$result = $query->fetch_assoc();

if ($query->num_rows == 0) {
    echo "Username not found!"; 
}elseif ($password != $result['password']) {
    echo "Password incorrect!";
}else{
    header('location:index.php');
}

I want my program to show an alert based on the result of if else. But it doesn't show any alert. I've search on google, but I still can't make it work.
Literally I'm new on using ajax. I hope someone can help me. Thank you.

Your code is vulnerable to [**SQL injection attacks**](https://en.wikipedia.org/wiki/SQL_injection). You should use [**mysqli**](https://secure.php.net/manual/en/mysqli.prepare.php) or [**PDO**](https://secure.php.net/manual/en/pdo.prepared-statements.php) prepared statements with bound parameters as described in [**this post**](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php). — Alex Howansky, Apr 20 '17 at 14:40
could you take a look at the network tab in your browser inspektor? inside of the network tab there is a xhr tab that shows you your ajax requests and the responses from the server that output might help — matyas, Apr 20 '17 at 14:44
then your form is probably still submitting by the browser, Do this to prevent it `function cek(e){ e.preventDefault();` ... (remainder of function) — andrew, Apr 20 '17 at 14:45
`$query = $db->query($sql)or die(mysqli_error($db));` to `$query = $db->query($sql)or die($db->error);` — Masivuye Cokile, Apr 20 '17 at 14:46
did you not notice i added `e` in the function parameters? `function cek(e){ ` — andrew, Apr 20 '17 at 14:49
You can try moving the `inputs` `#username` and `#password` out of the form element and seeing what happens then. @kurniawan26 Assuming you have them inside of an `HTML` form — blackandorangecat, Apr 20 '17 at 14:57
@blackandorangecat yes, I put `#username` and `#password` inside of an HTML form. — kurniawan26, Apr 20 '17 at 15:01
@kurniawan26 try moving them (and the button!) outside of the form. — blackandorangecat, Apr 20 '17 at 15:02
@blackandorangecat yes, it returns an error on the tab response. But I want to show the error using `alert`. What should I do now ? — kurniawan26, Apr 20 '17 at 15:04

score -1 · Accepted Answer · answered Apr 20 '17 at 15:08

One of the things u need to do is remove the quotes on alert alert("e");

to be alert(e);

then you need to return prevent the form from submit/loading the page using prevent default, also return false when the username/pass are empty so that the form won't continue submiting.

<script type="text/javascript">
       function cek(event){
                 event.preventDefault();
                 var username = $("#username").val();
                var password = $("#password").val();
            if (username == "" && password == "") {
                alert("Username and password can't be empty!");
                return false;
            }else {

                   $.ajax({
                    url: "processLogin.php",
                    type: "POST",
                    data:{
                        username: $("#username").val(), password: $("#password").val()
                    },
                    success:function(e){
                        alert(e);
                    }
                });


            }
        }
    </script>



    <form method="POST">
        <input type="text" name="username" id="username">
        <input type="password" name="password" id="password">
         <button type="submit" class="button" id="login" onclick="cek(event)">Login</button>
    </form>

Thank you mate. It works. I think I still make a mistake at the `else` statement. It shows an alert with the whole content of `header('location:index.php');` — kurniawan26, Apr 20 '17 at 15:50
No no don't do redirects using php, redirect with jquery/js on the frontend... redirecting with php will redirect the ajax request — Masivuye Cokile, Apr 20 '17 at 15:53
no u need to remove `header('location:index.php');` on the php page then wait for the response on the ajax, if the response is what u want then redirect in front — Masivuye Cokile, Apr 20 '17 at 16:00

How to get php return value using javascript?

1 Answers1