2

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

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

  • 第 2 页：此页面有一个带有选择字段的表单（没有提交按钮）。更改选择时，我使用jQuery获取选项的内容，并显示带有Corrsponding类的DIV。使用下面的代码：

    $('.result').hide();
$('#servicearea').change(function() {   
    $('.result').hide();

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

});

问题：

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

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

4

4 回答 4

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>

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

  • 编辑：我是用手机写的，所以请原谅错别字...
于 2019-09-30T11:02:54.123 回答
0

Personally, I use the QueryParser() constructor found here.

This has the following advantage over the gup() function posted by Matthew Nie :

  • Parses the query string once and stores all parameters as properties of an object.

It also allows :

  • Stored parameters to be changed or cleared
  • New parameters to be added
  • A new query query string to be built from the currently stored parameters
  • Links to be built with href containing a query string built from the currently stored parameters.

In conjunction with jQuery, use QueryParser() as follows :

Page 1

  • Submit the form as described by Maksym Kozlenko.

Page 2

  • Install jQuery and QueryParser() on the page
  • For each form field, $("#formID [name='fieldName']").val($q.fieldName).

Or to save having to hand-code each form field individually :

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

Thus, the form on the page 2 will be populated with the values entered/selected on page 1.

DEMO

于 2012-05-04T07:19:39.110 回答
0

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

    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];
}
于 2012-05-04T03:11:39.690 回答
0

为什么不用普通的旧 HTML 让事情变得非常简单？

<form action="/second_page_url" method="GET">
   ... form fields ...
   <input type="submit" />
</form>
  • 将操作属性设置为第二页 URL。使用提交按钮或 Java 脚本提交表单。
  • 如果表单使用 GET 方法，所有字段值都将在 window.location 中可用（您可以将URL 参数字符串解析为 JS 对象）或在服务器上处理表单 POST 数据并添加到页面
  • 使用提供的数据设置第二页控件

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

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

于 2012-05-04T02:20:42.660 回答