jQuery: How do I check for each section of inputs to be complete?

Question

I'm trying to build a form that will have mixed inputs mostly text and select. I want to fire ajax once x number of inputs are completed. I've tried the .change() function but have experienced issues with IE.

Example:

<div id='section'>
    <input type=text>
    <input type=text>
    <select>
        <option></option>
        <option></option>
    </select>
    <select>
        <option></option>
        <option></option>
    </select>
</div>

I don't want a submit button I just want when all 4 inputs are complete do something. As I put before .change() had problems with IE when dealing with the select's.

Would tying to bind all inputs with a blur / focusout and then check for complete on all inputs work or is there a better way?

I have right now

$('#section input').bind($.browser.msie ? 'focusout' : 'blur', function(e) {
// blur also has issues with IE so look for focusout in IE
console.log($(this));
}

I don't care about the order of the the inputs being filled out I just want as soon as all 4 are filled out trigger an action, in my case an ajax call with those input values.

Some browser and jQuery info. I have to support IE 6 +, and each major browser down 3 versions. jQuery 1.6.2

Answer 1

An easier and more consistent approach would be to bind on the change event since that event will be unbiased to the type of form element.

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/

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.

Answer 2

Alien's answer lead me in the right direction.

This is for a registration form that has three different sections that are all manipulated by AJAX and the DOM structure gets rather complicated.

I had to approach it from two different directions.

First I had to know the number of inputs per section

var firstinputs = $('#firstFieldCollection input[type="text"], select).length;

This gave the number of inputs that I needed excluding a button I have for a calendar lookup for jQuery.UI.

The second I did was on the .change event as I figured out that the specific inputs will work within IE6+. So that looks like this:

$('#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.
    }
});

This allows me to capture the first section of inputs only allow the AJAX to fire once the fields are filled and then the AJAX returns the next section's data to then work with.