I want to hide Fields if its value is empty and image src also in HTML using Javascript

Question

how to hide fields in html if fields are empty and the image src also. using java script. please suggest

<div id="pagewrapper" >
    <div class="row" >
        <div class="column-half" style="width:500px">
            <div class="containerdiv" >

                <form:label path="file4Desc" type="text" value="" maxlength="50">
                </form:label>
                <form:input path="file4Desc" value="${agreement.file4Desc}" 
                    style="width:300px"/>
                <font color="red"><form:errors path="file4Desc" /></font>           
            </div>
        </div>
        <div class="column-half" style="width:13%">         
            <div class="containerdiv">
                <form:label path="filename3" type="text" value="" maxlength="50">
                </form:label>
                <a href="${pageContext.request.contextPath}/customer/viewDownload3/${agreement.agreementId}.htm">
                    <img src="${pageContext.request.contextPath}/resources/images/download3.gif" 
                                border="0"
                                title="Download this document"/>
                </a>

            </div>
        </div>
    </div>
</div>

possible duplicate of [jQuery: checking if the value of a field is null (empty)](http://stackoverflow.com/questions/4244565/jquery-checking-if-the-value-of-a-field-is-null-empty) — Alex Kulinkovich, Dec 17 '14 at 05:32

Bhushan Kawadkar · Accepted Answer · 2014-12-17T06:05:16.037

4

Try this : You can make use of .filter() and hide input if value is empty.

$(function(){
 $('.containerdiv input').filter(function(){
   return $(this).val().trim()=='';
 }).hide();
});

API Document for filter()

EDIT - As OP want to hide both input and image if input value is empty, please see below updated solution

$(function(){
     $('.containerdiv input').each(function(){
       if($(this).val().trim()=='')
       {
          //hide parent div and next div having image
          var $parentDiv = $(this).closest('.column-half');
          $parentDiv.next('.column-half').hide();
          $parentDiv.hide();
        }
     });
  });

edited Dec 17 '14 at 06:05

answered Dec 17 '14 at 05:30

Bhushan Kawadkar

28,279
5
35
57

working fine for values ...thank you... but i want to do for this also – Dec 17 '14 at 05:32
you mean when label is empty then hide it or image is not there then hide it? please clarify. – Bhushan Kawadkar Dec 17 '14 at 05:35
i want to do for both... because image's description is available in fields...for fields its working fine... but the download image button still visible..i want ti hide that image also – Dec 17 '14 at 05:36
so you want to hide both `div` with `class="containerdiv"` having input and image, right? – Bhushan Kawadkar Dec 17 '14 at 05:42
yes...if it is empty value.... ..i want to hide img src as well as field if they are empty – Dec 17 '14 at 05:43
it means ...if field 1 is empty...it is hiding by using your script...but the image also be hide ... how can i hide imag src also if its content is empty – Dec 17 '14 at 05:47
In your html code I can see `` after closing first `
`. Is that right?
– Bhushan Kawadkar Dec 17 '14 at 05:51
i have altered my code in question..please check it...then you will get an idea – Dec 17 '14 at 05:54
i got it...thank you..i used "column-half"... so now am getting it.... thank you bro.... u are very helpful to me.... thank you – Dec 17 '14 at 05:56
can we use this for and also? for them how to write script? – Dec 17 '14 at 06:19

score 2 · Answer 2 · answered Dec 17 '14 at 05:33

2

Try this:

$(function(){
 $('.containerdiv input').each(function(){
   if($(this).val().trim()=='')
     $(this).hide();
 })
});

answered Dec 17 '14 at 05:33

Mangesh Parte

2,179
1
13
16

I want to hide Fields if its value is empty and image src also in HTML using Javascript

2 Answers2

Linked