Hiding blank fields.

is there any smarter way i can do this ?  -

$('#default-personal-properties').find('input, label').each(function(){
                   if($(this).val() == ""){
                       console.log("field is blank");
                       $(this).fadeOut();
                   } else {
                       console.log("field is not blank");
                   }
              });

Open in new window


what i am doing here is searching a container with inputs and checking if they have a value, if they dont i want them and their label to fadeout but the issue i am having is the label is hidden on those who do have values, ino why but i cant think of a way round it so when i hide blank fields the label dont fade on non blank fields .

html input setup -


<div id = 'firstname' class=' col-md-4'>
								<label class=' control-label' for='textinput'>First Name</label>                 
								<input id='contact-personal-fname' name = 'FIRST_NAME'  type='text' placeholder='First name'  class='form-control input-md no-border' value='".$v_item['FIRST_NAME']."' > 
								</div>

Open in new window


any tips ?
Alex LordAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
You should loop over the label only :
$('label', '#default-personal-properties').each(function(){
     var _for = $(this).attr("for");
     if( _for.length ) {
           var emptyInput = !$("#"+ _for).val();
           if( emptyInput ) {
                       console.log("field is blank");
                       $(this).fadeOut();
                       $("#"+ _for).fadeOut();
           } else
                       console.log("field is not blank");
     }
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
leakim971PluritechnicianCommented:
you can also hide the whole div, IF POSSIBLE :
$('label', '#default-personal-properties').each(function(){
     var _for = $(this).attr("for");
     if( _for.length ) {
           var emptyInput = !$("#"+ _for).val();
           if( emptyInput ) {
                       console.log("field is blank");
                       $(this).closest("div").fadeOut();
           } else
                       console.log("field is not blank");
     }
});

Open in new window

0
Alex LordAuthor Commented:
Hey, i tried your first option and it removes all the label and non of the input boxes but it also remove labels that have inputs with values and the 2nd removes all the divs,  the first one look very promissing so im gonna give it more of a think.
0
Alex LordAuthor Commented:
   $('label', '#default-personal-properties').each(function(){
                var _for = $(this).attr("for");
                if( _for.length ) {
                      var emptyInput = !$("#"+ _for).val();
                      if( emptyInput ) {
                                  console.log(_for);
                                  console.log(emptyInput)
                                  $("#"+ _for).fadeOut();
                      } else
                                  console.log("field is not blank");
                }
           });

Open in new window


i altered it to look for the id of the parent div of the input but the emptyInput shows true for all input when they clearly have no value ?
0
Alex LordAuthor Commented:
the first option work i alter it to hide parent div instead, other issue was within my own code.
1
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.