将HTML表单与URL查询字符串同步?

时间:2016-01-11 20:15:49

标签: javascript html forms

在eBay等网站上,返回搜索页面后,搜索选项全部填写。我想对我的网站做同样的事情,目前返回搜索页面会返回正确的搜索结果但是搜索表单是空的。

到目前为止我见过的两种方法:

  1. 使用HTML编写表单,使用JS解析查询字符串并设置表单值。
  2. How can I pre-populate html form input fields from url parameters?

    1. 使用查询字符串中的任何值在JS中生成表单,如果没有给出查询字符串,这将生成一个空白表单。
    2. Query String for pre-filling html form field

      这两种解决方案看起来都很糟糕。我想这是一个常见的任务,有一个标准或干净的方法来做一两行吗?

      显然有些东西将字段从表单序列化为查询字符串,应该有一种方法可以反过来使用它来获取查询字符串并填写表单字段,而不必“滚动自己的”循环在JS。

2 个答案:

答案 0 :(得分:0)

我建议将信息保存在session / cookie中并从中拉出来填充表单。这就是它在eBay上的表现。

答案 1 :(得分:0)

只需使用GET参数。

http://sample.com/?search=pen&color=blue

现在在构建表单元素时,只需执行以下操作:

$search = isset($_GET['search']) ? $_GET['search'] : '';
$color = isset($_GET['color']) ? $_GET['color'] : '';

echo "<input type='text' value='{$search}' placeholder='Search' />";
echo "<input type='text' value='{$color}' placeholder='Color' />";