1

我正在尝试构建一个混合输入的表单，主要是文本和选择。一旦完成 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() 在处理选择时遇到了 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

4

2 回答 2

3

外星人的回答使我朝着正确的方向前进。

这是针对具有三个不同部分的注册表单，这些部分都由 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 返回下一部分的数据以供使用。

于 2011-10-31T21:42:33.453 回答
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>

查询：

$('select,input').change(function() {
    var allgood = true;
    $('#section').children().map(function() {
        if (this.value.length.length < 1) {
            allgood = false;
        }
    });
    if(allgood){
        $('#myform').submit();
    }
});

演示：http: //jsfiddle.net/AlienWebguy/5bcgW/

需要考虑的事情：此代码假定您的表单字段将是<div id="section">父节点的直接子节点。如果您更改结构，只需注意 JQuery 选择器如何获取map()函数的表单字段。

于 2011-10-28T17:55:01.453 回答