Question

我正在尝试获取用户放入输入框中的任何内容并在下一页上使用它，因此我可以使用输入值的javascript，但我不知道如何。我见过很多人说使用php和服务器端脚本，但我不知道如何设置它。我知道php语言。

<html>
<head>
</head>
<body>
<form method="GET" action="level5.html">
Troops: <input type="text" name="troops" value="0">
<input type="submit" value="send">
</body>
</html>

然后在下一页我试图得到“你选择了500人”，然后让500成为一个javascript变量。

Answer 1

这是一个读取url参数（source）的脚本：

HTTP_GET_VARS = [];

strGET = document.location.search.substr(1, document.location.search.length);

if (strGET !== '') {
  gArr = strGET.split('&');
  for (i = 0; i < gArr.length; ++i) {
    v = '';
    vArr = gArr[i].split('=');
    if (vArr.length > 1) {
      v = vArr[1];
    }
    HTTP_GET_VARS[unescape(vArr[0])] = unescape(v);
  }
}

function GET(v) {
  if (!HTTP_GET_VARS[v]) {
    return 'undefined';
  }
  return HTTP_GET_VARS[v];
}

<强> HTML

我将两端放在同一个文件中。这将重新加载具有参数集的页面。显然，如果你留在同一页面上，你可以这样做，而无需重新加载。

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <form method="GET" action="index.html">
      Troops: <input type="text" name="troops" value="0">
      <input type="submit" value="send">
    </form>

    <script type="text/javascript">
      document.writeln ('Troops: ' + GET('troops'));
    </script>
  </body>

</html>

这是plnkr试用。

编辑：我改变了plnkr，使其具有与两个单独文件的问题完全相同的结构。

由于您希望在其他几个页面上使用该值，因此上述简单方法可能会受到限制。因为您必须再次将所有数据发送到下一页。虽然这是绝对可行的，但其他建议的方法之一可能更优雅。

DOM存储

如果你使用相当现代的浏览器（IE8 +，FF3.5 +，C4 +），你可以使用DOM storage。

window.sessionStorage.setItem(field, value)保存值 window.sessionStorage.getItem(field)读取值 window.sessionStorage.removeItem(field)删除值 window.sessionStorage.clear()删除所有内容

或以同样的方式

localStorage.setItem(field, value)
localStorage.getItem(field)
localStorage.removeItem(field)
localStorage.clear()

sessionStorage和localStorage之间的区别在于sessionStorage仅限于当前的浏览器标签。 localStorage更持久，可以从浏览器的任何选项卡访问，具体取决于浏览器和设置，即使是在一个全新的会话中。

一切都将保存为字符串！如果你保存一个数字，例如一个整数，你需要在检索后再次解析它（parseInt（））。

以下是使用sessionStorage的plnkr示例。

<强>缓存

Cookie稍微复杂一些，在stackoverflow上我找到了一个非常好overview的链接。

这是plnkr使用前面提到的quirksmode网站提供的非常简单的脚本。

createCookie(field, value, x)将值保存到有效期为x天的Cookie中 readCookie(field)从cookie中读取值

请注意，此plnkr中的script.js与第一个plnkr中的script.js不同！

Answer 2

您可以使用cookies。

 <input type="text" id="name">
<input type="submit" name="Submit" id="button2" value="Submit" onClick="javascript:verify()"/>

在javascript函数verify（）中，您可以设置如下的cookie

 function verify()
 {
   var yourname = document.getElementById('name').value;  
   document.cookie = "name="+yourname;
 }

稍后您可以在代码中的任何位置访问它。

参考http://www.tutorialspoint.com/javascript/javascript_cookies.htm

表格输入显示在下一页上

2 个答案: