jQuery: Як перевірити, щоб кожна частина входів була завершена?

Я намагаюся створити форму, яка матиме змішані вклади, в основному текст та вибір. Я хочу запустити ajax один раз, коли кількість введень завершена. Я спробував функцію .change (), але зіткнувся з проблемами з IE.

Приклад:

<div id='section'>
    <input type=text>
    <input type=text>
    
    
</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

1
Визначте "повне". Користувач може вибрати перший елемент
додано Автор Rob W, джерело

2 Відповіді

Alien's answer lead me in the right direction.

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

3
додано
+1 для публікації вашого кінцевого результату.
додано Автор AlienWebguy, джерело

Простішим і більш послідовним підходом буде прив'язка до події change , оскільки ця подія буде неупереджена до типу елемента форми.

HTML:

<form id="myform">
    <div id="section">
        <input name="baz" type="text" />
        <input name="bat" type="text" />
        
        
    </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/

Something to consider: this code assumes your form fields will be direct child nodes of the <div id="section"> parent. If you change your structure, just take note of how the jQuery selector is grabbing the form fields for the map() function.

2
додано