CODEWITHSUNDEEP
javascriptphpjqueryajax
PaulPolon
PaulPolon

Reputation: 329

$.post doesn't seem to work

There are a couple of alert() calls in the jQuery which are showing up, but the alert inside the $.post does not seems to respond. I already tested the PHP code and it works fine. I think it is my path, but I already check them before.

<form id="login-form" method="post" class="form-inline" target="_top">
    <input type="text" tabindex="2"  id="username" placeholder="Username" name="email" class="inputtext">
    <input type="password" tabindex="3" id="userpass" placeholder="Password" name="pass" class="inputtext">
    <button tabindex="4" id="loginButton">Login</button>
</form>

$(document).ready(function(e) {
    $('#loginButton').click(function(e) {
        alert("start function");
        $.post('../php/login.php', {
            'username': $('#username').val(),
            'userpass': $('#userpass').val()
        }, function(data){
            alert(data);
        });
        alert("end function");
    });
});

<?php    
    require('config.php');

    $queryStmt = 'SELECT user_first, user_last FROM users WHERE user_name=:sqlIdName AND user_password=:sqlPass';
    $queryPrepare = $dba_connect->prepare($queryStmt);
    $queryPrepare->execute(array(':sqlIdName'=>$_POST['username'],':sqlPass'=>md5($_POST['userpass'])));
    $queryResult = $queryPrepare->fetch(PDO::FETCH_ASSOC);
    $queryPrepare->closeCursor();

    var_dump($queryResult);

    if ($queryResult == false)
        return false;
    else 
        return true;  
?>

My file structure is this:

File Structure

Upvotes: 1

Views: 56

Answers (3)

Dhara Parmar
Dhara Parmar

Reputation: 8101

Try this:

$(document).ready(function(e) {
    $('#loginButton').click(function(e) {
        $.post('../php/login.php', {
            functions: 'userLogin',
            username: $('#username').val(),                    
            userpass: $('#userpass').val()
        }).done(function( data ) {
            alert("Data Loaded: " + data);
        });
    });
});

Upvotes: 0

JYoThI
JYoThI

Reputation: 12085

try this .its not exact ans may be the solution for it.

echo string in php server side something like this

if ($queryResult == false)
echo 'false'; 
else 
 echo 'true';

and then change your jquery to 

function(data){
    if(data=='true')
     {
      alert(data);
      }
      else
      {
     alert(data);
     }
      });

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

The button is actually submitting the form normally as you have not given it a type="button" attribute, nor are you using preventDefault() on the click event itself.

Regardless of that, it is much better practice to hook to the submit event of the form, not the click of the button. Try this:

$('#login-form').submit(function(e){
    e.preventDefault(); // stop standard form submission
    $.post('../php/login.php', {
        'username': $('#username').val(),
        'userpass': $('#userpass').val()
    }, function(data){
        console.log(data);
    });
});

You may also want to return something other than a boolean value from your PHP code, as it will just be turned in to a single string response. JSON would seem to be the best fit for your case, check out the json_encode function.

Finally, note that you should always use console.log for debugging as it does not coerce data types.

Upvotes: 2

Related Questions