binding events triggered by multiple input fields

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:

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.
Displaying search result only after each fields has a valid value.

Any input would be appretiated.

@mVChr currently I am storing relevant field values as variables in other events and performing search action in each event separately by $('#field').change(function (){...}); This looks dumb, redundant and inefficient. I hope there are better ways of performing such tasks. — user793468
– user793468, Commented Aug 4, 2012 at 0:03

David Williams · Accepted Answer · 2012-08-05 12:04:45Z

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();
    });
});

nbrooks · Accepted Answer · 2012-08-04 00:33:53Z

Just give them all a common class name, and bind the change event using a class selector:

HTML:

<input type="text" class="search-field" />
<input type="text" class="search-field" />
<select class="search-field" ><option>1</option><option>2</option></select>
<input type="radio" class="search-field" />

JS:

$('.search-field').change(function() {
    // validate all search field values
    // display search results based on values
    // if search results already shown, filter based on $(this).val()
});

If you have many of these fields, rather than having a handler be bound to each one (as the above code accomplishes), you would get better performance by using a delegated event handler:

HTML:

<div id='parent'>
    <input type="text" class="search-field" />
    <input type="text" class="search-field" />
    <select class="search-field" ><option>1</option><option>2</option></select>
    <input type="radio" class="search-field" />
</div>

JS:

$('#parent').on('change', '.search-field', function() {
    // validate all search field values
    // display search results based on values
    // if search results already shown, filter based on $(this).val()
});

Collectives™ on Stack Overflow

binding events triggered by multiple input fields

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related