html - 使用 javascript 以纯 HTML 格式将表单字段值带到下一页

Question

与 不同textbox，是否可以使用 javascript 以纯 HTML 格式将值和标记传送到另一个radio button页面？如果是，那怎么办？checkboxtextareaselect

Answer 1

使用 HTML 和 Javascript 读取表单值有两个步骤。

使用 GET 方法

修改您的表单以使用 GET 方法而不是 POST。POST 数据只能在服务器端读取。你要在客户端读取表单数据，所以必须确保数据存在于 URL 中：

<form method="get">

当您提交表单时，您将在 URL 中看到您的数据，例如

http://localhost/yourTarget.html?field1=value&field2=value

通过 Javascript 读取 GET 数据

读取查询参数（'?' 之后的所有内容）的 JavaScript 非常简单：

window.location.search;

使用上面的示例 URL，此代码将返回 '?field1=value&field2=value'

这是一个功能性（虽然是基本的）示例：

<form method="get">
    <textarea name="mytext">Text area value</textarea>
    <input type="submit" value="Submit" />
</form>

Input values:
<div id="inputValues"></div>

<input type="button" value="Get Input Values" id="retrieveInputValuesButton" />

<script>
    var element = document.getElementById("retrieveInputValuesButton");
    element.onclick = function()
    {
        document.getElementById("inputValues").innerHTML = window.location.search;
    }
</script>

剩下的就是解析查询字符串以检索您的值。

Answer 2

使用表单中的 GET 方法传递文本区域并选择 URL 中的菜单值作为查询参数。

        function getParameterByName(name) {
            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                results = regex.exec(location.search);
            return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }

然后在下一页，

var textAreavalue= getParameterByName('textareaName'); 

Answer 3

听起来您想使用 LocalStorage API。你可以在这里读更多关于它的内容：

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

基本上，您需要将表单数据序列化为对象文字，将该对象文字转换为 JSON 字符串，JSON.stringify()然后将结果存储到 localStorage。在随后的页面上，您可以加载您存储的内容，将 JSON 解析回对象文字，JSON.parse()然后填写您的表单元素。

一些未经测试的伪代码：

var values = someFunctionToSerializeFormData();
values = JSON.stringify(values);
window.localStorage.setItem('form-data', values);

然后在第 2 页

var values = window.localStorage.getItem('form-data');
values = JSON.parse(values);