laurence keith albano laurence keith albano - 3 months ago 24
Ajax Question

How to use alert message box using Ajax in PHP without page refresh?

I have my PHP code here together with the design and its back end process. What is the correct syntax in using Ajax for using alert message that pops up when the 'createpassword' and 'confirmpassword' does not match when the user inputs a data.

I tried using the JavaScript type of alert box, but it refreshes the form whenever the user inputs a password. I want it to just display an alert box, and it won't refresh the page. Does anyone have any ideas?

This is my PHP design:

<?php
$MonthArray = array(
1=>"January",
2=> "February",
3=> "March",
4=> "April",
5=> "May",
6=> "June",
7=> "July",
8=> "August",
9=> "September",
10=> "October",
11=> "November",
12=> "December",
);
?>

<!DOCTYPE html>
<html>
<head>
<title>Sign up</title>
</head>
<body>
<div id="container">
<div id="signup">
<form action="SignupProcess.php" method="POST">
<!-- Complete Name -->
<div class="Name">
<label><span style="font-weight:bold">Name</span></label>
<br>
<input type="text" name="firstname" size="15" placeholder="First" required>
<input type="text" name="lastname" size="15" placeholder="Last" required>
</div>
<br>

<!-- Username -->
<div class="Username">
<label><span style="font-weight:bold">Choose your username</span></label><br>
<input type="text" name="username" size="35" required>
</div>
<br>

<!-- Password -->
<div class="Password">
<label><span style="font-weight:bold">Create a password</span></label><br>
<input type="password" name="createpassword" size="35" required>
<br><br>

<label><span style="font-weight:bold">Confirm your password</span></label><br>
<input type="password" name="confirmpassword" size="35" required>
</div>
<br>

<!-- Birthdate -->
<div class="Birthdate">
<select name="month" required>
<option disabled selected>Month</option>
<?php foreach($MonthArray as $monthkey => $value) { ?>
<option value="<?php echo $monthkey ?>"><?php echo $value ?></option>
<?php }?>
</select>

<input type="text" name="day" placeholder="Day" size="5" required>

<select name="year" required>
<?php
foreach(range(1990, (int)date("Y")) as $year) {
echo "\t<option value='".$year."'>".$year."</option>\n\r";
rsort($year);
}
?>
</select>
</div>

<!-- Buttons -->
<div class="Buttons">
<input type="submit" id="signup" name="signupsubmit">
<input type="reset" id="reset" name="signupreset">
</div>

</form>
</div>
</div>
</body>
</html>


And its PHP process:

<?php
include("CreateConnection.php");

// Get values from form Signup.php file
$FirstName = mysqli_real_escape_string($connect, $_POST['firstname']);
$LastName = mysqli_real_escape_string($connect, $_POST['lastname']);
$Username = mysqli_real_escape_string($connect, $_POST['username']);
$CreatePassword = mysqli_real_escape_string($connect, $_POST['createpassword']);
$ConfirmPassword = mysqli_real_escape_string($connect, $_POST['confirmpassword']);
$Month = mysqli_real_escape_string($connect, $_POST['month']);
$Day = mysqli_real_escape_string($connect, $_POST['day']);
$Year = mysqli_real_escape_string($connect, $_POST['year']);

// Removes back slashes in input
$FirstName = stripcslashes($FirstName);
$LastName = stripcslashes($LastName);
$Username = stripcslashes($Username);
$CreatePassword = stripcslashes($CreatePassword);
$ConfirmPassword = stripcslashes($ConfirmPassword);
$Month = stripcslashes($Month);
$Day = stripcslashes($Day);
$Year = stripcslashes($Year);

if($CreatePassword != $ConfirmPassword)
{
echo "<script type='text/javascript'>alert('Password does not match please check.');</script> ";
echo "<script>setTimeout(\"location.href = 'Signup.php'\", 0)</script>";
}
else
{
// Query Insert into tablereminders
$query = mysqli_query($connect, "INSERT INTO `tablereminders`(`username`, `password`, `firstname`, `lastname`, `Month`, `Day`, `Year`)
VALUES ('$Username','$ConfirmPassword','$FirstName','$LastName','$Month','$Day','$Year')");
}

// Error connection and query
if(mysqli_query($connect, $query))
{
echo "New record created successfully";
echo "<script>setTimeout(\"location.href = 'LoginReminder.php'\", 500)</script>";
}
?>


This code here is where I will display an alert box without page refresh.

if($CreatePassword != $ConfirmPassword)
{
echo "<script type='text/javascript'>alert('Password does not match please check.');</script> ";
echo "<script>setTimeout(\"location.href = 'Signup.php'\", 0)</script>";
}


I want to put an Ajax request in my SignupProcess.php. Is it okay to call the form function externally?

Answer

You can do this validation simply using JavaScript code like this:

<?php
    $MonthArray = array(
        1 => "January",
        2 => "February",
        3 => "March",
        4 => "April",
        5 => "May",
        6 => "June",
        7 => "July",
        8 => "August",
        9 => "September",
        10 => "October",
        11 => "November",
        12 => "December",
    );
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Sign up</title>
        <script type="text/javascript">
            function validate_form() {

                var createpass = document.getElementById("createpassword").value;
                var confirmpass = document.getElementById("confirmpassword").value;

                if (createpass != confirmpass) {

                    alert("Password does not match please check.");
                    document.getElementById("createpassword").focus();
                    return false;
                }
                return true;
            }
        </script>
    </head>

    <body>
        <div id="container">
            <div id="signup">
                <form action="SignupProcess.php" method="POST" onsubmit="return validate_form();">
                    <!-- Complete Name -->
                    <div class="Name">
                        <label><span style="font-weight:bold">Name</span></label>
                        <br>
                        <input type="text" name="firstname" size="15" placeholder="First" required>
                        <input type="text" name="lastname" size="15" placeholder="Last" required>
                    </div>
                    <br>

                    <!-- Username -->
                    <div class="Username">
                        <label><span style="font-weight:bold">Choose your username</span></label><br>
                        <input type="text" name="username" size="35" required>
                    </div>
                    <br>

                    <!-- Password -->
                    <div class="Password">
                        <label><span style="font-weight:bold">Create a password</span></label><br>
                        <input type="password" name="createpassword"  id="createpassword" size="35" required>
                        <br><br>

                        <label><span style="font-weight:bold">Confirm your password</span></label><br>
                        <input type="password" name="confirmpassword" id="confirmpassword" size="35" required>
                    </div>
                    <br>

                    <!-- Birthdate -->
                    <div class="Birthdate">
                        <select name="month" required>
                            <option disabled selected>Month</option>
                            <?php foreach ($MonthArray as $monthkey => $value) { ?>
                                <option value="<?php echo $monthkey ?>"><?php echo $value ?></option>
                            <?php } ?>
                        </select>

                        <input type="text" name="day" placeholder="Day" size="5" required>

                        <select name="year" required>
                            <?php
                            foreach (range(1990, (int) date("Y")) as $year) {
                                echo "\t<option value='" . $year . "'>" . $year . "</option>\n\r";
                                rsort($year);
                            }
                            ?>
                        </select>
                    </div>

                    <!-- Buttons -->
                    <div class="Buttons">
                        <input type="submit" id="signup" name="signupsubmit">
                        <input type="reset" id="reset" name="signupreset">
                    </div>

                </form>
            </div>
        </div>
    </body>
</html>

I've added id attribute to your both password fields and then added onsubmit="return validate_form();" function in your form tag.

You can see that a JavaScript function was added in the head tag.

Let me know if it works for you.