Проблема с Ajax в JS?

Question

[Kejin]

Вообщем. Есть форма входа, подключена к базе данных. При нажатии на кнопку "Вход" на сайте, пользователь должен авторизироваться (если правильно ввел данные). А если ввел не правильные данные, то должно вылазить окошко "Неправильный логин или пароль". Но эта кнопка никак не реагирует, вообще ни на что. Помогите
Php

<div id="reg-auth-title">
  <a class="top-auth">Вход</a> 
  <a href="registration.php">Регистрация</a>
</div>

<div id="block-top-auth">
  <div class="corner"></div>
  <form method="post">
    <h3>Вход</h3>
    <div id="message-auth">Неправильный логин и(или) пароль</div>
    <input type="email" id="auth_login" placeholder="Логин или E-mail">
    <input type="password" id="auth_pass" placeholder="Пароль">

    <span id="button-pass-show-hide" class="pass-show"></span>
    <input type="checkbox" name="rememberme" id="rememberme">
    <label for="rememberme">Запомнить меня</label>

    <a href="#" id="remindpass">Забыли пароль</a>

    <input type="submit" id="button-auth" value="Войти">

    <div class="auth-loading">
      <img src="/images/loading.gif" alt="">
    </div>
  </form>
</div>

JS

$('.top-auth').toggle(
       function() {
           $(".top-auth").attr("id","active-button");
           $("#block-top-auth").fadeIn(200);
       },
       function() {
           $(".top-auth").attr("id","");
           $("#block-top-auth").fadeOut(200);  
       }
    );
      
      $('#button-pass-show-hide').click(function(){
 var statuspass = $('#button-pass-show-hide').attr("class");
  
    if (statuspass == "pass-show")
    {
       $('#button-pass-show-hide').attr("class","pass-hide");
       
     			            var $input = $("#auth_pass");
			                var change = "text";
			                var rep = $("<input placeholder='Пароль' type='" + change + "' />")
			                    .attr("id", $input.attr("id"))
			                    .attr("name", $input.attr("name"))
			                    .attr('class', $input.attr('class'))
			                    .val($input.val())
			                    .insertBefore($input);
			                $input.remove();
			                $input = rep;
        
    }else
    {
        $('#button-pass-show-hide').attr("class","pass-show");
        
     			            var $input = $("#auth_pass");
			                var change = "password";
			                var rep = $("<input placeholder='Пароль' type='" + change + "' />")
			                    .attr("id", $input.attr("id"))
			                    .attr("name", $input.attr("name"))
			                    .attr('class', $input.attr('class'))
			                    .val($input.val())
			                    .insertBefore($input);
			                $input.remove();
			                $input = rep;        
       
    }
    


  }); 
$("#button-auth").click(function() {
        
 var auth_login = $("#auth_login").val();
 var auth_pass = $("#auth_pass").val();

 
 if (auth_login == "" || auth_login.length > 30 )
 {
    $("#auth_login").css("borderColor","#FDB6B6");
    send_login = 'no';
 }else {
    
   $("#auth_login").css("borderColor","#DBDBDB");
   send_login = 'yes'; 
      }

 
if (auth_pass == "" || auth_pass.length > 15 )
 {
    $("#auth_pass").css("borderColor","#FDB6B6");
    send_pass = 'no';
 }else { $("#auth_pass").css("borderColor","#DBDBDB");  send_pass = 'yes'; }



 if ($("#rememberme").prop('checked'))
 {
    auth_rememberme = 'yes';

 }else { auth_rememberme = 'no'; }


 if ( send_login == 'yes' && send_pass == 'yes' )
 { 
  $("#button-auth").hide();
  $(".auth-loading").show();
    
    $.ajax({
  type: "POST",
  url: "include/auth.php",
  data: "login="+auth_login+"&pass="+auth_pass+"&rememberme="+auth_rememberme,
  dataType: "html",
  cache: false,
  success: function(data) {

  if (data == 'yes_auth')
  {
      location.reload();
  }else
  {
      $("#message-auth").slideDown(400);
      $(".auth-loading").hide();
      $("#button-auth").show();
      
  }
  
}
});  
}
});

Answer 1

[Vlad Feninets]

у вас кнопка "button-auth" является сабмитом, поэтому клик на ней всплывает (event-bubble) наверх в "form"
вешайте обработчик на форму и запривентите ее.

$('#yourform').on('submit', function(e) {
    e.preventDefault(); // для того, чтобы выключить стандартное поведение для формы
    // your ajax code ...
})