Submitting form with AJAX and Rails

Question

Right now I'm struggling a little bit with getting my form to submit with AJAX. Eventually I will be changing some DIVs on success, but right now I would just like to get it working. My code for the form looks like this:

<div class="modal signUpContent fade" id="ModalLogin" tabindex="-1" role="dialog" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
        <h3 class="modal-title-site text-center" > Login  to All For Funds </h3>
      </div>
      <div class="modal-body">
        <div id="login_form">
        <form accept-charset="UTF-8"  class="new_user" id="loginForm" name="loginForm" action="">
          <div style="display:none">
          <input name="utf8" type="hidden" value="✓">
          <input name="authenticity_token" type="hidden" value="iapD/wScrrV7ga6YEXGxlI1OZ2sVgfEUsA5RzibKpFw=">
        </div>
        <div class="form-group reg-email">

          <div>
            <input autofocus="autofocus" id="user[email]" name="user[email]" type="email" value="" class="form-control input"  size="20" placeholder="Enter Email">
          </div>
        </div>
        <div class="form-group reg-password">
          <div >
            <input autocomplete="off" id="user[password]" name="user[password]" type="password" class="form-control input"  size="20" placeholder="Password">
          </div>
        </div>
        <div class="form-group">
          <div >
            <input name="user[remember_me]" type="hidden" value="0">
            <div class="checkbox login-remember">
              <label>
                <input id="user[remember_me]" name="user[remember_me]" checked="checked" type="checkbox">
                Remember Me </label>
            </div>
          </div>
        </div>
        <div >
          <div >
            <input name="login-button" id="login-button" class="btn btn-block btn-lg btn-primary" value="LOGIN" type="submit" onS>
          </div>
        </div>
      </form>
    </div>
        <!--userForm--> 

      </div>
      <div class="modal-footer">
        <p class="text-center"> Not here before? <a data-toggle="modal"  data-dismiss="modal" href="product-details.html#ModalSignup"> Sign Up. </a> <br>
          <a href="forgot-password.html" > Lost your password? </a> </p>
      </div>
    </div>
    <!-- /.modal-content --> 

  </div>
  <!-- /.modal-dialog --> 

</div>
<!-- /.Modal Login --> 

And my JS looks like this:

$(document).ready(function(){

$("#loginForm").submit(function(e) {

$.ajax({
       type: "POST",
       url : "/users/sign_in",
       data: $("#loginForm").serialize(), // serializes the form's elements.
       success: function(data)
       {
           alert('Posting!');
            $('.navigation').load('/application_controller/login');
            e.preventDefault();
            return;
       }
     });

});

});

Any suggestions would be great

Answer 1

Even though you've left action blank and ommitted method on your form element, it'll still default to the current URI and GET , respectively, meaning you aren't stopping the form from doing it's default behavior.

Your AJAX success handler will only be called after the AJAX request is successful (returns from server with 2xx HTTP code). Because your form is submitting as normal, the AJAX request probably never completes to get to where you're trying to prevent the default action.

When you handle the submit event, you'll want to prevent the default action immediately before starting your AJAX request.

$('#loginForm').submit(function(e) {
  e.preventDefault();
  $.ajax(...)
});