CODEWITHSUNDEEP
javascripthtmljquery
user793468
user793468

Reputation: 4966

binding events triggered by multiple input fields

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.

Upvotes: 0

Views: 4705

Answers (2)

David Williams
David Williams

Reputation: 390

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

Upvotes: 2

nbrooks
nbrooks

Reputation: 18233

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

Upvotes: 1

Related Questions