我正在尝试构建一个表单,其中混合输入主要是文本和选择。一旦x个输入完成,我想激活ajax。我已经尝试过.change()函数但是遇到了IE的问题。
示例:
<div id='section'>
<input type=text>
<input type=text>
<select>
<option></option>
<option></option>
</select>
<select>
<option></option>
<option></option>
</select>
</div>
当所有4个输入都完成时,我不想要一个我想要的提交按钮。正如我之前提到的那样.change()在处理select时遇到了IE问题。
是否会将所有输入与模糊/焦点绑定,然后检查所有输入的完成情况是否有效?还是有更好的方法?
我现在
$('#section input').bind($.browser.msie ? 'focusout' : 'blur', function(e) {
// blur also has issues with IE so look for focusout in IE
console.log($(this));
}
我不关心填写输入的顺序我只想填写所有4个触发动作,在我的情况下是一个带有这些输入值的ajax调用。
一些浏览器和jQuery信息。 我必须支持IE 6 +,并且每个主要浏览器都支持3个版本。 jQuery 1.6.2
答案 0 :(得分:3)
Alien's answer引导我朝着正确的方向前进。
这是一个注册表单,它有三个不同的部分,全部由AJAX操作,DOM结构变得相当复杂。
我必须从两个不同的方向接近它。
首先,我必须知道每个部分的输入数量
var firstinputs = $('#firstFieldCollection input[type="text"], select).length;
这给出了我需要的输入数量,不包括我用于jQuery.UI日历查找的按钮。
我做的第二个是在.change
事件,因为我发现特定输入将在IE6 +中起作用。所以看起来像这样:
$('#firstFieldCollection input,select).change(function() {
var itemcount = 0;
$('#personalFieldsCollection input[type="text"], select').each(function(i,v) {
if(v.value.length > 0) {
itemcount++;
}
)};
if(itemcount===firstinputs) {
//Do something once all inputs are filled in.
}
});
这允许我捕获输入的第一部分,只允许AJAX在字段填充后触发,然后AJAX返回下一部分的数据然后使用。
答案 1 :(得分:2)
更简单,更一致的方法是绑定change
事件,因为该事件将不偏不倚到表单元素的类型。
<强> HTML:强>
<form id="myform">
<div id="section">
<input name="baz" type="text" />
<input name="bat" type="text" />
<select name="foo">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="bar">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</form>
<强> JQuery的:强>
$('select,input').change(function() {
var allgood = true;
$('#section').children().map(function() {
if (this.value.length.length < 1) {
allgood = false;
}
});
if(allgood){
$('#myform').submit();
}
});
DEMO: http://jsfiddle.net/AlienWebguy/5bcgW/
需要考虑的事项:此代码假定您的表单字段将是<div id="section">
父项的直接子节点。如果您更改了结构,只需记下JQuery选择器如何抓取map()
函数的表单字段。