CODEWITHSUNDEEP
javascripthtml
Joe
Joe

Reputation: 1

How do I extract user input from previous page to put on the next page?

<!DOCTYPE html>
<html>

<head>
    <title>Cookie Order Form</title>
    <link rel="stylesheet" href="First_Design.css">
    <script src="cookieform.js"></script>

</head>

<body>
    <h1>Cookie Order Form</h1>
    <p>This form is a cookie order form for customers that purchased cookies from Daron's Cookies Company and the following below must be filled out in order for each customer to receive a final message that tells them when their order will be ready.</p>


    <IMG class="Wrap1" SRC="cookie.gif" alt="cookie">
    <IMG class="Wrap2" SRC="cookie.gif" alt="cookie2">



    <!--The customer will be sent to the HTML page named "submit.html" after they
  click the "Submit this Form" button. The code below does this. -->
    <div>
        <form id="cookie_form" action="submit.html"  method="POST">

            <fieldset class="field_set_1">
                <!-- Below sets the title of the form-->
            
                <legend>Customer Order Form Information:</legend>


                <!-- Creates the first left label to specify what should be placed in the text box
                to the right of the label. The rest below does the same.-->

                <label for="firstName">First Name:</label>
                <input type="text" id="firstName" name="firstName">
                <span id="firstname_error">*</span><br>

                <label for="orderNumber">Order Number:</label>
                <input type="text" id="orderNumber" name="orderNumber">
                <span id="orderNumber_error">*</span><br>

                <label for="date_of_order">Date of Order:</label>
                <input type="text" id="date_of_order" name="date_of_order">
                <span id="date_of_order_error">*</span><br>

                <label for="email_address">Email Address:</label>
                <input type="text" id="email_address" name="email_address">
                <span id="email_address_error">*</span><br>
            <label>&nbsp;</label>
           <input type="button" id="form_submission" value="Submit this form" onclick="submission()"/ >
            </fieldset>

        </form>

    </div>
    <div class="clearfix">
    </div>
    <IMG class="Wrap1" SRC="cookie.gif" alt="cookie">
    <IMG class="Wrap2" SRC="cookie.gif" alt="cookie2">


</body>



</html>

Here is the submission button that I guess you would like to see. I went to w3schools, but it didn't have anything towards my problem.

<!DOCTYPE html>
<html>
<head>
<title>Submission of Form</title>
<link rel="stylesheet" href="second_page_design.css">

// Do I need to use javascript?
</head>
<body>
// But I want this to display different message towards different 
 user first names. How can this be done? 
<p>Thank You + firstname you will recieve your order on February 20, 2017. 
 Have a nice day!!!!!! </p>


</body>
</html>

How do I extract the different first names of user inputs from the submit button to be placed in the next page?

Upvotes: 0

Views: 1073

Answers (1)

StefanJanssen
StefanJanssen

Reputation: 456

If you need it to be with javascript only you can look at the webstorage options browsers give you: https://developer.mozilla.org/nl/docs/Web/API/Storage

Otherwise the easiest way to send data from one page to another is using PHP. Renaming your second page to something like "second-page.php" will enable the usage of PHP in that file if your server supports it.
The action in your form has to be set to that file, so action="second-page.php". Then you can use the $_POST array to extract the data you need.

<?php
  $firstName = filter_input(INPUT_POST, "firstName");
?>
<!DOCTYPE html>
<html>
<head>
<title>Submission of Form</title>
<link rel="stylesheet" href="second_page_design.css">

// Do I need to use javascript?
</head>
<body>
// But I want this to display different message towards different 
 user first names. How can this be done? 
<p>Thank You <?php echo $firstName; ?>, you will recieve your order on February 20, 2017. 
 Have a nice day!!!!!! </p>


</body>
</html>

The first part of PHP will get the value of the firstName field from your form and saves it in the $firstName variable. In the paragraph you can write the value of the variable using echo, or if short php tags are enabled, you could change that part to <?= $firstName ?>

Upvotes: 1

Related Questions