提交HTML表单时JavaScript显示新页面 [英] JavaScript display new page when submit HTML form
问题描述
假设我有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 =textname =data>
< input type =submitvalue =SubmitonClick =display（）>
< / form>
< / BODY>
< / HTML>
现在我想要点击提交按钮时，它会在confirm.html中显示输入值。我该怎么办？我的意思是confirm.html应该是什么以及form.html中的数据如何在其他位置使用，我是否需要创建一个单独的JavaScript文件来存储JS函数，以便我可以在两个html文件中使用它。注释：没有PHP或服务器端语言或超级在这里，只有2个HTML文件在我的桌面，我想要使用FireFox进行测试。
谢谢！ 使用 localStorage 或 cookies 。检查以下两种解决方案之一...
1 - 如果您有HTML5，则可以存储您的内容 input 放入 localStorage 。
试试这个例子：
form.html ：
< HTML>
< head>
< title>测试< /标题>
< script type =text / javascript>
//调用窗体的`onsubmit`
函数tosubmit（）{
//获取文本输入的值
var mytext = document.getElementById（ mytext的）值。
//将上面的值存入localStorage
localStorage.setItem（mytext，mytext）;
返回true;
}
< / script>
< / head>
< body>
< center>
<！ - INLCUDING'ONSUBMIT` EVENT + ACTION URL - >
< form name =myformonsubmit =tosubmit（）;行动= confirm.html >
< input id =mytexttype =textname =data>
< input type =submitvalue =提交>
< / form>
< / body>
< / html>
confirm.html ：
< html>
< head>
< script>
//调用body的`onload`事件
函数init（）{
//获取存储在localStorage中的文本输入值
var mytext = localStorage .getItem（ mytext的）;
//将值写入文档
document.write（passed value =+ mytext）;
}
< / script>
< / head>
< body onload =init（）;>
< / body>
< / html>
2 - 另外，就像@apprentice提到的那样，您也可以使用符合HTML标准的cookies。
试试这个例子：
b $ b form.html ：
< html> ;
< head>
< title>测试< /标题>
< script type =text / javascript>
//存储到cookie的函数
函数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;
}
//调用窗体的`onsubmit`
函数tosubmit（）{
//获取文本输入的值
var mytext = 。的document.getElementById（ mytext的）值;
//将上面的值存储到cookie中
setCookie（mytext，mytext，300）;
返回true;
}
< / script>
< / head>
< body>
< center>
<！ - INLCUDING'ONSUBMIT` EVENT + ACTION URL - >
< form name =myformonsubmit =tosubmit（）;行动= confirm.html >
< input id =mytexttype =textname =data>
< input type =submitvalue =提交>
< / form>
< / body>
< / html>
confirm.html ：
< html>
< head>
< script>
//从cookie中检索值的函数
函数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）;
$ b //调用body的`onload`事件
函数init（）{
//检索文本输入的值存储在cookie中
var mytext = getCookie（mytext）;
//将值写入文档
document.write（passed value =+ mytext）;
}
< / script>
< / head>
< body onload =init（）;>
< / body>
< / html>
Suppose I have 2 html files: form.html and confirm.html
form.html just have a text field and a submit button, when you hit submit it will display what you just typed in text field.
<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>
Now I want that when hit submit button it will display entered value in confirm.html. What should I do? I mean what should be in confirm.html and how data from form.html be used in other location, do I need create a separate JavaScript file to store JS function so I can use it in both 2 html files. I am kind of new to all kind of stuff.
Note: No PHP or server side language or anything super here, just 2 html files in my Desktop and I want to test using FireFox.
Thank you!
You can try using localStorage or cookies. Check one of the 2 solutions found below...
1 - If you have HTML5, you can store the content of you input into the localStorage.
Try this example:
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 - Also, as @apprentice mentioned, you can also use cookies with HTML standards.
Try this example:
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>
这篇关于提交HTML表单时JavaScript显示新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
