Ajax Output no output

  ajax, html, javascript, jquery, php

Output Picture: This is the output after all conditions meet nothing happens it just pass
the data on my server but no do the script

<?php
    
        if(isset($_POST['submits'])){
            //First we get the data in ajax`enter code here`
            $name = $_POST['name'];
            $birthday = $_POST['birthday'];
            $gender = $_POST['gender'];
            $email = $_POST['email'];
            $phoneNumber = $_POST['phoneNumber'];
            $password = $_POST['password'];
            $confirmPassword = $_POST['confirmPassword'];
    
            $errorEmpty = false;
            $errorEmail = false;
            $errorBirthday = false;
            $errorPhoneNumber = false;
            $errorPassword = false;
            $errorConfirmPassword = false;
            $newPhoneNumber = "09".$phoneNumber;
    
            // Then we run a bunch of error handlers to catch any user mistakes we can (you can add more than I did)
            // These functions can be found in functions.inc.php
    
            require_once 'functions.inc.php';
            require_once 'dbh.inc.php';
    
            if(emptyInputSignup($name,$birthday,$gender,$phoneNumber,$email,$password,$confirmPassword)){
                echo "<span class = 'error'> Fill in all the fields! </span>";
                $errorEmpty = true;
            }
    
            elseif(invalidEmail($email)){
                echo "<span class = 'error'> Invalid Email! </span>";
                $errorEmail = true;
            }
            
            elseif(checkAge($birthday)){
                echo "<span class = 'error'> You must be atleast 18! </span>";
                $errorBirthday = true;
            }
    
            elseif(pwdvalidate($password)){
                echo "<span class = 'error'> Invalid Pasword </span> <br> <span class = 'error'> Must contain atleast 1 Symbol, 1 UpperCase, 1 Lowercase & 1 Number</span> ";
                $errorPassword = true;
            }
    
            elseif(pwdMatch($password,$confirmPassword)){
                echo "<span class = 'error'> Password must be the same! </span>";
                $errorPassword = true;
                $errorConfirmPassword = true;
            }
    
            elseif(emailExist($conn,$email)){
                echo "<span class = 'error'> Email Already Exist! </span>";
                $errorEmail = true;
            }
    
            elseif(isDigits($newPhoneNumber)){
                echo "<span class = 'error'> Invalid Phone Number! </span>";
                $errorPhoneNumber = true;
            }
    
            elseif(phoneNumberExist($conn,$newPhoneNumber)){
                echo "<span class = 'error'> Phone Number Already Exist! </span>";
                $errorPhoneNumber = true;
            }else{
                echo "<span class = 'success'> Sign Up Success!</span>";
                createUser($conn,$name,$birthday,$gender,$email,$newPhoneNumber,$password);
                header("location: ../rrdc-signup.php");
            }
    
            
    
        }else{
            header("location: ../rrdc-signup.php");
        }
    
    
    
    ?>
    
    
    <script>
        $("#sign-fullname, #sign-birthday, #sign-email, #sign-phonenumber, #sign-password, #sign-confirmpassword").removeClass("input-error");
        var errorEmpty = "<?= $errorEmpty ?>";
        var errorEmail = "<?= $errorEmail ?>";
        var errorBirthday = "<?= $errorBirthday ?>";
        var errorPassword = "<?= $errorPassword ?>";
        var errorPhoneNumber = "<?= $errorPhoneNumber ?>";
        var errorConfirmPassword = "<?= $errorConfirmPassword ?>";
       
    
        console.log(success);
        
        if(errorEmpty == true){
            $("#sign-fullname, #sign-birthday, #sign-email, #sign-phonenumber, #sign-password, #sign-confirmpassword").addClass("input-error");
        }
    
        if(errorEmail == true){
            $("#sign-email").addClass("input-error");
        }
    
        if(errorBirthday == true){
            $("#sign-birthday").addClass("input-error");
        }
    
        if(errorPassword == true){
            $("#sign-password").addClass("input-error");
        }
    
        if(errorPhoneNumber == true){
            $("#sign-phonenumber").addClass("input-error");
        }
    
        if(errorPassword == true && errorConfirmPassword == true){
            $("#sign-password, #sign-confirmpassword").addClass("input-error");
        }
    
        if(errorEmpty == false && errorEmail == false && errorBirthday == false && errorPassword == false && errorPhoneNumber == false  && errorConfirmPassword == false) {
            $("#sign-fullname, #sign-birthday, #sign-email, #sign-phonenumber, #sign-password, #sign-confirmpassword").val('');
            
        }
    
    </script>

This is my php file…..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" href="css/rrdc-signup.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type = "text/javascript" src = "js/rrdc-signup.js"></script>
    <title>Document</title>
</head>
<body>
<div class="container">
        <div class="row">
            <div class="col-md-5 mx-auto">
            <div id="first">
                <div class="myform form ">
                     <div class="logo mb-3">
                         <div class="col-md-12 text-center my-4">
                            <img src="img/logoViolet.png"  class="img-fluid" alt="">
                         </div>

                    </div>
                   <form>
                           <div class="form-group">
                              <label for="exampleInputEmail1">Full Name</label>
                              <input type="text" name="fullname"  class="form-control" id="sign-fullname" placeholder="Enter Full Name">
                           </div>
                           <div class="form-group">
                              <label for="exampleInputEmail1">Birthday</label>
                              <input type="date" name="birthday"  class="form-control" id="sign-birthday"  >
                           </div>
                           <div class="div">
                              <label for="exampleInputEmail1">Gender</label>
                              <select class="form-select" id = "sign-gender">
                                 <option value="male">Male</option>
                                 <option value="female">Female</option>
                                 <option value="binary">Binary</option>
                              </select>
                           </div>
                           <div class="form-group">
                              <label for="exampleInputEmail1">Email address</label>
                              <input type="email" name="email"  class="form-control" id="sign-email" placeholder="Enter email">
                           </div>
                           <div class="form-group">
                           <label for="exampleInputEmail1"> Phone Number</label>
                           <div class="input-group">
                             <span class="input-group-text">+639</span>
                             <input type="text" name="phonenumber"  class="form-control" id="sign-phonenumber"  placeholder="Enter Phone Number">
                          </div>
                           </div>
                           <div class="form-group">
                              <label for="exampleInputEmail1">Password</label>
                              <input type="password" name="password" id="sign-password"  class="form-control"  placeholder="Enter Password">
                           </div>
                           <div class="form-group">
                              <label for="exampleInputEmail1"> Confirm Password</label>
                              <input type="password" name="confirmpassword" id="sign-confirmpassword"  class="form-control"  placeholder="Enter Password">
                           </div>
                           <div class="form-group">
                              <p class="text-center">By signing up you accept our <a href="#">Terms Of Use</a></p>
                           </div>
                           <div class="col-md-12 text-center ">
                              <button id= "signup" type="submit" name = "submit" class="google btn mybtn">Sign Up</button>
                           </div>
                           <div class="col-md-12 ">
                              <br>
                           </div>
                           <div class="col-md-12 mb-3">
                              <p class="text-center " id = "message">  </p>
                           </div>
                           <div class="form-group">
                              <p class="text-center">Do you already have account? <a href="#" id="signup">Log In here</a></p>
                           </div>
                        </form>
                 
                </div>
            </div>
</body>

 </html>

This is my js

$(document).ready(function(){
    $("form").submit(function(e){
        e.preventDefault();
        var name = $("#sign-fullname").val();
        var birthday = $("#sign-birthday").val();
        var gender = $("#sign-gender").val();
        var email = $("#sign-email").val();
        var phoneNumber = $("#sign-phonenumber").val();
        var password = $("#sign-password").val();
        var confirmPassword = $("#sign-confirmpassword").val();
        var submits = $("#signup").val();
        $("#message").load("includes/rrdc-signup.inc.php",{
            name : name,
            birthday: birthday,
            gender: gender,
            email: email,
            phoneNumber: phoneNumber,
            password: password,
            confirmPassword: confirmPassword,
            submits: submits
        });
    });

});

Guys Can you help me how to remove the input data fields when the user meet all the conditions and can you help me to go to another local page when it is successful. Nothing happens when it is successful. It doesn’t clear the input fields. I’m trying also to add "window.location.href =" after it is successful it will go to another page

Source: Ask Javascript Questions

LEAVE A COMMENT