如何使复选框具有与其他输入相同的提交行为?

时间:2010-06-10 19:04:57

标签: html forms webforms

我有一个搜索表单,默认情况下会选中几个复选框。当表单提交时,作为GET,url将仅包含已选中的复选框列表。

http://www.example.com/page/?checkbox1=yes&checkbox2=yes

使用此方案很难确定用户首次到达此搜索页面与提交表单之间的差异,并且所有复选框都未选中,因为查询字符串看起来相同。

为了解决这个问题,我已经开始在复选框之前注入一个隐藏字段,该字段具有相同的名称和“否”值。取消选中该复选框后,浏览器将发送隐藏字段的无值,当设置复选框时,浏览器将使用复选框的“是”值覆盖隐藏字段。

<input type="hidden" name="checkbox1" value="no" />
<input type="checkbox" name="checkbox1" value="yes" />

当用户提交未选中所有复选框的表单时,我会收到此查询字符串:

http://www.example.com/page/?checkbox1=no&checkbox2=no

这似乎适用于ff,chrome,ie5.5 +所以我使用这种方法是安全的,还是有更好的方法让复选框像输入和选择一样提交?

3 个答案:

答案 0 :(得分:2)

这是一个非常聪明的主意。因为未经检查的复选框不会出现在请求中,这有助于了解用户是否第一次输入表单。

但要知道您可以简单地使用具有默认值的隐藏字段。因此,当用户输入表单时,不会设置参数。一旦他提交表单,就会设置值。

您还可以使用提交按钮的名称,然后您可以查看是否已提交:

<input type="submit" name="submit" />

这解决了你的问题吗?

答案 1 :(得分:0)

解决真正的问题:

  

确定用户首次到达此搜索页的时间与他们提交表单时所有复选框未选中之间的差异

沿

行有一个隐藏字段
<input type="hidden" name="submitted" value="true">

然后,您可以使用组中的复选框:

<input type="checkbox" name="foo" value="bar" id="foo_bar">
<label for="foo_bar">Bar</label>

<input type="checkbox" name="foo" value="baz" id="foo_baz">
<label for="foo_baz">Baz</label>

然后你可以在服务器上循环它们。如何执行此操作取决于您的服务器端环境。在大多数语言中,您可以调用返回数据数组的方法(IIRC Java表单libs倾向于以这种方式工作),也可以只在数组上下文中请求数据(Perl libs通常以这种方式运行)。 PHP是服务器端编程的通用语言,有点奇怪,它要求您将字段重命名为以[]字符结尾。

答案 2 :(得分:-1)

正如你所说,似乎工作正常。或者,您可以避免使其像正常输入一样进行检查,只是检查输入是否存在(如果输入不存在则将其视为false,如果存在,则将其视为true)。

例如,在PHP中

  

if(isset($ _ GET ['checkbox1']){...}

ASP.NET中的

  

if(Request.QueryString [“checkbox1”]!= null){...}

当然,你可能有理由想要做那个客户端。