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

Question

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?

You should probably have the `PHP` output `JSON`, and then parse the `JSON` in your javascript and display the output that way. — Derek Pollard, Aug 14 '16 at 05:46
I think calling `stripcslashes` after `mysqli_real_escape_string` makes you vulnerable to SQL injection. In any case, checkout prepare statements, your code will be much simpler if you use them: [How can I prevent SQL-injection in PHP?](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) — Alexander O'Mara, Aug 14 '16 at 05:48
Yeah, I'm new to php and searching some good way to prevent sql injection I'll change it later. — laurence keith albano, Aug 14 '16 at 05:51

score 1 · Accepted Answer · edited Aug 14 '16 at 10:09

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.

Oh, it work! thank you so much. I thought using only ajax can perform that. — laurence keith albano, Aug 14 '16 at 06:25
Glad to hear that :) Your requirement was to simply validate two passwords which not necessarily require form submission and all. — Shrikant Mavlankar, Aug 14 '16 at 06:38

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

1 Answers1