0

我正在创建一个多字段搜索表单。有 9 个不同的搜索字段。但是,它们都不是强制性的。唯一的要求是您必须至少填写一个字段。

它们都在加载时显示默认值(即“状态”),而不是使用标签来指示搜索字段的用途。因此,如果您编辑一个字段但不理会其他八个字段,那么所有九个字段仍会发布一个值。

有什么好的,有效的方法来处理这个问题吗?我宁愿不必在发布之前(例如if($(inputid).val() == 'Default Value') { ...)或控制器(例如if($this->input->post('name') == 'default value') { $data['name'] = '')之前在 jQuery 中手动执行逻辑,因为在整个站点中将进行几次此搜索的迭代,因此动态解决方案将非常有用并节省一堆时间。

谢谢!


编辑 这是我在下面@veddermatic 的帖子之后得到的要点:

呈现形式:

<form id="search-form" action="spend/search">
<input id='fname' value='First Name' data-original_value='First Name' name='fname'/>
<input id='lname' value='Last Name' data-original_value='Last Name' name='lname'/>
...
</form>

鬼形态:

<form id="ghost-form" action="spend/search">
<!--nothing here yet-->
</form>

jquery 来处理这一切:

$('.do-the-search').click(function(e) {
        e.preventDefault();

        $('#search-form input').each(function() {
            var $this = $(this);

            if($this.attr('data-original_value') != $this.val())
            {
                var clone = $this.clone();
                $("#ghost-form").append(clone);
            }
        });

        $("#ghost-form").submit();

    });
4

1 回答 1

1

一种选择是拥有两种形式,一种是您当前拥有的“普通”形式,另一种是一种“幽灵”形式(它没有提交按钮或可见字段),其目标和操作与呈现给用户的形式相同。

当您为用户构建/呈现表单时,为每个输入提供一个可用于迭代它们的类,并将预填充的值放入数据属性中:

<input type="text" class="myFormInput" name="in1" data-original_value="blah" value="blah" />
<input type="text" class="myFormInput" name="in2" data-original_value="something" value="something" />
....

然后使用 javascript 处理面向用户的表单提交,遍历.myFormInput元素,如果它们的值与原始值不同,则在“ghost”表单中创建一个具有相同名称的输入元素,然后提交该表单。这只会发送更改的元素,如果由于某种原因它们关闭/禁用了 javascript,您会优雅地降级,因为您的原始表单仍将提交。

编辑:如果您确实有多个实例,您可以很容易地将它变成一个插件并在您的所有表单上使用它,所以您只需要执行以下操作:jQuery('#userFacingForm').ghostForm();

于 2013-03-20T20:09:23.883 回答