假设我有2个html文件:form.html和confirm.html
form.html只有一个文本字段和一个提交按钮,当您点击提交时,它将显示您刚刚在文本字段中输入的内容。
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<script type="text/javascript">
function display(){
document.write("You entered: " + document.myform.data.value);
}
</script>
</HEAD>
<BODY>
<center>
<form name="myform">
<input type="text" name="data">
<input type="submit" value="Submit" onClick="display()">
</form>
</BODY>
</HTML>
现在我想要点击提交按钮,它会在confirm.html中显示输入的值。我该怎么办?我的意思是在confirm.html中应该是什么以及如何在其他位置使用form.html的数据,我是否需要创建一个单独的JavaScript文件来存储JS函数,以便我可以在两个html文件中使用它。我对各种各样的东西都是新手。
注意:这里没有PHP或服务器端语言或超级,我的桌面只有2个html文件,我想使用FireFox进行测试。
谢谢!
答案 0 :(得分:4)
您可以尝试使用localStorage
或cookies
。检查下面找到的2个解决方案之一...
1 - 如果您有HTML5,则可以将input
的内容存储到localStorage
。
试试这个例子:
form.html
:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
// Called on form's `onsubmit`
function tosubmit() {
// Getting the value of your text input
var mytext = document.getElementById("mytext").value;
// Storing the value above into localStorage
localStorage.setItem("mytext", mytext);
return true;
}
</script>
</head>
<body>
<center>
<!-- INLCUDING `ONSUBMIT` EVENT + ACTION URL -->
<form name="myform" onsubmit="tosubmit();" action="confirm.html">
<input id="mytext" type="text" name="data">
<input type="submit" value="Submit">
</form>
</body>
</html>
confirm.html
:
<html>
<head>
<script>
// Called on body's `onload` event
function init() {
// Retrieving the text input's value which was stored into localStorage
var mytext = localStorage.getItem("mytext");
// Writing the value in the document
document.write("passed value = "+mytext);
}
</script>
</head>
<body onload="init();">
</body>
</html>
2 - 此外,正如@apprentice所提到的,您还可以使用符合HTML标准的Cookie。
试试这个例子:
form.html
:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
// Function for storing to cookie
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
// Called on form's `onsubmit`
function tosubmit() {
// Getting the value of your text input
var mytext = document.getElementById("mytext").value;
// Storing the value above into a cookie
setCookie("mytext", mytext, 300);
return true;
}
</script>
</head>
<body>
<center>
<!-- INLCUDING `ONSUBMIT` EVENT + ACTION URL -->
<form name="myform" onsubmit="tosubmit();" action="confirm.html">
<input id="mytext" type="text" name="data">
<input type="submit" value="Submit">
</form>
</body>
</html>
confirm.html
:
<html>
<head>
<script>
// Function for retrieveing value from a cookie
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
// Called on body's `onload` event
function init() {
// Retrieving the text input's value which was stored into a cookie
var mytext = getCookie("mytext");
// Writing the value in the document
document.write("passed value = "+mytext);
}
</script>
</head>
<body onload="init();">
</body>
</html>
答案 1 :(得分:2)
您可以使用get
方法(method="get"
)提交表单,然后将其发送到confirm.html
页面(action="./confirm.html"
)。
然后,您可以使用jQuery从confirm.html
页面的URL中检索值。
本网站提供了一种方法:http://jquerybyexample.blogspot.com/2012/06/get-url-parameters-using-jquery.html。
然后,您所要做的就是调用display()
方法。
答案 2 :(得分:0)
适合persist.js的接缝,可让您在用户的浏览器中保存和加载数据。包含其javascript文件后,您可以保存以下数据:
var store = new Persist.Store('My Application');
store.set('some_key', 'this is a bunch of persistent data');
您可以稍后在另一个html页面中检索已保存的数据,如下所示:
var store = new Persist.Store('My Application');
val = store.get('some_key');
答案 3 :(得分:0)
您也可以更改页面内容,而不是更改页面。提交后,只需使用innerHtml变量更改页面。