jQuery 将表单数据转移到新页面

Question

情况: 我有两个相同的表格，位于两个不同的页面上。

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

• 第 2 页:此页面有一个带有选择字段的表单(没有提交按钮)。当选择更改时，我使用 jquery 获取选项的内容并显示具有相应类的 div。使用下面的代码:

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

问题:

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

我是 jQuery 的新手，所以我不知道从哪里开始。请友好一点。谢谢!

Answer 1

您可以尝试使用 localStorage 传输数据..认为这应该是您正在寻找的(如果您不想使用 php 或类似的东西..)。

enter link description here

简单示例:

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

这应该抓取字段(只需更改为您的字段)，存储在 localStorage 中，然后打开下一页(应该是表单上的操作属性)。在下一页上，我们将在 localStorage 中查找值并填充表单。

• 编辑:我是通过手机写的，所以请原谅拼写错误...