13

我正在构建一个分面搜索系统，该系统在侧边栏中有输入（分面是复选框），并在页面标题中输入（主查询框）。当用户提交搜索时，所有这些输入都会同时提交。

我能想到的唯一方法是将整个页面包装在 HTML 表单标记中。类似于以下伪html：

<form>
  <div id='header'>
    <logo/>
    <input id='q'/>
    <!-- a bunch more stuff -->
  </div>
  <div id='sidebar'>
    <div id='sidebar-facets-subsection'>
      <input id='facet1'/>
      <input id='facet2'/>
      <input id='facet3'/>
      <!-- a bunch more stuff -->
    </div>
    <div id='sidebar-form-subsection'>
      <form id='unrelated-form'>
        <input id='unrelated-input-1'/>
        <input id='unrelated-input-2'/>
      </form>
    </div>
  </div>
  <!-- a bunch more stuff -->
</form>

这会起作用，除了三件事：

  1. 正如我上面所指出的，我需要在页面中使用其他表单。
  2. 我使用不同的 django 模板来生成标题和侧边栏，使模板相互依赖。
  3. 这真是一团糟，因为侧边栏实际上大约有 100 行，而不是 3 行。

有没有一种我不知道的更聪明的方法，或者创建巨大的 HTML 表单是常态？在这种情况下，使用 Javascript 以某种方式以更正常的形式生成输入条目会更好吗？还是这是唯一的选择？

有什么创造性的解决方案或想法吗？

4

3 回答 3

4

您可以在不牺牲可访问性的情况下使其与 Javascript 一起使用

  1. 将所有复选框放在标题中并将它们包装在 div 中
  2. 设置并清空但干净的侧栏
  3. 使用 Javascript，将您的复选框从标题移动到侧边栏
  4. 将回调附加到form.submit事件，当用户提交表单时，取消事件，然后从搜索字段和复选框中获取数据并将其作为 Ajax POST 请求发送。

使用像 jQuery 这样的框架，这是一个 15 分钟的工作。

如果用户启用了 JS，表单将发布请求并且一切正常。如果用户没有启用 javascript，则复选框将位于标题中，因此它们将起作用，只是以稍微不那么优雅的设计为代价。

但是禁用Javascript的人习惯于设计更改，所以没关系。

于 2011-11-26T10:43:11.537 回答
3

使用 javascript 在表单提交时使用此复选框对的列表填充隐藏字段，name=value并在服务器端代码中处理此问题，将字符串拆分为数组等。请注意，这不是一个好的方法，因为您失去了对那些具有javascript 已禁用。表单标签是这样做的唯一可访问的方式。

如果可以的话，您可以尝试更改布局，将复选框与过滤数据的按钮链接交换，这几乎是大多数电子商务网站所做的方式。

于 2011-11-19T02:53:47.317 回答
1

我相信你有两个选择：

1.) 一个页面范围的表单元素。所有“提交”按钮都提交到同一个表单，服务器端脚本处理所有填充元素的表单。按页面范围，我不是字面意思......相关的输入都在同一个表单标签中。其他表单放置在其他表单标签中。

2.) 多个表单，带有客户端脚本，该脚本在提交之前使用来自另一个表单的数据填充隐藏的表单字段。

1 需要更多的工作，但 2 可能不适用于每个访客。

请考虑这样一个事实，仅仅因为您有一个表单容器，您不必为用户显示所有内容。将输入封装在 div 中并根据您的意愿定位它们。这可能不容易，但绝对有可能。

于 2011-11-22T23:54:48.327 回答