如何从上一页提取用户输入以进入下一页?

时间:2017-02-04 04:11:22

标签: javascript html

<!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>

这是我想你想看到的提交按钮。我去了w3schools,但它没有解决我的问题。

<!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>

如何从提交按钮中提取用户输入的不同名字,以便放入下一页?

1 个答案:

答案 0 :(得分:1)

如果您只需要使用javascript,则可以查看浏览器为您提供的网络存储选项:https://developer.mozilla.org/nl/docs/Web/API/Storage

否则,将数据从一个页面发送到另一个页面的最简单方法是使用PHP。将您的第二页重命名为&#34; second-page.php&#34;如果您的服务器支持PHP,将允许在该文件中使用PHP 表单中的操作必须设置为该文件,因此action="second-page.php"。 然后,您可以使用$_POST数组来提取所需的数据。

<?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>

PHP的第一部分将从表单中获取firstName字段的值,并将其保存在$ firstName变量中。在段落中,您可以使用echo编写变量的值,或者如果启用了短的PHP标记,则可以将该部分更改为<?= $firstName ?>