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

我试图使用Javascript将HTML FORM数据从一个页面发送到另一个页面。这是我的代码。假设我在FORM.html页面的“名称”字段中输入了任何文本。提交后，文本将显示在DISPLAY.html页面上。怎么做？请帮助如何使用JavaScript将HTML FORM数据从一个页面发送到另一个页面

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>

来源

2016-08-12 Saptarshi Mazumder

如果不使用服务器技术，如PHP，你可以使用JavaScript设置cookie或使用浏览器的会话存储。但这通常不是形式和应用程序的工作方式。结帐：https：//developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage – Cagy79

您在URL中保存名称，当您提交的FORM.html形式

你当您使用运行的JavaScript函数加载DISPLAY.html表单时，可以从URL读取名称onload页面。

您必须更换DISPLAY.html这一个：

<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

如果您有更多的元素在url中，你可以使用拆分和获得之间的“&”

问候

来源

2016-08-12 09:27:14

为什么使用3个变量来获得名称，当你可以做到这一点？ var name = window.location.href.split（“？name =”）[1]; – Nick

是的，您的解决方案更为高效。我用你的编辑我的，谢谢！ –

谢谢...此代码正在工作..但问题是它不打印空间。假设我输入“Danny Boyle”。它显示“Danny + Boyle”。 –

如果你只是想通过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>

来源

2016-08-12 10:20:03

感谢您的代码。它正在为我工作，但问题是，当我按“Enter”按钮提交名称时，它显示的是以前的名称。新名称未显示。 –

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

回答

相关问题