PHP - Posting Data across multiple Form pages

Question

Truthfully, I haven't got a clue when it comes to PHP, but I can see the power of it, I just want to learn how to control it. I've got a three page booking form. Pages one to two are working, but two to three isn't working. Here's the PHP code from page two -

<?php

// Total Number of Nights Between Picked Dates

$days = (strtotime($_POST["checkoutdate"]) - strtotime($_POST["checkindate"])) / 86400 - 1;

// Extra Nightly Cost

define ("extranights", 80);
$addnights = (int)extranights * ($days - 4);

// Deposit Price Calculation

define("deposit", 370); 
$deposit = null;

if (isset($_POST["numberofpeople"])) {
$numberofpeople = intval($_POST["numberofpeople"]);
$deposit = ((int)deposit * $numberofpeople + $addnights) * 0.3;
}     

// Total Price Calculation

define("totalprice", 370);  
$result = null;

if (isset($_POST["numberofpeople"])) {
$numberofpeople = intval($_POST["numberofpeople"]);
$result = (int)totalprice * $numberofpeople + $addnights;
}     

?>

Then I've echoed the values of deposit and totalprice on the same page

..... ( confirm reservation ) 30% Deposit : € Total Price : €

What I've been agonising over is how to post the echoed values of deposit and totalprice on to a third page. If the solution/answer is extensive then I'll have to go back to the drawing board and start again, bit by bit. But this would finish the user side of the form. I'm not looking forward to the database stuff :(

Without seeing all your code, my gut feeling is to wonder if your overall approach might be wrong. Generally, we want to control the entire user experience via javascript/jQuery -- create the new pages using Tabs ([see jQueryUI example](http://jqueryui.com/tabs/)) and then -- when all data present -- send it to PHP for entry into the database. If additional bits of data, determined by what the user has entered so far, are needed from the DB as we go along, then [we can use AJAX](http://stackoverflow.com/questions/17221813/place-php-results-inside-html-page/17221883#17221883) to get those bits. — cssyphus, Oct 04 '13 at 19:54
Yeah I agree, as I'll probably encounter unforseen problems as I go on, due to my lack of knowledge on PHP. I've used a hidden input field to echo the outputs then echo again with the $_Post on the third page. I don't know if it's the best way and what the future implications could be, but I'll bare in mind your suggestion - Thanks — onejed, Oct 04 '13 at 21:21

score 0 · Answer 1 · answered Oct 04 '13 at 19:54

0

I would suggest you to look into php session:

you would do something like this on page 2:

<?php
  session_start();
    $deposit= $_SESSION['deposit'] = $depositVar; 
    $total = $_SESSION['total'] = $totalVar; 
  ?>

Then on page 3 you ca call the values like this:\

            echo  $deposit= $_SESSION['deposit'];
               echo  $total= $_SESSION['total']

PhP Documentation

answered Oct 04 '13 at 19:54

yardie

1,583
1
14
29

One of the answers I got was to echo the values within a hidden input field, then echo the values on the third page, and it worked like a charm. Thanks for your suggestion – onejed Oct 04 '13 at 21:11

score 0 · Answer 2 · edited May 23 '17 at 11:57

Please consider the advantages to this alternative approach. Your booking form could be setup using multiple "pages", which only appear as pages to the user.

jsFiddle example

That is, to the user, he/she would be going from one screen to the next, but that would be an illusion created by javascript (e.g. jQueryUI Tabs). In reality, all fields are in the same page/same form, as in the jsFiddle. Then, you could collect all information when user hits the Submit button and:

verify all fields are completed;
verify correct format for data in fields;
if anything wrong, (1) display message via alert() or jQueryUI dialog, and (2) send user back to the form via return false;
if nothing wrong, submit form via: $('#IdOfForm').submit();

By doing all data collection and verification client-side, you can greatly simplify your PHP code. Also, if user is sent back to complete missed fields, all the data they typed so far is still there...

Note that you must still verify the data on the PHP side to prevent SQL injection. See this article and this SO Post for more information.

Stand-alone, working code example:

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <style>
        </style>

        <script type="text/javascript">
            $(document).ready(function() {

                var arrFormFields = ['cn','ca','ce','cp','dd','rd'];

                $("#tabs").tabs();
                $("#theMsg").dialog({
                    autoOpen: false,
                });
                $('#doit').click(function() {
                    for (var fld in arrFormFields) {
                        if ( $('#' + arrFormFields[fld]).val() == ''){
                            console.log('Var ' +arrFormFields[fld]+ ' has value: ' + $('#'+arrFormFields[fld]).val() );
                            $('#' + arrFormFields[fld]).css({'border':'1px solid red','background':'yellow'})
                            $('#ui-id-1').trigger('click');
                            $('#' + arrFormFields[fld]).focus();
                            alert('Please complete all fields'); //For some reason the alert isn't displaying
                            return false;
                        }else{
                            //Submit form to "dothebooking.php", like this:
                            //$('#TripForm').submit();
                            $('#theMsg').html('<h2>Form was successfully submitted</h2>');
                            $('#theMsg').dialog({'title':'Notice'}).dialog('open');
                        }
                    }
                });

                $('input:text').blur(function() {
                    $("input:not(:button)").css({'border':'1px solid grey','background':'white'});
                });

            }); //END $(document).ready()

        </script>
    </head>
<body>

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Customer Details</a></li>
            <li><a href="#tabs-2">Trip Details</a></li>
            <li><a href="#tabs-3">Trip Options</a></li>
        </ul>
        <form id='TripForm' action="dothebooking.php" method="POST">
            <div id="tabs-1">
                Customer Name: <input type='text' id="cn"><br>
                Customer Address: <input type='text' id="ca"><br>
                Customer Email: <input type='text' id="ce"><br>
                Customer Phone: <input type='text' id="cp"><br>
            </div><!-- #tabs-1 -->
            <div id="tabs-2">
                Departure Date: <input type='text' id="dd"><br>
                Return Date: <input type='text' id="rd"><br>
            </div><!-- #tabs-2 -->
            <div id="tabs-3">
                Guided Tour option <input type='checkbox' id="gt"><br>
                Presidential Suite <input type='checkbox' id="ps"><br>
                Bed and Breakfast <input type='checkbox' id="bb"><br>
                <input type='button' id="doit" value="Submit Trip"><br>
            </div><!-- #tabs-3 -->
        </form><!-- #TripForm -->
    </div><!-- #tabs -->
    <div id="theMsg"></div>

</body>
</html>

The jQuery validation plugin might also be of interest to you.

Check out these demos for a quick look/see.

PHP - Posting Data across multiple Form pages

2 Answers2