Take the 2-minute tour ×

I have a scenario where I need to show a bunch of buttons only when ANY of a group of input fields contains a value and hide the buttons when ALL of the input fields are empty.

Can't come up with an elegant way to do that other than by attaching some code to the focus event of the input fields to check their content and show/hide accordingly.

Is there a better way to do this?


share|improve this question

2 Answers 2

up vote 2 down vote accepted


<form id="myForm">
    <input .../>
    <select .../>
    <!-- etc. -->


$(function ()
    var $myForm = $('#myForm'),
        $inputs = $myForm.find('input, select'),
        $buttons = $('select a bunch of buttons');

    $myForm.change(function ()
        $buttons.toggle(!!$inputs.filter(function ()
            // NB, using .val() won't work for checkboxes
            return !!$(this).val();


share|improve this answer
I like the way you attached to the change event on the form - never used that - #Nice –  alexfreiria Apr 6 '11 at 2:31
@Alexander, that's how I was going to code it. Thanks for saving me typing the code ;) Like u, never tried @Matt's change event on the form. Nice. Many thanks to both of you. Cheers! –  djeetee Apr 7 '11 at 1:18

   var $fields = $('input[type=text]'),
       $btn = $('#btnid'),


      for(i = 0; i < $fields.length; i++){
         if($fields[i].value != '') {


share|improve this answer

Your Answer


