Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
366 views
in Technique[技术] by (71.8m points)

javascript - 将表单数据传递到另一个HTML页面(passing form data to another HTML page)

I have two HTML pages: form.html and display.html.

(我有两个HTML页面:form.html和display.html。)

In form.html, there is a form:

(在form.html中,有一种形式:)

<form action="display.html">
    <input type="text" name="serialNumber" />
    <input type="submit" value="Submit" />
</form>

The form data is sent to display.html.

(表单数据将发送到display.html。)

I want to display and use the form data serialNumber in display.html, as shown below:

(我想在display.html中显示和使用表单数据serialNumber ,如下所示:)

<body>
    <div id="write">
        <p>The serial number is: </p>
    </div>
    <script>
    function show() {
        document.getElementById("write").innerHTML = serialNumber;
    }
    </script>
</body>

So how can I pass the serialNumber variable from form.html to display.html so that the above code in display.html will show the serial number and the JavaScript function show() gets the serialNumber from the first HTML?

(那么,如何可以通过serialNumber变量从form.html到display.html使得display.html上面的代码会显示序列号和JavaScript函数显示()获取serialNumber从第一HTML?)

  ask by tonga translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

If you have no option to use server-side programming, such as PHP, you could use the query string, or GET parameters.

(如果没有使用服务器端编程(例如PHP)的选项,则可以使用查询字符串或GET参数。)

In the form, add a method="GET" attribute:

(在表单中,添加method="GET"属性:)

<form action="display.html" method="GET">
    <input type="text" name="serialNumber" />
    <input type="submit" value="Submit" />
</form>

When they submit this form, the user will be directed to an address which includes the serialNumber value as a parameter.

(当他们提交此表单时,会将用户定向到一个地址,该地址包括serialNumber值作为参数。)

Something like:

(就像是:)

http://www.example.com/display.html?serialNumber=XYZ

You should then be able to parse the query string - which will contain the serialNumber parameter value - from JavaScript, using the window.location.search value:

(然后,您应该能够使用window.location.search值从JavaScript解析查询字符串(其中将包含serialNumber参数值):)

// from display.html
document.getElementById("write").innerHTML = window.location.search; // you will have to parse
                                                                     // the query string to extract the
                                                                     // parameter you need

See also JavaScript query string .

(另请参见JavaScript查询字符串 。)


The alternative is to store the values in cookies when the form is submit and read them out of the cookies again once the display.html page loads.

(另一种方法是在提交表单时将值存储在cookie中,并在display.html页面加载后再次从cookie中读取它们。)

See also How to use JavaScript to fill a form on another page .

(另请参见如何使用JavaScript填写另一页上的表单 。)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...