when <input> html is empty then hide <div> logic

Question

I have 3 markup fields, i just want a basic logic that if these fields are left blank, then this <div id="category"> will not display.

[EDIT] Updated

<div id="panel"> 
<div id="form">

    <div class="input-prepend">
               <span class="add-on">name</span>
       <input class="span3 required" id="prependedInput" type="text">
    </div>

    <div class="input-prepend">
      <span class="add-on">last name</span>
      <input class="span3 required" id="prependedInput" type="text" placeholder="Your Lastname">
    </div>

    <div class="input-prepend">
      <span class="add-on">email</span>
      <input class="span3 required" id="prependedInput" type="text" placeholder="Your Email">
    </div>

 </div> <!--/form-->
</div>  <!--/panel-->     

<!--DROPDOWN-->
<select id="category">
        <option value="" disabled="disabled" selected="selected">Please select a category</option>
        <option name="choice1" value="blue"> blue  </option>
        <option name="choice2" value="red"> red    </option>
        <option name="choice3" value="pink"> pink  </option>
        <option name="choice4" value="yellow"> yellow </option>
        <option name="choice5" value="violet"> violet </option>
</select>

this is my jquery, and it doenst seem to work to me.

if ($j(".required").is(':empty')) {
    $j("#category").hide();
} else {
    $j('#category').show();
}

put more of your html, and tell us what you want the behavior if some inputs are empty and some are not ? — Dany Y
– Dany Y, Commented Aug 7, 2013 at 9:17
Aside from the typo, you can write this shorter as $j('#category').toggle($j('.required').val() === '') - Passing a boolean to .toggle() will show it for true, hide it for false. — MichD
– MichD, Commented Aug 7, 2013 at 9:18
$j is used in Wordpress to avoid conflicts in their JQUERY and JS. — user1735120
– user1735120, Commented Aug 7, 2013 at 9:19

nyzm · Accepted Answer · 2013-08-07 10:35:14Z

1

[UPDATED]

HTML :

<div id="panel">
    <div id="form">
        <div class="input-prepend"> <span class="add-on">name</span>

            <input class="span3 required" id="prependedInput" type="text">
        </div>
        <div class="input-prepend"> <span class="add-on">last name</span>

            <input class="span3 required" id="prependedInput" type="text" placeholder="Your Lastname">
        </div>
        <div class="input-prepend"> <span class="add-on">email</span>

            <input class="span3 required" id="prependedInput" type="text" placeholder="Your Email">
        </div>
    </div>
    <!--/form-->
</div>
<!--/panel-->
<!--DROPDOWN-->
<select id="category" style="display:none;">
    <option value="" disabled="disabled" selected="selected">Please select a category</option>
    <option name="choice1" value="blue">blue</option>
    <option name="choice2" value="red">red</option>
    <option name="choice3" value="pink">pink</option>
    <option name="choice4" value="yellow">yellow</option>
    <option name="choice5" value="violet">violet</option>
</select>

JS :

$j(function () {
    $j(".required").on("keypress keyup change", function () {
        var show_flag = true;
        $('.required').each(function (i) {
            if ($(this).val() == "") {
                show_flag = false;
            }
        });
        if (show_flag) {
            $("#category").show();
        } else {
            $("#category").hide();
        }
    });
});

jsfiddle : http://jsfiddle.net/nyzm/E8X5S/3/

edited Aug 7, 2013 at 10:35

answered Aug 7, 2013 at 9:52

nyzm

2,8453 gold badges26 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1735120 Over a year ago

wow! thanks! this worked. previous answers werent working to me. but your answer did. can you kindly explain to me your line2 & line3 logic?

user1735120 Over a year ago

i have 3 <input> as shown above updated code. when i type on the 3rd input, <div id="category"> shows, even if the 2 inputs are empty. what i want is, all 3 <input> have values before the <div> appears

nyzm Over a year ago

what line 2 does, binds keypress, keyup and change events to all elements with required class. what line 4 (was line 3) does, loops into all the elements with required class.

user1735120 Over a year ago

hi, thank you so much for this. also, id like to ask if you dont mind. can you please explain this line $('.required').each(function (i) { does this mean, for each class with class required, do this function (i). what does the i do? i apologize if this is a simple question. just started learning javascript :)

nyzm Over a year ago

$('.required').each(function (i) { means, for each element with class required do the defined function. i is the index number of the element. which we dont use here. but might be useful somewhere else. if you alert(i); in the function you will see 0, 1, 2 will return.

Daniele · Accepted Answer · 2013-08-07 09:17:53Z

0

try

if ($(".required").html().length > 0) {
    $('#category').show();
}
else {
    $("#category").hide();
}

answered Aug 7, 2013 at 9:17

Daniele

1,93616 silver badges24 bronze badges

Comments

Chris Brown · Accepted Answer · 2013-08-07 09:18:52Z

0

Instead of using :empty, try;

if ( !$(".required").val() ) {
    $('#category').hide();
}
else {
    $("#category").show();
}

The length check isn't required since an empty string returns false anyway.

answered Aug 7, 2013 at 9:18

Chris Brown

4,6553 gold badges32 silver badges37 bronze badges

Comments

John V · Accepted Answer · 2013-08-07 09:19:19Z

0

if(document.getElementById("prependedInput").value.toString().Length() > 0) {
    document.getElementById("category").style.display = "block";
}
else
{
    document.getElementById("category").style.display = "none";
}

answered Aug 7, 2013 at 9:19

John V

8546 silver badges12 bronze badges

Comments

zzlalani · Accepted Answer · 2013-08-07 09:20:50Z

0

Try this code

$j(".required").keyup(function () {
    if ( $j.trim($j("this").val()) != "" ) {
        $j('#category').show();
    } else {
        $j("#category").hide();
    }
});

answered Aug 7, 2013 at 9:20

zzlalani

24.6k16 gold badges48 silver badges73 bronze badges

1 Comment

user1735120 Over a year ago

hi, i like this code, but. it doesnt work to me. i have included the whole <div> of my html above.

zzlalani · Accepted Answer · 2013-08-07 09:24:09Z

0

Use

if($j(".required").val('')){
   $('#category').show();
} else {
    $('#category').hide();
}

edited Aug 7, 2013 at 9:24

zzlalani

24.6k16 gold badges48 silver badges73 bronze badges

answered Aug 7, 2013 at 9:18

Vinod VT

7,18912 gold badges54 silver badges78 bronze badges

3 Comments

Rory McCrossan Over a year ago

I think you mean if($j(".required").val() == ''). What you have now will set the value to blank.

Vinod VT Over a year ago

checking the value avlue of .required is empty or not

Rory McCrossan Over a year ago

Yes, that's what you should be doing. The code is not doing that however,

Rupam Datta · Accepted Answer · 2013-08-07 10:18:45Z

0

I've a quick fiddle, you may be interested in.

http://jsfiddle.net/ardeezstyle/Jhvt3/

$('.required').each(function(index, element) {
    $(this).val()=="" ? $('#category').hide() : $('#category').show();
});

answered Aug 7, 2013 at 10:18

Rupam Datta

1,8891 gold badge21 silver badges37 bronze badges

Collectives™ on Stack Overflow

when <input> html is empty then hide <div> logic

7 Answers 7

5 Comments

Comments

Comments

Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

Comments

Comments

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related