Question

我正在尝试创建一个提交表单，我可以使用Javascript和HTML更改位于另一个页面上的文本的innerHTML。

当我在输入中输入文字时，点击 index.html 上的提交，我正在另一页上重定向，问题是 page.html 上的 h1 没有更改此值。为什么呢？

以下是代码：

的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>

page.html中

<h1 id="title">Javascript example no.2</h1>

Javascript.js

function change(){
    var title = document.getElementById('title');
    title.innerHTML = myNewTitle;
}

我做错了什么？

Answer 1

有几种方法可以解决这个问题。最常见的是处理表单数据并生成HTML以在服务器端提供服务，但如果您愿意，可以使用JavaScript在客户端完成。

服务器端（PHP）技术

以下示例显示了PHP解决方案。这也可以用ASP，JSP和＆amp; c完成。如果您希望数据保持不变，您必须在page.php（或等效，基于所使用的语言）上捕获它并将其存储在会话cookie或数据库中（取决于所需的持久性）

的的index.html 的

<form method="POST" action="page.php"> <input type="text" id="my_text" name="my_text" /> <input type="submit" /> </form>

的 page.php文件 的

<?php /* the $_REQUEST will get the variable regardless of whether * it is sent via POST or GET. You may wish to use $_POST * instead, for security reasons. */ echo "<h1>" . $_REQUEST["my_text"] . "</h1>"; ?>

客户端（JavaScript）技术＃1

如果您想使用JavaScript，则需要将信息存储在网站上其他网页可访问的位置。这可以是cookie或localstorage。在这种情况下，cookie可能是最简单（也是最可靠）的存储技术。下面的jQuery示例显示了该技术。

的的index.html 的

<script type="text/javascript"> function store() { var text = document.getElementById("my_text").value; document.cookie = "text=" + text + "; path=/"; } </script> <form action="page.html" onsubmit="store()"> <input type="text" id="my_text" /> <input type="submit" /> </form>

的 page.html中 的

<h1 id="title"></h1> <script type="text/javascript"> /* this just grabs the value of the first cookie for your site. * if you use cookies elsewhere, you'll need to add logic to * make sure you get the correct cookie. */ var text = document.cookie.split(";")[0].split("=")[1]; document.getElementById("title").innerHTML = text; </script>

客户端（JavaScript）技术＃2

您还可以通过在URL中发送数据来避免使用cookie（使用GET而不是POST）。我借用/修改了this blog的代码片段来演示这种技术。

index.html （此页面上没有JavaScript！）

<form method="GET" action="page.html"> <input type="text" id="my_text" name="my_text" /> <input type="submit" /> </form>

的 page.html中 的

<h1 id="title"></h1> <script type="text/javascript"> function getUrlVars() { var vars = {}; var url = decodeURIComponent(window.location.href.replace(/\+/g, '%20')); var parts = url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars; } var text = getUrlVars()["my_text"]; document.getElementById("title").innerHTML = text; </script>

Answer 2

您正在当前页面上运行JavaScript。它修改了当前页面的DOM，然后加载了新页面（在表单的操作中指定）。

要修改您提交给您的页面，您必须在该页面上拥有JavaScript ，并且必须通过检查提交的数据来响应页面加载（这是不可能的 - POST数据不会在目标页面中暴露给JS。）

您可以将数据存储在其他位置（例如Cookie），然后在下一页加载时查看数据。

也就是说，这最好用服务器端代码来处理。

Answer 3

您还可以将标题存储为yournewaddress.html#myTitle并获取myTitle： $("h1").text(location.hash)

Answer 4

有几种方法可以做到这一点。最快的方法是：

的index.html

<form method="get" action="page.html">
    <input name="myTextField"/>
    <input type="submit"/>
</form>

page.html中

<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>

如何使用提交表单更改位于另一页面上的文本？

4 个答案: