我正在创建一个多字段搜索表单。有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();
});
答案 0 :(得分: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();