Cannot POST / error when clicking Submit button

Question

I am developing a login page for our mobile app using Phone gap. But whenever I clicked the Submit button, an error 'Cannot POST /' appears. Why is that so? Please see my code below.

index.html

<body>
    <div class="main-info2">
        <h3>Sign In</h3>
            <div class="in-form">
                <form id="login_form" method="post"">
                    <input type="text" placeholder="Username" required=" " id="email" />
                    <input type="password" placeholder="Password" required=" " id="password" />
                    <div class="check-sub">
                        <input type="submit" value="Login" id="login">
                    </div>
                </form>
            </div>
        </div>
        <div class="copy-right">
            <p>Design by <a href="http://w3layouts.com">W3layouts</a></p>
        </div>
    </div>
    <!-- //main -->
</body>

login.js

$(document).ready(function(){
    do_login();
});

function do_login() {
    $("#login").click(function () {
        var email = $('#email').val();
        var password = $('#password').val();
        var dataString="email="+email+"&password="+password+"&login=";

        if($.trim(email).length>0 & $.trim(password).length>0){
            $.ajax({
                type: 'POST',
                url: "http://localhost:1234/cleverpro/login.php",
                dataType: 'json',
                data: dataString,
                crossDomain: true,
                cache: false,
                beforeSend: function(){ $("#login").html('Connecting...');},
                success: function(data){
                    if(data == "success"){
                        console.log("hay nako!");
                        alert("hala");
                    }else if(data == "failed"){
                        $("#login").html('Login');
                        console.log("hastang sayupa");
                        alert("halajud");
                    }   
                }
            });
        }else{
            return false;
            console.log("walay sulod uy");
        }
    });
}

login.php

<?php
include "db.php";

if(isset($_POST['login'])){
    $email=mysql_real_escape_string(htmlspecialchars(trim($_POST['email'])));
    $password=mysql_real_escape_string(htmlspecialchars(trim($_POST['password'])));
    $login=mysql_num_rows(mysql_query("select * from `user` where `email`='$email' and `password`='$password'"));

    if($login!=0){
        echo "success";
    }else{
        echo "failed";
    }
}

?>

I didn't know where did I gone wrong with this. Please help me.

Did you try to put all the code in one domain and see if it works? — Alex Odenthal, Mar 03 '17 at 07:56
hi. yeah it is a typo. I already removed it but still same error — beginner_pr, Mar 03 '17 at 07:57
hello @AlexOdenthal l what do you mean same domain? I am running it locally right now. — beginner_pr, Mar 03 '17 at 07:58
you have set an option called crossDomain: true in your ajax call which made me assume that you do crossDomain posts — Alex Odenthal, Mar 03 '17 at 08:10
@AlexOdenthal actually i'm new with this so I don't know what does that thing do :( but when I removes it, still it has the same error :( — beginner_pr, Mar 03 '17 at 08:19

score 1 · Answer 1 · edited May 23 '17 at 11:53

1

First of all it would be better to use on('submit', handler) instead on click. (see Whats the difference between onclick and onsubmit?)

When you clicks "Login", default form send action happens after your javascript code finishes. It means that form POST happens to 'action' of your form that is not set in your form and is '/' by default.

You need to preventDefault action, somethink like this

$('#login_form').on('submit', function(e) {
    e.preventDefault();
    //Your code
});

edited May 23 '17 at 11:53

Community

1
1

answered Mar 03 '17 at 08:08

iamvar

36
3

hello. I tried adding this and the error was gone but nothing happens, it doesn't alert . – beginner_pr Mar 03 '17 at 08:18
ok so simply debug the stuff and see when it jumps out. just place a "console.log(i++);" after every line...and see what is the last number in the console. this should bring you to the problem line – Alex Odenthal Mar 03 '17 at 08:30

Cannot POST / error when clicking Submit button

1 Answers1