Ajax to php - javascript events not firing

Question

I'm sure this will be easy for you guys but I'm struggling with this one. Just trying to do a simple ajax post request to a php file here.

I can see that the ajax request is working because I get valid data back from my php script (I verified this by echoing the result to the page). However, my ajax callbacks are not firing. See below:

Javascript:

    var request;
$(document).ready(function() {
    $('#loginform').submit(function(e) {

        if (request)
            request.abort();

        var $form = $(this);
        var $inputs = $form.find("input, select, button");
        $inputs.prop("disabled", true);

        var serializedData = $form.serialize();

        request = $.ajax({
            url: "/login.php",
            type: "post",
            data: serializedData,
            timeout: 10000,
            success: function() {
                alert("success");

             //   $("#result").html('Submitted successfully');
            },
            error: function() {
                alert("failure");
               // $("#result").html('There is error while submit');
            }
    });
});

PHP

<?php echo 'foo'; exit(); ?>

I almost feel stupid asking this considering the number of examples there are, but I cannot get this to work for the life of me. Suggestions?

EDIT Included html (Most of the css classes are from bootstrap btw)

<div style='background-color: #193048; width: 100%; height: 500px; background-repeat: no-repeat; background-position: center center; background-size: cover;'>
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-md-offset-4">
            <h1 class="text-center login-title whiteFont">Sign in to continue</h1>
            <div class="account-wall">
                <div align='center'>
                    <img class="profile-img" align='center' src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
                         alt="">
                </div>

                <form id="loginform" class="form-signin" method="post"  >          
                    <input type="text" name='emailTxt' class="form-control" placeholder="Email" required autofocus>
                    <input type="password" name="passTxt" class="form-control" placeholder="Password" required>    
                    <button class="btn btn-lg btn-primary btn-block" type="submit" value="login" id="loginBtn" >
                        Sign in</button>
                    <label class="checkbox pull-left">
                        <input type="checkbox" value="remember-me" >
                        <label class="whiteFont">Remember me</label>
                    </label>
                    <a href="#" class="pull-right need-help"><label class="whiteFont">Need Help?</label></a><span class="clearfix"></span>
                </form>
            </div>
        </div>
    </div>
</div>

Are you not getting the alert() firing? Have you checked your JavaScript console? — Justin Wood
– Justin Wood, Commented Dec 24, 2013 at 1:28
Correct, from the chrome javascript console, I see that the script executes with a 200 response. — tier1
– tier1, Commented Dec 24, 2013 at 1:30

tymeJV · Accepted Answer · 2013-12-24 01:32:02Z

2

.submit is most likely causing a postback, canceling out your JS. Add preventDefault to the beginning of your function:

e.preventDefault();

answered Dec 24, 2013 at 1:32

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

3 Comments

tier1 Over a year ago

This seems to stop execution of my javascript function all together? Now the postback to the php file isn't happening

tymeJV Over a year ago

The above statement wouldn't cause that to happen. Is anything happening in the console

tier1 Over a year ago

I think you are correct. This appears to have solved it. Thank you!

user2923779 · Accepted Answer · 2013-12-24 01:30:53Z

2

You need to pass the data returned from the server as an argument to your callback

var request;
$(document).ready(function() {
  $('#loginform').submit(function(e) {

    if (request)
        request.abort();

    var $inputs = $form.find("input, select, button");
    $inputs.prop("disabled", true);

    var $form = $(this);
    var serializedData = $form.serialize();

    request = $.ajax({
        url: "/login.php",
        type: "post",
        data: serializedData,
        timeout: 10000,
        success: function(data, status, xhr) { // <---- changes made here
            alert("success");

         //   $("#result").html('Submitted successfully');
        },
        error: function() {
            alert("failure");
           // $("#result").html('There is error while submit');
        }
  });
});

answered Dec 24, 2013 at 1:30

user2923779

2301 silver badge4 bronze badges

5 Comments

tier1 Over a year ago

Yes, you are correct. But I'm still not getting any events firing

user2923779 Over a year ago

Do you have the HTML you are working with. Want to get this running on my machine.

jeroen Over a year ago

A test-case in jsfiddle would even be better.

user2923779 Over a year ago

Does jsFiddle support ajax requests like that? Where would the script go? I guess you could have a local script with access-control-origin.

tier1 Over a year ago

@user2923779 included html.

Collectives™ on Stack Overflow

Ajax to php - javascript events not firing

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related