jQuery将表单数据传递到新页面

情况： 我有两张完全相同的表格，分别在两页上

• 第1页：此页上的表单有一个选择字段，提交时应将您带到第二页，并将另一个相同的表单设置为相同的选择

• 第2页：此页有一个带有选择字段（无提交按钮）的表单。更改选择后，我使用jquery获取选项的内容，并显示一个带有相应类的div。使用以下代码：

  $('.result').hide();
  $('#servicearea').change(function() {   
      $('.result').hide();
  
      var optionValue = $ (this).attr('value');
      $('#'+optionValue).show('fast');
  
  });
  

问题是：

• 如何选择表单数据
• 链接到第2页
• 并将表单数据注入现有表单

---

对于jQuery，我是个新手，所以我不知道从哪里开始。请友善点。谢谢

为什么不使用简单的旧HTML使事情变得非常简单

<form action="/second_page_url" method="GET">
   ... form fields ...
   <input type="submit" />
</form>

... 表单字段。。。

• 将操作属性设置为第二页URL。使用提交按钮或Java脚本提交表单
• 如果表单使用GET方法，则所有字段值都将在window.location中可用（您可以放入JS对象中），或者在服务器上处理表单POST数据并添加到页面中
• 使用提供的数据设置第二页控件

也可以使用cookie、HTML5本地存储，但您应该考虑到用户可以打开多个widnow/选项卡

---

您还可以使用jQuery的serialize（）方法序列化表单值，但我认为没有任何理由这样做，除非您使用AJAX请求发送数据。

为什么不使用简单的旧HTML使事情变得非常简单

<form action="/second_page_url" method="GET">
   ... form fields ...
   <input type="submit" />
</form>

... 表单字段。。。

• 将操作属性设置为第二页URL。使用提交按钮或Java脚本提交表单
• 如果表单使用GET方法，则所有字段值都将在window.location中可用（您可以放入JS对象中），或者在服务器上处理表单POST数据并添加到页面中
• 使用提供的数据设置第二页控件

也可以使用cookie、HTML5本地存储，但您应该考虑到用户可以打开多个widnow/选项卡

---

您还可以使用jQuery的serialize（）方法序列化表单值，但我看不出有任何理由这样做，除非您使用AJAX请求发送数据。

使用@Maksym Kozlenko提出的想法，第一页使用普通的旧HTML表单，然后使用GET方法提交到第二页。然后，您可以使用javascript获取使用此函数发送的get数据，我已经使用此函数一段时间了，我在上找到了它

---

使用@Maksym Kozlenko提出的想法，第一页使用普通的旧HTML表单，然后使用GET方法提交到第二页。然后，您可以使用javascript获取使用此函数发送的get数据，我已经使用此函数一段时间了，我在上找到了它

---

就我个人而言，我使用找到的

QueryParser（）

构造函数

这比Matthew Nie发布的

gup（）

函数有以下优势：

• 解析查询字符串一次，并将所有参数存储为对象的属性

它还允许：

• 要更改或清除的存储参数
• 要添加的新参数
• 要根据当前存储的参数生成的新查询字符串
• 使用

  href

  生成的链接，其中包含从当前存储的参数生成的查询字符串

与jQuery一起使用

QueryParser（）

，如下所示：

第1页

• 按Maksym Kozlenko所述提交表格

第2页

• 在页面上安装

  jQuery

  和

  QueryParser（）

• 对于每个表单字段，

  $（“#formID[name='fieldName']）.val（$q.fieldName）

或者，为了避免手动分别对每个表单字段进行编码：

$.each($("#myform")[0].elements, function(index, element) {
    $(element).val($q[element.name]);
});

因此，第2页上的表格将填充第1页上输入/选择的值

---

我个人使用找到的

QueryParser（）

构造函数

这比Matthew Nie发布的

gup（）

函数有以下优势：

• 解析查询字符串一次，并将所有参数存储为对象的属性

它还允许：

• 要更改或清除的存储参数
• 要添加的新参数
• 要根据当前存储的参数生成的新查询字符串
• 使用

  href

  生成的链接，其中包含从当前存储的参数生成的查询字符串

与jQuery一起使用

QueryParser（）

，如下所示：

第1页

• 按Maksym Kozlenko所述提交表格

第2页

• 在页面上安装

  jQuery

  和

  QueryParser（）

• 对于每个表单字段，

  $（“#formID[name='fieldName']）.val（$q.fieldName）

或者，为了避免手动分别对每个表单字段进行编码：

$.each($("#myform")[0].elements, function(index, element) {
    $(element).val($q[element.name]);
});

因此，第2页上的表格将填充第1页上输入/选择的值

---

您可以尝试使用localStorage传输数据。。认为这应该是您想要的（如果您不想使用php或类似的东西……）

快速示例：

// first page
<script>
$('#submit').on('click', function (e) {
e.preventDefault();
var val1 = $('#val1').val();
var val2 = $('#val2').val();
var action = $('#form').attr('action'); // next page

window.localStorage.setItem('formData', JSON.stringify({
val1: val1,
val2: val2
}))
});

window.open(action, '_self');
</script>

// second page
<script>
$(window).on('load', function() {
var storage = window.localStorage.getItem('formData');

if (storage) {
storage = JSON.parse(storage);

$('#val1').val(storage.val1);
$('#val2').val(storage.val2)
}
})
</script>

//第一页
$（“#提交”）。在（'click'，函数（e）{
e、 预防默认值（）；
var val1=$（'#val1'）.val（）；
var val2=$（'#val2'）.val（）；
var action=$（'#form'）.attr（'action'）；//下一页
window.localStorage.setItem（'formData'，JSON.stringify({
val1:val1，
val2:val2
}))
});
打开（动作“自我”）；
//第二页
$（窗口）.on（'load'，function（）{
var storage=window.localStorage.getItem（'formData'）；
if（存储）{
storage=JSON.parse（存储）；
$（'#val1'）.val（storage.val1）；
$（'#val2'）.val（storage.val2）
}
})

这应该抓取字段（只需更改为您的），存储在localStorage中，然后打开下一页（应该是表单上的ActionAttr）。在下一页中，我们将在localStorage中查找valu