如何使用JavaScript将HTML FORM数据从一个页面发送到另一个页面

时间:2016-08-12 08:05:00

标签: javascript html forms

我正在尝试使用Javascript将HTML FORM数据从一个页面发送到另一个页面。这是我的代码。假设我在" NAME"中输入任何文字。 FORM.html页面的字段。提交后,文本将显示在DISPLAY.html页面上。怎么做?请帮忙

FORM.html

<html>
<head>
<title>FORM</title>
</head>
<body>
<form method="GET" action="display.html">
NAME: <input type="text" name="name">
<input type="submit" value="Submit">
</form>
</body>
</html>

DISPLAY.html

<html>
<head>
<title>Display</title>
</head>
<body>
<p id="show">
Name: <!-- want to display the name here -->
</p>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

您在提交FORM.html表单时将名称保存在网址中

使用在onload页面上运行的javascript函数加载DISPLAY.html表单时,可以从URL读取名称。

你必须为此替换你的DISPLAY:

<html>
<head>
<title>Display</title>
</head>
<body onload="getName()">
<p id="show">
<div id='myDiv'>Name: <!-- want to display the name here -->
</div>
</p>
</body>
<script type="text/javascript">
    function getName()
    {   
        var name = window.location.href.split("?name=")[1].s‌​plit("+").join(" ");
        var fieldNameElement = document.getElementById('myDiv');
        var oldText=fieldNameElement.innerHTML;
        fieldNameElement.innerHTML = oldText+' '+name;
    }
</script>
</html>

至少在Chrome上它对我有用

如果网址中包含更多元素,您可以使用拆分并获取&#34;&amp;&#34;

之间的元素

此致

答案 1 :(得分:0)

如果您只想通过JavaScript完成,那么您可以使用window.localStorage属性在本地存储name对象。

<强> Form.html

<html>
<head>
<title>FORM</title>
</head>
<body>
<form id="form" method="GET" action="display.html">
NAME: <input type="text" name="name" id="name">
<input type="button" value="Submit" onclick="submitForm()">
</form>
<script>
function submitForm(){
    if(typeof(localStorage) != "undefined"){
        localStorage.name = document.getElementById("name").value;
    }
    document.getElementById("form").submit();
}
</script>
</body>
</html>

<强> Display.html

<html>
<head>
<title>Display</title>
</head>
<body onload="setData()">
<p id="show">
Name: <!-- want to display the name here -->
</p>
<script>
function setData(){
    if(typeof(localStorage) != "undefined"){
        document.getElementById("show").innerHTML = localStorage.name;
    }
}
</script>
</body>
</html>