enable/disable visual indicator

Enable/Disabled Visual Clear Indicator for Search Criteria

by Hari Menon

HTML

<form id='searchForm' method="post">
        <fieldset>
            <legend>Search Criteria</legend>
            <div class='ui-clear'></div>
            <div class='search'><label for's1'>Criteria 1</label><input name='s1' type='text' value='' class='first'/></div>
            <div class='search'><label for's2'>Criteria 2</label><input name='s2' type='text' value='' /></div>
            <div class='search'><label for's3'>Criteria 3</label><input name='s3' type='text' value='' /></div>
            <div class='search'><label for's4'>Criteria 4</label><input name='s4' type='text' value='' /></div>
            <div class='search'><label for's5'>Criteria 5</label><input name='s5' type='text' value='' /></div>
        </fieldset>
        </form>

CSS

body {
    background-color: #F7EED4;
}

.ui-clear {
    border: 1px;
    height: 24px;
    width:24px;
    display: inline;
    float: left;
}
.ui-clear.disabled {
    background-color: black;
}

.ui-clear.enabled {
    background-color: red;
}

input[type="test"] {
    border: 1px solid $CCCCCC;
    color: $444444;
    font-size: 1.2em;
    padding: 2px;
    width: 100px;
    margin: 0.5em 0 0 0 ;
    float: left;
}

label {
    font-weight: bold;
    margin: 1em 0 0 0 ;
}

.search {
    float: left;
    padding-right: 10px;
}
fieldset {
    border: 1px solid #DDDDDD;
    margin: 0 0 1.5em;
    padding: 0 1.4em 1.4em;
}

JavaScript

function clearSearchClick() {
    $('.ui-clear').removeClass('enabled').addClass('disabled');
    $(':input').val('');
    $('.first').focus();
}

function docKeyPress(event) {
    if (event.which === 13) {
        event.preventDefault();
        alert('pretend I searched');
    }
}

function searchEmpty() {
    var valid = true;
    $(':input').each(function() {
        if ($(this).val() !== '') return false;
    });
    return valid;    
}

function inputKeyUp(event) {
    if (!searchEmpty()) {
        $('ui-clear.disabled').removeClass('disabled').addClass('enabled');
    }
}

$(function () {
    $('.first').focus();
    $('.ui-clear').click(clearSearchClick);
    $(':input').keyup(inputKeyUp);
    $(document).keypress(docKeyPress);
});