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.