Question

情况：我有两个相同的表格，在两个单独的页面上。

第1页：此页面上的表单有一个选择字段，提交时应该带您到第二页并将另一个相同的表单设置为相同的选择
第2页：此页面包含一个带有选择字段的表单（无提交按钮）。当选择被更改时，我使用jquery来获取选项的内容并显示带有相应类的div。使用下面的代码：
```
$('.result').hide();
$('#servicearea').change(function() {   
    $('.result').hide();

    var optionValue = $ (this).attr('value');
    $('#'+optionValue).show('fast');

});
```

问题：

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

对于jQuery，我是一个新手，所以我不知道从哪里开始。请友好一点。 THX！

Answer 1

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

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

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

也可以使用cookie，HTML5本地存储，但是你应该考虑到用户可以打开多个widnow / tab。

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

Answer 2

使用@Maksym的想法Kozlenko建议使用普通的旧HTML表单进行第一页，并使用GET方法提交到第二页。然后你可以使用javascript来获取你使用这个函数发送的GET数据，我已经使用了一段时间了，我在this site.上找到了它

    function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

Answer 3

就个人而言，我使用找到here的QueryParser()构造函数。

与Matthew Nie发布的gup()功能相比，这具有以下优势：

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

它还允许：

要更改或清除的存储参数
要添加的新参数
从当前存储的参数构建的新查询查询字符串
使用href构建的链接，其中包含根据当前存储的参数构建的查询字符串。

与jQuery一起使用QueryParser()，如下所示：

Page 1

按照Maksym Kozlenko的描述提交表格。

Page 2

在页面上安装jQuery和QueryParser()
对于每个表单字段$("#formID [name='fieldName']").val($q.fieldName)。

或者保存必须单独手动编码每个表单字段：

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

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

DEMO

Answer 4

您可以尝试使用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中查找值并填充表单。

编辑：我是通过电话写的，所以请谅解...

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

4 个答案:

Page 1

Page 2