JavaScript reloads the complete page

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>

Answers 1

  • 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.


Related Articles