JavaScript reloads the complete page

Question

I am using the following script to validate a registration form:

$(document).ready(function() {
    $("#register").click(function() {
        var name = $("#name").val();

        var email = $("#email").val();

        var password = $("#password").val();

        var cpassword = $("#cpassword").val();

        if (name == '' || email == '' || password == '' || cpassword == '') {
            alert("Please fill all fields...!!!!!!");
        } else if ((password.length) < 8) {
            alert("Password should at least 8 character in length...!!!!!!");
        } else if (!(password).match(cpassword)) {
            alert("Your passwords don't match. Try again?");
        } else {
            $.post("register.php", {
                name1: name,
                email1: email,
                password1: password
            }, function(data) {
                if (data == 'You have Successfully Registered.....') {

                    alert("Tu cuenta de usuario ha sido creada");

                }

            });
        }
    });
});

I am checking all possible options, and I have detected that the conditions are working, but instead of stopping the execution of the script, the page reloads itself after one condition is met. For example, if the password length is 6 characters, the alert:

alert("Password should at least 8 character in length...!!!!!!");

Is thrown, but the page reloads again and all text in the input fields are removed...

And also when the $.post call is executed and the response is the expected, the alert:

alert("Tu cuenta de usuario ha sido creada");

Is not shown. The record is created in the database and the page reloads again, but the alert is not shown.

EDIT

This is the html part of the form:

<div class="form-bottom">
                                <form role="form" method="post" action="#" class="login-form" id="login_form">
                                    <div class="form-group">
                                        <label class="sr-only" for="form-username">Usuario</label>
                                        <input type="text" name="dname" placeholder="Usuario..." class="form-username form-control" id="name">
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="form-email">Email</label>
                                        <input type="text" name="email" placeholder="Email..." class="form-email form-control" id="email">
                                    </div>

                                    <div class="form-group">
                                        <label class="sr-only" for="form-password">Contraseña</label>
                                        <input type="password" name="password" placeholder="Contraseña..." class="form-password form-control" id="password">
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="form-confirm-password">Confirmar Contraseña</label>
                                        <input type="password" name="cpassword" placeholder="Confirmar Contraseña..." class="form-password form-control" id="cpassword">
                                    </div><br>
                                    <button type="submit" name="register" id="register" class="btn">Crear cuenta de usuario</button>


                                </form>

Answer 1

可能是您的#register是一个提交按钮，并且表单正在发布

Answer 2

When you click the button it executes the default action for that button. Since your button has type submit , the default action is to submit the form. This is what you see in your application - you run the script, and then the form is submitted.

In order to prevent that you need to use method preventDefault on event object:

$("#register").click(function(e) {    // <- pass event object as first parameter
    e.preventDefault();   // <- call preventDefault to prevents form from submitting
    var name = $("#name").val();
    // the rest of your code
}

When you call this method the default action of the event will not be triggered. In your case this means that the form will not be submitted and your code should be working fine.

Answer 3

You need to return false at the end of click event

$(document).ready(function() {
$("#register").click(function() {
    var name = $("#name").val();

    var email = $("#email").val();

    var password = $("#password").val();

    var cpassword = $("#cpassword").val();

    if (name == '' || email == '' || password == '' || cpassword == '') {
        alert("Please fill all fields...!!!!!!");
    } else if ((password.length) < 8) {
        alert("Password should at least 8 character in length...!!!!!!");
    } else if (!(password).match(cpassword)) {
        alert("Your passwords don't match. Try again?");
    } else {
        $.post("register.php", {
            name1: name,
            email1: email,
            password1: password
        }, function(data) {
            if (data == 'You have Successfully Registered.....') {

                alert("Tu cuenta de usuario ha sido creada");

            }

        });
    }
    return false;  // put this it will solve your problem
});
});

Answer 4

In your HTML form change following button code

  <button type="submit" name="register" id="register" class="btn">Crear cuenta de usuario</button>

to

 <button type="button" name="register" id="register" class="btn">Crear cuenta de usuario</button>

Here is the fiddle

only thing that is changed is the type of button.