Getting text field data from different page to display in jquery?

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?

Alon Eitan · Accepted Answer · 2011-09-30 02:38:17Z

2

I don't know if it will do any good, but the first thing i would do is to wrap the jquery code inside a

$( window ).load( function() {
});

edited Sep 30, 2011 at 2:38

answered Sep 30, 2011 at 2:32

Alon Eitan

12k8 gold badges51 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

comu · Accepted Answer · 2011-09-30 02:33:02Z

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!

Would this work if all the pages are in the same php file? I was under the impression _POST was for passing variables between page refreshes?

Collectives™ on Stack Overflow

Getting text field data from different page to display in jquery?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related