Show hidden div based of any value contained in the input field

Question

I have the following mark up of a div that contains a form. The form has a basic search div and an advanced div.

 <div class="form"> <form> <input type="text" name="first_name"> <input type="text" name="last_name"> <div class="Basic" class="slide"> <input type="text" name="location"> </div> <a class="toggle-link" onclick="ShowDiv('Adv');">+ show advanced fields</a> <div id="Adv" class="slide hidden"> <input type="text" name="first_name2"> <input type="text" name="last_name2"> <input type="text" name="street"> <input type="text" name="town"> <input type="text" name="country"> </div> </form> <a onclick="ShowDiv('Basic');">- hide advanced fields</a> </div>

The hide/show is functioning based on the following script:

 function HideDiv() { $('.slide').hide(); } function ShowDiv(ctrl) { HideDiv(); $('#' + ctrl).show(); } ShowDiv('Basic');

My problem (and this is a follow up ticket based on an existing question that I never managed to get to work) is that I want a user when he returns to this search form to be presented with the advanced div open if he used the advanced search form in the first place. So if any of the input fields contain any data values the div should be open when the user returns to the page.

I have this code so far but it doesn't work.

 $(document).ready(function () { $(function(){ $("div#Adv input").each(function(){ if($(this).val()!='') $(this).parent().parent().show(); return; }); });

gdoron · Accepted Answer · 2012-03-23 12:26:00Z

1

$(function(){ if($("#Adv input[value!='']").length){ $('#Adv').show(); $('a.toggle-link').hide(); } });

edited Mar 23, 2012 at 12:26

answered Mar 23, 2012 at 10:39

gdoron

151k59 gold badges302 silver badges376 bronze badges

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

2 Comments

gek Over a year ago

This seems to worked. Now the only issue I have is that when the div is shown, so does the <a class="toggle-link" onclick="ShowDiv('Adv');">+ show advanced fields</a>. What needs to be added in your code so when the div is revealed, the class="toggle-link" is hidden

gdoron Over a year ago

@aa1. I added it to the answer.

Nicola Peluchetti · Accepted Answer · 2012-03-23 10:38:07Z

0

You should do

 $("div#Adv input").each(function(){ if(this.value !== ''){ //get the first ancestor with class=slide and show it $(this).closest('.slide').show(); return; } });

answered Mar 23, 2012 at 10:38

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

2 Comments

Nicola Peluchetti Over a year ago

@aa1 that's trange because it works here jsfiddle.net/RYNRQ did you put this code inside $(document).ready()?

gek Over a year ago

yes I did. I have now moved the position of the script before some other existing scripts on my page and it worked as well. Thanks

slash197 · Accepted Answer · 2012-03-23 10:39:26Z

0

I believe you are missing some brackets there

$(document).ready(function(){ $(function(){ $("div#Adv input").each(function(){ if($(this).val()!='') { $(this).parent().parent().show(); return; } }); });

answered Mar 23, 2012 at 10:39

slash197

9,0246 gold badges44 silver badges71 bronze badges

2 Comments

gek Over a year ago

I have copied your code exactly on my page but still the div#Adv remains hidden no matter what. Does it matter where I place this code? At the moment it s included in the bottom of my page whereas the hide/show script is referenced from an external file.

slash197 Over a year ago

If you want to show #Adv the use $(this).parent().show() instead of $(this).parent().parent().show()

Collectives™ on Stack Overflow

Show hidden div based of any value contained in the input field

3 Answers 3

2 Comments

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Linked

Related