0

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(); }
Improve this question
5
  • 1
    typo here sj('#category').show(); Commented Aug 7, 2013 at 9:15
  • 1
    put more of your html, and tell us what you want the behavior if some inputs are empty and some are not ? Commented Aug 7, 2013 at 9:17
  • 1
    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. Commented Aug 7, 2013 at 9:18
  • $j is used in Wordpress to avoid conflicts in their JQUERY and JS. Commented Aug 7, 2013 at 9:19
  • 1
    @Anton its just a typo Commented Aug 7, 2013 at 9:28

7 Answers 7

Reset to default
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/

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

5 Comments

wow! thanks! this worked. previous answers werent working to me. but your answer did. can you kindly explain to me your line2 & line3 logic?
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
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.
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 :)
$('.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.
0

try

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

Comments

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.

Improve this answer

Comments

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

Comments

0

Try this code

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

1 Comment

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

Use 

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

3 Comments

I think you mean if($j(".required").val() == ''). What you have now will set the value to blank.
checking the value avlue of .required is empty or not
Yes, that's what you should be doing. The code is not doing that however,
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(); });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.