Question

The problem is that on a login page, after an incorrect entry is submitted, the ajax request does not go through a second time on pressing submit.

I have hunted through StackExchange for an answer to my question, and have looked at links such as Why won’t my jQuery form resubmit? and jQuery & AJAX login form among a dozen others. Looks like I need to unbind the submitted variables, but not sure how to do this.

HTML

<div data-role="page" id="login">
  <div data-role="header" data-position="inline" data-theme="b">    
    <h1>My login</h1>
  </div><!-- /header -->
  <div data-role="content">
    <form method="post" id="loginform">
        <label for="username">Username:</label> <input type="text" name="username" id="username" value=""  />
        <label for="passwd">Password:</label> <input type="password" name="passwd" id="passwd" value=""  />
        <input type="submit" value="Login" />
    </form>
  </div><!-- /content -->
</div><!-- /login page -->

JavaScript:

$(document).ready(function() { 
  $("#loginform").on('submit',function(event){
    var $form = $(this),
      serializedData = $form.serialize();

    // fire off the request to /form.py
    $.ajax({
      url: "https://mywebsite/cgi-bin/form.py",
      type: "post",
      data: serializedData,

      // callback handler that will be called on success
      success: function(response, textStatus, jqXHR){
        console.log(response);
        // If login is unsuccessful, log message and return to login screen again
        if (response == "INVALID_USER\n") {
          alert("sorry, try again");
        } else {
          // Login successful - do something
        }
      },

      // callback handler that will be called on error
      error: function(jqXHR, textStatus, errorThrown){
        console.log(
          "The following error occured: "+
            textStatus, errorThrown);
      },

      // callback handler that will be called on completion
      // which means, either on success or error
      complete: function(){
        //----- DO I NEED TO UNBIND SOMETHING HERE?
        var dummy = 1;
      }
    }); // end of ajax call
}); // end of submit handler
});

Answer 1

Would you try to add return false before the end of the event handler? Using return false you prevent the event fire and prevent the user from proceeding without filling out the correct required fields.

$("#loginform").on('submit',function(event){

    ...

    return false;
});

Furthermore what data type is returned by the server? For example if the server returns JSON then you should add dataType: 'json' in the AJAX code. If none is specified, jQuery will try to infer it based on the MIME type of the response.

Maybe you could use the firebug to find out whether any error occurs.