Question

与textbox不同，radio button和checkbox是否可以使用javascript将textarea和select标记的值带到普通HTML中的另一个页面？如果是，那怎么样？

Answer 1

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

使用GET方法

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

<form method="get">

当您提交表单时，您会在网址中看到您的数据，例如

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

通过Javascript

读取GET数据

用于阅读查询参数的JavaScript（＆＃39;？＆＃39;之后的所有内容）非常简单：

window.location.search;

使用上面的示例网址，此代码将返回＆＃39;？field1 = value＆amp; field2 = value＆＃39;

这是一个功能性（虽然不成熟）的例子：

<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

传递textarea并使用表单中的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.stringify()的JSON字符串，然后将结果存储到localStorage中。在随后的页面上，您可以加载存储的内容，使用JSON.parse()将JSON解析回对象文字，然后填写表单元素。

一些未经测试的伪代码：

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

使用javascript将表单字段值以纯HTML格式传递到下一页

3 个答案: