CODEWITHSUNDEEP
jquery
i_me_mine
i_me_mine

Reputation: 1433

jQuery $.post function failing

I have no idea why this jQuery function is not working. It's very simple and the result should be obvious. I've done several tests on the html and php files to verify they are working properly and they are. The problem is definitely in this function.

function

$('#sui').submit(function () {
    var email = $('#email').val();
    var password = $('#password').val();    

    $.post('sign_in.php', { email: email, password: password }, function(data) {         
          $('#errors').text(data);          
    });
});

Now I've tested this function by putting alerts in different places. If I put this code in

$('#sui').submit(function () {
    var email = $('#email').val();
    var password = $('#password').val();

    alert (email + password); // inserted this line

    $.post('sign_in.php', { email: email, password: password }, function(data) {         
          $('#errors').text(data);          
    });
});

then I get an alert box with the values from my email and password text inputs. However if I move the alert down inside the $.post function like this

$('#sui').submit(function () {
    var email = $('#email').val();
    var password = $('#password').val();    

    $.post('sign_in.php', { email: email, password: password }, function(data) {
         alert ('hi'); // never shows up
         alert (data); // never shows up        
         $('#errors').text(data);       
    });
});

As noted in the comments the alert never shows, the page refreshes after submitting the form and I'm left on the original page like nothing ever happened the 'errors' div never receives any message. My first thought was that maybe I had another field in my html file that had the id of "email" "password" or "sui" but I don't, these are all unique id's. Then I checked that the php file was actually returning data, and it is. If you would like to see the relevant html and php code i will show it. Anyways any help is appreciated, thanks for taking a look

Upvotes: 0

Views: 32

Answers (1)

Chad Levy
Chad Levy

Reputation: 10140

It looks like you're binding an event handler to a form submit button. The problem appears that the form is being submitted before $.post has a chance to handle the response.

What you want to do is prevent the form from submitting.

Try this:

$('#sui').submit(function (e) {      // added 'e' to catch the jQuery event
    e.preventDefault();             /* prevent the default action from happening, 
                                       in this case submitting the form */
    var email = $('#email').val();
    var password = $('#password').val();    

    $.post('sign_in.php', { email: email, password: password }, function(data) {
         alert ('hi'); // never shows up
         alert (data); // never shows up        
         $('#errors').text(data);       
    });
});

As an aside, I would suggest the jQuery jqXHR Promise interface:

$.post('sign_in.php', { email: email, password: password })
    .done(function(data) {
        // success
    })
    .fail(function(jqXHR, status, error) {
        // error
     });

Also, I personally prefer to use console.log() along with developer tools (F12 in Chrome and IE) for debugging instead of alert() because with most modern browsers you can inspect objects.

For example, if you wanted to look at what the jqXHR object looks like in the .fail() method, alert(jqXHR) would show Object [Object], whereas console.log(jqXHR) would show the entire jqXHR object.

Upvotes: 2

Related Questions