Chrome duplicates ajax request or response

Question

i'm making login form and i'm recieving duplicationg results. For example. I click login button, function:

function PostLogin() {
  var $result = $("#forms"); 

  $.ajax({
type: "POST",
data: {
  "login": $('#login').val(), 
  "password": $('#password').val(),
},
dataType: "html",
url: "php/login.php",
beforeSend: function() {
  $result.html('<div class="alert">Подождите...</div>');
},
success: function(data) {
  $result.html(data);
},
});
}

After result recieved, it is supposed to be written in <div id="forms" class = "formsdiv"></div>

I see for a moment that it written, but then I have straight call of my php file:

What i get in Chrome - see image https://i.sstatic.net/RBiXx.png (no reputation)

Firefox works fine and i get what i want.

Firefox result - https://i.sstatic.net/xnGBZ.png

My login form:

<form id="login-form" method="post" action="php/login.php" role="form" style="display: block;">
                                    <div class="form-group">
                                        <input type="text" name="login" id="login" tabindex="1" class="form-control" placeholder="Логин" value="">
                                    </div>
                                    <div class="form-group">
                                        <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Пароль">
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-sm-6 col-sm-offset-3">
                                                <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" onclick="PostLogin()" value="Войти">
                                            </div>
                                        </div>
                                    </div>
                                </form>

Any suggestions how to make it work in chrome?

Answer 1

You should remove the action attribute from your form or add "return false;" to your onclick event since you are using an AJAX call and do not want the form to submit.