Question

what are the best practices to binding events triggered by multiple input fields which are dependent on each other in jquery?

For eg: lets take a search engine which searches for students based on what is entered and selected in the fields below.

1. text boxes
2. select lists
3. select boxes
4. option buttons

Without a button which will trigger these events, what is the best way to achieving the following:

1. Displaying search result as soon as user enters or selects values in one of the input fields and refines the search as users enters or selects values in other fields options.

2. Displaying search result only after each fields has a valid value.

Any input would be appretiated.

Answer 1

I’ve put this together this jsFiddle http://jsfiddle.net/VJwpv/1/.

If you are looking at doing validation with JavaScript then I’d recommend you look into this jQuery Validation plugin

HTML

<div id="searchForm"> 
    <input id="textBox" class="searchField" type="text" />
    <select id="dropDown" class="searchField">
        <option value="Option1">Option1</option>
        <option value="Option2">Option2</option>
    </select>
    <input id="checkbox1Value" type="checkbox" name="checkbox" value="Checkbox1" />Checkbox1 
    <input id="checkbox2Value" type="checkbox" name="checkbox" value="Checkbox2" />Checkbox2
    <input type="radio" name="radio" value="Radio1" /> Radio1
    <input type="radio" name="radio" value="Radio2" /> Radio2
</div>

<div id="results"></div>

JavaScript

function validateForm() {
    // if valid
    return true;
    // else return false
}

function performSearch() {
    var textBoxValue = $("#textBox").val();
    var dropDownValue = $("#dropDown").val();
    var checkbox1Value = $("#checkbox1Value").is(":checked");
    var checkbox2Value = $("#checkbox2Value").is(":checked");
    var radioValue = $("input:radio[name=radio]:checked").val();
    // What you'd actually do here is an AJAX call to get the search results
    // and pass all the values defined above in the request
    $("#results").html("Textbox: " + textBoxValue + ". Dropdown: " + dropDownValue + ". Checkbox1: " + checkbox1Value + ". Checkbox2: " + checkbox2Value + ". Radio: " + radioValue);
}

function onChange() {
    if (validateForm()) {
        performSearch();
    }
}

$(document).ready(function() {
    $("#searchForm input, #searchForm select").change(function() {
        onChange();
    });
});​