CODEWITHSUNDEEP
jquery
Ansuman
Ansuman

Reputation: 1494

Enable/Disable Clear button based on the search criteria

There are 3 text fields in a search form and a clear button in it.

Here is what I want to do -

1 - First the clear button will be disabled

2 - When the text is entered in any one of the text boxes then the Clear button will be enabled

3 - The Clear button will be disabled only when there is no text in either of the text boxes.

4 - We can also add more search criteria. That means there can be any number of text boxes

Here is my code:

var toValidate = $("#basicSearchFields input"),
clearBtn = $("#clearBasicSearch");

toValidate.keyup(function () {
toValidate.each(function () {
    if ($(this).val().length > 0) {
        valid = true;
    } else {
        valid = false;
    }
    (valid === true) ? clearBtn.removeClass('disabled') : clearBtn.addClass('disabled');
});
});

Actually what this code is doing when text is entered into any of the text boxes the button is getting enabled but clearing the texts from the text box is not disabling the button again. Please help me out!!

Upvotes: 0

Views: 1422

Answers (3)

Roger Barreto
Roger Barreto

Reputation: 2284

You don't need to iterate, the selector will perform the same function for all the selected elements in the "toValidate" variable.

//Encapsulate the logic in a function that receives the context 
//and also the jQuery reference to the clear button
function ValidateContext(sToValidateSelector, jqClearButton) {
    var jqValidate = $(sToValidateSelector);

    //Bind/Re-bind the event (off/on) to prevent multi call to the same context.
    jqValidate
        .off('keyup')
        .on('keyup',function () {
            jqElement = $(this);
            jqClearButton.prop('disabled', jqElement.val().length == 0);
        });
}

Call the function for one or more contexts:

ValidateContext('#form1 input', $('#clearButton1'));
ValidateContext('#form2 input', $('#clearButton2'));
ValidateContext('#searchform input', $('#clearButtonSearch'));
//...

Upvotes: 0

BreyndotEchse
BreyndotEchse

Reputation: 2230

var toValidate = $("#basicSearchFields input:not(#clearBasicSearch)");
toValidate.keyup(function () {
    var valid = false; //default is false
    toValidate.each(function () {
        if ($(this).val().length > 0) {
            valid = true; //non-empty element found
            return false; //break
        }
    });

    $("#clearBasicSearch").toggleClass('disabled', !valid); //add if valid, remove if not
});

Upvotes: 0

reggaemahn
reggaemahn

Reputation: 6648

If you are open to suggestions then here is an easy way to achieve what you are trying to do

FIDDLE

Sample HTML

<div>
    <input type="text" class="search" />
    <input type="text" class="search" />
    <input type="text" class="search" />

    <button id="clearFields" disabled="disabled">Clear</button>
</div>

jQuery

$(".search").keyup(function(){
    $("#clearFields").prop("disabled", true);
    $(".search").each(function(){
        if(this.value.length > 0){
            $("#clearFields").prop("disabled", false);
        }
    });
});

Code to make the clear button work

$("#clearFields").click(function(){
  $(".search").each(function(){
        this.value = "";
  });
});

Upvotes: 1

Related Questions