Question

我正在尝试构建一个表单，其中混合输入主要是文本和选择。一旦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

Answer 1

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返回下一部分的数据然后使用。

Answer 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()函数的表单字段。

jQuery：如何检查输入的每个部分是否完整？

2 个答案: