AJAX does not work, the page reloads, nothing also gets into the database

<!DOCTYPE html> <html> <head> <title>Регистрация</title> <meta http-equiv="Content-Style-Type" content="text/css" charset="utf-8"> <meta name="keywords" content="Ключевые слова для поисковиков"> <meta name="description" content="Описание сайта"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="1/my_room/css/style.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="1/my_room/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="1/my_room/js/bootstrap.min.js"></script> <style> .error, .success{ display: block; position: absolute; top:0; left:0; padding: 7px 5px 7px 5px; border-bottom-right-radius: 10px; display: none; } .error{ background: #b9f3f2; border:1px solid #b23c3c; } .success{ background: #ed9999; border: 1px solid #326db5; } </style> </head> <body> <script> $(document).ready(function() { $("#clickButtonForm").bind("click", function () { $.ajax ({ url: "ajax.php", type: "POST", data: ({login: $("#login").val(), password: $("#password").val(), email: $("#email").val()}), dataType: "text", beforeSend: function (){ $("#information").text ("Expectaton data...") }, success: function (data){ // в случае, когда пришло success. Отработало без ошибок if (data == "0") alert("data in bd"); // $("#error").text("You success registration").removeClass("error").addClass("success").show().delay(3000).fadeOut(3000); // в случа ошибок else (data == "1") $("#error").text("Occured error speak administraor").removeClass("success").addClass("error").show().delay(8000).fadeOut(3000); } }); }); }); </script> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-lg-4"> <div class="panel"> <form role="form" class="formForMe" id="register_form"> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> <input type="text" class="input form-control" name="login" id="login" placeholder="Введите Ваш будующий логин для входа" required autofocus /> </div> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span> <input type="password" name="password" id="password" class="input form-control" placeholder="Введите Ваш пароль для входа" required /> </div> <!--<div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span> <input type="password" name="rpassword" id="rpassword" class="form-control" placeholder="Повторите пароль для входа" required /> </div>--> <div class="input-group"> <span class="input-group-addon"><span class="add-on">@</span></span> <input type="text" class="input form-control" name="email" id="email" placeholder="Ваш существующий email" required autofocus /> </div> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-12"> </div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-12"> <button class="clickButtonForm btn btn-labeled btn-success" id="clickButtonForm"> <span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>Войти</button> <button onclick="location.href='../index.html'" type="submit" class="btn btn-labeled btn-danger"> <span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>Назад</button> </div> </div> <p> <a href="#">Забыли свой пароль?</a></p> </form> </div> </div> </div> </div> <span id="information" class=""></span> <span id="error" class=""></span> </body> </html>

but php handler

 <?php header('Content-Type: text/html; charset=utf-8'); mysql_connect("localhost", "a0031620_saratov", "oImjHwXm"); mysql_select_db("a0031620_saratov"); if (isset($_POST['login'])) { $login = ($_POST['login']); } if (isset($_POST['email'])) { $email = (isset($_POST['email'])); } if (isset($_POST['password']) { $password = ($_POST['password']); } $sql = mysql_query("INSERT INTO `users` (`login`, `e-mail`, `paroli`) VALUES ('$login', '$email', '$password')"); if ($sql) { echo 0; } else { echo 1; } ?>
  • see what you have in $_POST - ArchDemon
  • one
    in the click handler, you need to return false , otherwise the <button> will work as a button for sending a non-ajax form. - Sanya_Zol
  • type of submit button to remove, so that was the usual button - Dmitry Kozlov

1 answer 1

 $(document).ready(function() { $("#clickButtonForm").on("click", function (e) { e.preventDefault(); $.ajax ({ url: "ajax.php", type: "POST", data: $("#register_form").serialize(), dataType: "text", beforeSend: function (){ $("#information").text ("Expectaton data...") }, success: function (data){ // в случае, когда пришло success. Отработало без ошибок if (data == "0"){ alert("data in bd"); // $("#error").text("You success registration").removeClass("error").addClass("success").show().delay(3000).fadeOut(3000); // в случае ошибок }else{ $("#error").text("Occured error speak administraor").removeClass("success").addClass("error").show().delay(8000).fadeOut(3000); } } }); }); });