jQuery: Как проверить, чтобы каждый раздел входных данных был завершен?

Question

Я пытаюсь создать форму, которая будет иметь смешанный ввод в основном текст и выбрать. Я хочу запустить AJAX, как только x количество входов завершено. Я пробовал функцию.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 при работе с select.

Будет ли привязка связывать все входы с размытием / фокусировкой, а затем проверять завершенность на всех входах, или есть лучший способ?

у меня сейчас

$('#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

Более простым и последовательным подходом было бы связать 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();
    }
});

ДЕМО: http://jsfiddle.net/AlienWebguy/5bcgW/

Что нужно учитывать: этот код предполагает, что ваши поля формы будут прямыми дочерними узлами <div id="section"> Родитель. Если вы измените свою структуру, просто обратите внимание на то, как селектор JQuery захватывает поля формы для map() функция.

Answer 2

Ответ пришельца ведет меня в правильном направлении.

Это для регистрационной формы, которая имеет три различных раздела, которыми все управляет 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 возвращает данные следующего раздела, чтобы затем работать с ними.