Question

I have a page with the following code:

<div data-role="page" id="personaldetails">
    <div data-role="header">
        <h1>ENTER PERSONAL DETAILS</h1>
    </div><!-- /header -->

    <div data-role="content">

        <div data-role="fieldcontain">
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" value=""  />

            <label for="name">Phone Number:</label>
            <input type="text" name="phone" id="phone" value=""  />

            <label for="address">Address:</label>
            <textarea cols="40" rows="10" name="address" id="address"></textarea>
        </div>  

        <p><a href="#confirmscreen" data-role="button">Input Incident Details</a> </p>

    </div><!-- /content -->

    <div data-role="footer">
        <h4></h4>
    </div><!-- /footer -->
</div><!-- /page -->

And I try to do this in another page:

<div data-role="page" id="confirmscreen">
    <div data-role="header">
        <h1>DETAILS TO SEND</h1>
    </div><!-- /header -->

    <div data-role="content">

        <div data-role="fieldcontain">
            <script type="text/javascript">
                $('<p>').html($('#phone').val()).appendTo('body');
            </script>
        </div>  

        <p><a href="http://google.com/" data-role="button">Fin</a> </p>

    </div><!-- /content -->

    <div data-role="footer">
        <h4></h4>
    </div><!-- /footer -->
</div><!-- /page -->

I’m trying to output the phone text area but I’m getting a blank space instead of the phone number I entered.

Do I need to maybe submitt he form or something to get it to work? If so how would I do it?

Answer 1

You need to perform a PHP Post. A PHP Post() is a method used in PHP to pass info from one page to another. This is how I would set it up

Assuming you have your Original Page, I am going to call it index.php. You probably have it as index.html right now. Change the ending to .php, and re-open your document. Now, follow along

You have right now this:

<div data-role="page" id="personaldetails">
    <div data-role="header">
        <h1>ENTER PERSONAL DETAILS</h1>
    </div><!-- /header -->

    <div data-role="content">

        <div data-role="fieldcontain">
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" value=""  />

            <label for="name">Phone Number:</label>
            <input type="text" name="phone" id="phone" value=""  />

            <label for="address">Address:</label>
            <textarea cols="40" rows="10" name="address" id="address"></textarea>
        </div>  

        <p><a href="#confirmscreen" data-role="button">Input Incident Details</a> </p>

    </div><!-- /content -->

    <div data-role="footer">
        <h4></h4>
    </div><!-- /footer -->
</div><!-- /page -->

Now where you have this:

        <label for="name">Name:</label>
        <input type="text" name="name" id="name" value=""  />

        <label for="name">Phone Number:</label>
        <input type="text" name="phone" id="phone" value=""  />

        <label for="address">Address:</label>
        <textarea cols="40" rows="10" name="address" id="address"></textarea>

You are going to want to enclose it in a form, and make it look like this

 <form action="page2.php" method="post">
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" value=""  />

        <label for="name">Phone Number:</label>
        <input type="text" name="phone" id="phone" value=""  />

        <label for="address">Address:</label>
        <textarea cols="40" rows="10" name="address" id="address"></textarea>
        <input type="submit" value="Report Incident Details" />
</form>

If you notices, I enclosed the inputs in a Form tag and added action=”page2.php” method=”post” to the tag’s attributes. This means when the form is submitted, the data will be sent to the second page you want it to be on. We also included the Submit Button within the form area.

Now the second page should look like this

<div data-role="page" id="confirmscreen">
    <div data-role="header">
        <h1>DETAILS TO SEND</h1>
    </div><!-- /header -->

    <div data-role="content">

        <div data-role="fieldcontain">
            <?php echo $_POST["name"]; ?><br />
            <?php echo $_POST["phone"]; ?><br />
            <?php echo $_POST["address"]; ?><br />
        </div>  

        <p><a href="http://google.com/" data-role="button">Fin</a> </p>

    </div><!-- /content -->

    <div data-role="footer">
        <h4></h4>
    </div><!-- /footer -->
</div><!-- /page -->

That should do that trick. Have fun!