Ajax registration not returning any value or error

Question

Ajax is not running properly for my registration form. I have a registration page called register_process.php.

I run through the variables from $_POST and echo out the variable $error. I then want to use this variable and add it to the div with the id #register_msg. The variable $error will contain a div wrap and content.

However, I'm not receiving a error OR a success feedback from the ajax request. Neither am I getting any console errors. How come?

This is my Ajax Code:

<script src="/scripts/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
    $('#reg_register').click(function(){
        var fullname=$("#reg_fullname").val();
        var email=$("#reg_email").val();
        var password1=$("#reg_password1").val();
        var password2=$("#reg_password2").val();
        var register=$("#reg_register").val();

        var dataString = 'fullname='+fullname+'&email='+email+'&password1='+password1+'&password2='+password2+'&register='+register;
        $.ajax({
            type: "POST",
            url: "register_process.php",
            data: dataString,
            cache: false,
            beforeSend: function(){
                $("#reg_register").val('Connecting...');
            },
            success: function(result){
                if(result){
                    $("#register_msg").html(result);
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert('error');
            } 
        });
    });
});
</script>

My form

<form method="post">
     Fullname:<br>
     <input type='text' name='fullname' id="reg_fullname" /><br>
     Email:<br>
     <input type="text" name="email" id="reg_email" /><br>
     Password:<br>
     <input type="password" name="password1" id="reg_password1" /><br>
     Confirm password:<br>
     <input type="password" name="password2" id="reg_password2" /><br>
     <input type="submit" name="register" value="Register" id="reg_register" /> 
</form>

My PHP registration check:

$req_error = "";
$req_success = "";

/** REGISTRATION FORM **/
if(isset($_POST['register'])){
    if((!empty($_POST['fullname'])) AND (!empty($_POST['email'])) AND (!empty($_POST['password1'])) AND (!empty($_POST['password2']))){
        /** FROM POST TO VARIABLE **/
        $email = $_POST['email'];
        $fullname = $_POST['fullname'];
        $password1 = $_POST['password1'];
        $password2 = $_POST['password2'];

        /** VALIDATE EMAIL **/
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
            $req_error .= $database_reg_6;
        }

        /** DUPLICATE EMAIL **/
        $sql = "SELECT id FROM users WHERE email = :email LIMIT 1";
        $result = $db_connect->prepare($sql);
        if($result->execute(array(':email' => $email))){
            $email_count = $result->rowCount();
            if($email_count != 0){
                $req_error .= $database_reg_7;
            }
            $result = NULL;
        }
        else{
            $req_error .= $database_reg_8;
        }

        /** CHECK FULL NAME **/
        $regex = "/^[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]+/";
        if(!preg_match($regex, $fullname)){
            $req_error .= $database_reg_9;
        }

        /** CHECK PASSWORD **/
        if($password1 !== $password2){
            $req_error .= $database_reg_10;
        }

        /** AFTER VALIDATION OF FORM **/
        if(empty($req_error)){
            $password_hash = password_hash($password, PASSWORD_BCRYPT);
            $unique_veri = getToken(10);

            $sql = "INSERT INTO users (access_level, fullname, email, password, verification,registered) VALUES ('0',:fullname,:email,:password,:verification, NOW())";
            $result = $db_connect->prepare($sql);

            if($result->execute(array(':fullname' => $fullname,':email' => $email, ':password' => $password_hash, ':verification' => $unique_veri))){
                $mail_receiver  = $email;
                $mail_subject   = 'Account verification required';

                $verify_url = 'http://'.$_SERVER['SERVER_NAME'].'/register?v='.$unique_veri;

                $mail_message  = 'This email contains your verification URL. Click it to confirm you are the correct owner of the account.<br>';
                $mail_message .= '<a href="'.$verify_url.'">Verification Link</a><br>';

                $mail_headers   = 'Content-type: text/html; charset=utf-8'."\r\n".'From: example.no <dont-reply@example.no>'."\r\n".'Reply-To: example.no <dont-reply@example.no>'."\r\n".'X-Mailer: PHP/'.phpversion();
                if(mail($mail_receiver, $Mail_subject, $mail_message, $mail_headers)){
                    $req_success .= $database_reg_11;
                }
                else{
                    $req_error .= $database_reg_12;
                }
            }
            else{
                $req_error .= $database_reg_13;
            }
        }
    }
    else{
        $req_error .= $database_reg_14;
    }
}
if(!empty($req_error)) {
    echo '<div id="register-msg-e">';
    echo '<div id="register-discard"><img src="/img/mobile-menu-active.png" height="15px" width="15px" alt="Discard Button"></div>';
    echo '<p>'.$req_error.'</p>';
    echo '</div>';
}
elseif(!empty($req_success)){
    echo '<div id="register-msg-s">';
    echo '<div id="register-discard"><img src="/img/mobile-menu-active.png" height="15px" width="15px" alt="Discard Button"></div>';
    echo '<p>'.$req_success.'</p>';
    echo '</div>';
}

Answer 1

Cancel the default action of the button so the form will not submit.

$('#reg_register').click(function( event ){
    event.preventDefault();
    /* rest of your code */
});

Answer 2

Finally I figured it out. Your HTML fields are inside a FORM. When you click "submit" button, you trigger the ajax request, that actually does its job but ALSO the form submits to itself (reloading the page) since it doesn't have an action tag, cleaning up the content of your div#register_msg , that had the PHP response of your ajax call.

Just remove the FORM tag from the HTML and everything will be fine.