Javascript 如何使用提交表单更改位于另一页上的文本？
我正在尝试创建一个提交表单，在这里我可以使用Javascript和HTML更改位于另一个页面上的文本的内部HTML 当我在输入中输入文本时，单击index.html上的submit，我在另一个页面上被重定向，问题是page.html上的h1没有更改此值。为什么? 代码如下： Index.htmlJavascript 如何使用提交表单更改位于另一页上的文本？,javascript,html,forms,Javascript,Html,Forms,我正在尝试创建一个提交表单，在这里我可以使用Javascript和HTML更改位于另一个页面上的文本的内部HTML 当我在输入中输入文本时，单击index.html上的submit，我在另一个页面上被重定向，问题是page.html上的h1没有更改此值。为什么? 代码如下： Index.html <form method="POST" action="page.html" id="form" onsubmit="change()"> <input type="text
<form method="POST" action="page.html" id="form" onsubmit="change()">
<input type="text" id="myTextField"/>
<input type="submit" id="byBtn" value="Change"/>
</form>
<h1 id="title">Javascript example no.2</h1>
我做错了什么？您正在当前页面上运行JavaScript。它修改当前页面的DOM，然后加载新页面（在表单的操作中指定） 要修改您提交给它的页面，您必须在该页面上安装JavaScript，并且它必须通过检查提交的数据来响应页面加载（这是不可能的，因为POST数据在目标页面中没有向JS公开） 您可以将数据存储在其他位置（例如cookie），然后在加载下一页时查看
也就是说，这最好用服务器端代码来处理。您还可以将标题存储为
yournewaddress.html#myTitlemyTitle有几种方法可以处理这个问题。最常见的方法是处理表单数据并生成HTML以在服务器端提供服务，但如果您愿意，可以使用JavaScript在客户端完成
服务器端（PHP）技术 下面的示例显示了一个PHP解决方案。这也可以通过ASP、JSP和c实现。如果希望数据持久化，则必须在
page.php<form method="POST" action="page.html" id="form" onsubmit="change()">
<input type="text" id="myTextField"/>
<input type="submit" id="byBtn" value="Change"/>
</form>
<h1 id="title">Javascript example no.2</h1>
客户端（JavaScript）技术#1 如果您想使用JavaScript，您需要将信息存储在网站上其他页面可以访问的位置。这可能是cookie或本地存储。在这种情况下，cookie可能是最简单（也是最可靠）的存储技术。下面的jQuery示例展示了这种技术 index.html
<form method="POST" action="page.html" id="form" onsubmit="change()">
<input type="text" id="myTextField"/>
<input type="submit" id="byBtn" value="Change"/>
</form>
<h1 id="title">Javascript example no.2</h1>
函数存储（）{
var text=document.getElementById（“我的文本”）.value；
document.cookie=“text=“+text+”；路径=/”；
}
<form method="POST" action="page.html" id="form" onsubmit="change()">
<input type="text" id="myTextField"/>
<input type="submit" id="byBtn" value="Change"/>
</form>
<h1 id="title">Javascript example no.2</h1>
/*这只是获取站点的第一个cookie的值。
*如果您在其他地方使用cookie，则需要为其添加逻辑
*确保你得到了正确的饼干*/
var text=document.cookie.split（“；”[0]。split（“=”[1]；
document.getElementById（“title”）.innerHTML=text；
客户端（JavaScript）技术#2 您也可以通过在URL中发送数据（使用GET而不是POST）来避免使用cookie。我从中借用/修改了一段代码片段来演示该技术 index.html（此页面上没有JavaScript！）
<form method="POST" action="page.html" id="form" onsubmit="change()">
<input type="text" id="myTextField"/>
<input type="submit" id="byBtn" value="Change"/>
</form>
<h1 id="title">Javascript example no.2</h1>
函数getUrlVars（）{
var vars={}；
var url=decodeURIComponent（window.location.href.replace（/\+/g，'%20'））；
var parts=url.replace（/[？&]+（[^=&]+）=（[^&]*）/gi，
功能（m、键、值）{
变量[键]=值；
});
返回变量；
}
var text=getUrlVars（）[“我的文本”]；
document.getElementById（“title”）.innerHTML=text；
<form method="get" action="page.html">
<input name="myTextField"/>
<input type="submit"/>
</form>
<body onload="change();"
<h1 id="title">Javascript example no.2</h1>
<script>
function change(){
var $_GET = {},
args = location.search.substr(1).split(/&/);
for (var i=0; i<args.length; ++i) {
var tmp = args[i].split(/=/);
if (tmp[0] != "") {
$_GET[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp.slice(1).join("").replace("+", " "));
}
}
document.getElementById("title").innerHTML = $_GET[decodeURIComponent(tmp[0])];
}
</script>
</body>
如果不将值存储在某个地方（例如cookie），page.html如何知道您在index.html的表单中输入的内容？只有当代码都在同一页上时，snipper才会工作，并且操作将设置为“”@Sia如果不工作，请告诉我，以便我可以修复代码。我没有费心去测试它，但是想法是正确的。@Sia添加了第三个选项，可能对您来说很完美。第三个选项返回我：未定义，我如何修复它？@Sia oops，我忘记了name属性。查看我更新的修复答案（这次我在本地机器上测试了！）谢谢，第三个选项是最好的！