Submit form with Javascript

[eluser]ibnclaudius[/eluser]

Are you using firebug or anything to check to see that the request is going to the correct url and that you are actually receiving data back?

No, how can I do that? I've already installed the add-on on Firefox.

Your URL in your Ajax query is relative, which can be problematic and should be avoided.

What should I use instead?

Also, your js is wrapped in an anonymous function. Whats the purpose of the $ in front of it? I’ve never seen that. Usually its(function($){})(jQuery);

The js don't run correctly when I try like this:

Code:

(function($){
$("#submit-login").click(function() {
  document.getElementById('submit-login').disabled = true;
  
  var email = $("#input-email").val();
  var password = $("#input-password").val();
  var regexEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
  
  if (email == "" && password == "")
  {
   $("#input-email").select().focus();
  
   $("#input-email").addClass("error");
   $("#input-password").addClass("error");
  
   $('#errors-email').html("<span class='error'>Digite seu e-mail.</span>");
   $('#errors-password').html("<span class='error'>Digite sua senha.</span>");
  
   document.getElementById('submit-login').disabled = false;
  
   return false;
  }
  else if (email == "")
  {
   $("#input-email").select().focus();
  
   $("#input-email").addClass("error");
   $("#input-password").removeClass("error");
  
   $('#errors-email').html("<span class='error'>Digite seu e-mail.</span>");
   $('#errors-password').html('');
  
   document.getElementById('submit-login').disabled = false;
  
   return false;
  }
  else if (password == "")
  {
   $("#input-password").select().focus();
  
   $("#input-password").addClass("error");
   $("#input-email").removeClass("error");
  
   $('#errors-password').html("<span class='error'>Digite sua senha.</span>");
   $('#errors-email').html('');
  
   document.getElementById('submit-login').disabled = false;
  
   return false;
  }
  else if (!regexEmail.test(email))
  {
   $("#input-email").addClass("error");
   $("#input-password").removeClass("error");
  
   $('#errors-email').html("<span class='error'>E-mail inválido. Tente novamente.</span>");
   $('#errors-password').html('');
  
   document.getElementById('submit-login').disabled = false;
  
   return false;
  }
  else
  {
   $.ajax({
    type: "POST",
    url: "form/login",
    data: $('#form-login').serialize(),
    
    success: function(response) {
     if (response == 'TRUE') {
      [removed] = "http://www.google.com/";
     } else {
      $("#input-email").addClass("error");
      $("#input-password").addClass("error");
      
      $('#errors-email').html('');
      $('#errors-password').html("<span class='error'>O e-mail e/ou a senha está incorreto. Tente novamente.</span>");
      
      document.getElementById('submit-login').disabled = false;
      
      return false;
     }
    }
   });
  }
});
})(jQuery);

Also, you only have a success callback in your ajax. What happens if there is an error? You’re not handling that.

How can I handle that?

Sorry for the noob questions, I'm new to Javascript, jQuery and Ajax..