PHP for showing pop-up message based on regular expression

Question

Currently I created the form for making the reservation. The problem was, if user filled up the form incorrectly, it changes the whole page into error message and a link to re-enter the form. Then the form reset back to empty.

here is the partial code

    if (!preg_match('/^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/', $_POST['dor']))
    {
        echo 'Input your Date of Reservation correctly!';
        ?>
        Click <a href="reservation.php">here</a> to try again!
        <?php
        exit();
    }

    else if (!preg_match('/^[a-z A-Z]{3,30}$/', $_POST['fullname'])) 
    {
        echo 'Input your full name correctly!!';
        ?>
        </br>
        Click <a href="reservation.php">here</a> to try again!
        <?php
        exit();
    }

    else if (!preg_match('/^[0-9]\d{9}$/', $_POST['contactno'])) 
    {

        echo 'Enter your contact number correctly!!';
        ?>
        </br>
        Click <a href="reservation.php">here</a> to try again!
        <?php
        exit();
    }

    else if (!preg_match('/^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/', $_POST['dco']))
    {
        echo 'Input your Check-out date correctly!';
        ?>
        Click <a href="reservation.php">here</a> to try again!
        <?php
        exit();
    }


    else if (strtotime($_POST['dor']) < time()) 
    {
        echo 'Date of reservation cannot be in the past!';
        ?>
        </br>
        Click <a href="reservation.php">here</a> to try again!
        <?php
        exit();
    }

    else if (strtotime($_POST['dco']) < strtotime($_POST['dor'])) 
    {
        echo 'Check-out date cannot be before Date of Reservation!';
        ?>
        </br>
        Click <a href="reservation.php">here</a> to try again!
        <?php
        exit();
    }

I just tried by using this code at echo part

    else if (!preg_match('/^[0-9]\d{9}$/', $_POST['contactno'])) 
    {
     echo "<script type='text/javascript'>alert('Enter your contact number correctly')</script>";

      exit();
    }

The pop up shows up but the page turned into blank. Now I want to change to show the pop up message without reset the form into empty

What's the proper code for it?

UPDATED

I'm using iframe, and the popup works, however once I enter the data correctly, the function named view_reservation() doesn't work. So the data successfully recorded into database but the reservation summary can't be viewed

Here is the full code

    <?php 
    include 'core/init.php';

    protect_page();
    include 'includes/overall/header.php' ; 



    //if form is being submitted
    if(empty($_POST)=== false)
    {
        //to validate whether user enters smtg or not otherwise no point continue to do the next validation
        //create an array
        $required_fields = array ('user_id','fullname','contactno','passport','dor','dco');
        foreach($_POST as $key=>$value)
        {

            //if the key (value) in array of $required_fields is true which is empty
            if(empty($value) && in_array ($key, $required_fields) === true )
            {
                $errors[] = 'You must filled up all of the fields';
                //the validation can happen to more than 1 field
                break 1;
            }
        }

        if(empty($errors) === true)

        {
            if (!preg_match('/^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/', $_POST['dor']))
            {
                ?>
                <script>alert('Input date of reservation correctly');</script>
                <?php
                exit();
            }

            else if (!preg_match('/^[a-z A-Z]{3,30}$/', $_POST['fullname'])) 
            {
                ?>
                <script>alert('Input your full name correctly');</script>
                <?php
                exit();
            }

            else if (!preg_match('/^[0-9]\d{9}$/', $_POST['contactno'])) 
            {

            ?>
            <script>alert('Enter Contactno correctly');</script>
            <?php
            exit();
            }

            else if (!preg_match('/^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/', $_POST['dco']))
            {
                ?>
                <script>alert('Input your check-out date correctly');</script>
                <?php
                exit();
            }


            else if (strtotime($_POST['dor']) < time()) 
            {
                ?>
                <script>alert('Reservation date cannot in the past!!');</script>
                <?php
                exit();
            }

            else if (strtotime($_POST['dco']) < strtotime($_POST['dor'])) 
            {
                ?>
                <script>alert('Check-out date cannot before the reservation date!!');</script>
                <?php
                exit();
            }

        }
    }
    //what does this line does is that to check whether success is in the end of the URL
    if(isset($_GET['success']) && empty($_GET['success']))
    {

        view_reservation();

    }
    else
    {//if there are no errors
        if (empty($_POST) === false && empty($errors) === true)
        {
            check_availability();
        }

        //
        else if (empty($errors) === false)
        {
            echo output_errors($errors);
        }

    ?>
    <link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
    <script type="text/javascript" src="js/jsDatePick.min.1.3.js"></script>

    <script type="text/javascript">
        window.onload = function(){
            new JsDatePick({
                useMode:2,
                target:"dor",
                dateFormat:"%Y-%m-%d"

            });

            new JsDatePick({
                useMode:2,
                target:"dco",
                dateFormat:"%Y-%m-%d"

            });
        };


    </script>



    <h1 style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif">RESERVATION </h1>

    <span style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif">

    <form action="" method="post" target="ifr">
    <fieldset>
    </span>
    <legend> 
    <span style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif"><font size="6">Please input your information correctly</font> </span></legend>

    <p>
    <iframe name="ifr" id="ifr" style="display:none"></iframe>
    <form action="" method="post" >
        <ul>
            <li>
                Full name*: <br>
                <input type="text" name="fullname">
            </li>
            <li>
                Contact No.: <br>
                <input type="text" name="contactno">
            </li>
            <li>
                IC/Passport*: <br>
                <input type="text" name="passport">
            </li>
            <li>
                Room Type*: <br>
                <select name="roomtype" id="roomtype">
                <option value="">Select</option>
                <option value="Single">Single (RM 100)</option>
                <option value="Superior">Superior (RM 200)</option>
                <option value="Deluxe">Deluxe (RM 300)</option>
              </select>
            </li>
                <br>
            <li>
                Date of reservation*: <br>
                <input type="text" size="12" id= "dor" name="dor"/>
            </li>
            <li>
                Check-out Date*: <br>
                <input type="text" size="12" id= "dco" name="dco"/>
            </li>

              <input type="submit" value="Submit">
            <input type="reset" value="Clear" >
            <li>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
        </ul>
    </form>

    <?php
    }
    include 'includes/overall/footer.php' ;
    ?>

Answer 1

if you dont want to lose your form data,after submission of form,then there are many ways to do this. And one of them is using iframe

simply put this in your html code

<iframe name="ifr" id="ifr" style="display:none">

and in your form tag put target like below

<form ...your code... target="ifr">

now you dont lose your form data after form submission

UPDATE

example code by OP request

<iframe name="ifr" id="ifr" style="display:none"></iframe>
<form name="form1" method="POST" target="ifr">
<input type="text" name="email">
<input type="submit" name="submit" value="submit">

<?php
   if(isset($_POST['submit']))
   {
        if(empty($_POST['email']))
        {
        ?>
        <script>alert('Enter Email');</script>
        <?php
        }
    }
?>

working (tested)

---

UPDATE2

your code is different ,so sorry this iframe may wont helps you so use the other simple alternative and rollback what you've done

put session_start(); in the starting line of your form

and then in your form element do like this

for example if you have the input element like this

<input type="text" name="contact">

then put session inside this as its value,like below

<input type="text" name="contact" value="<?=$_SESSION['contact']?>">

and in your test.php page also put the session_start(); in the starting and do like this

$_SESSION = $_POST;

Enough now you wont lose your form data after form submission