jQuery show/hide in form using dropdown

Question

I've got a form that I want different fields to appear when someone selects an option from a dropdown. For some reason my code isn't working, It's hidden the optional divs but it's not displaying them when I make my selection.

Here's the jQuery I'm using (I've subtituted $ for jQuery as we are running another script that conflicts within Magento):

jQuery(document).ready(function(){
    jQuery("#ltd").change(function(){

        if (jQuery(this).val() == "1" ) {

            jQuery("#ltd").slideDown("fast"); //Slide Down Effect

        } else {

            jQuery("#ltd").slideUp("fast");    //Slide Up Effect

        }
    });

    jQuery("#partnership").change(function(){

        if (jQuery(this).val() == "1" ) {

            jQuery("#partnership").slideDown("fast"); //Slide Down Effect

        } else {

            jQuery("#partnership").slideUp("fast");    //Slide Up Effect

        }
    });

     jQuery("#sole").change(function(){

        if (jQuery(this).val() == "1" ) {

            jQuery("#sole").slideDown("fast"); //Slide Down Effect

        } else {

            jQuery("#sole").slideUp("fast");    //Slide Up Effect

        }
    });
});

My CSS is:

.formhide { display:none; }
.clear-block { clear:both; }

And this is the code in the form:

<div class="form-left-even"><span class="green">Company Type</span></div>
<div class="form-right-even"> <select>
<option value="">Please choose</option>
<option value="ltd">Limited Company</option>
<option value="partnership">Partnership</option>
<option value="sole">Sole Trader</option></select>
</div>
<div class="clear-block"></div>
<div class="formhide" id="ltd">
<!-- Limited Company -->
<div class="form-left-even">Reg Comp Name:</div>
<div class="form-right-even">
  <input type="text" name="regcompname" size="37" maxlength="100" />
</div>
<div class="clear-block"></div>
<div class="form-left-even">Reg Number:</div>
<div class="form-right-even">
  <input type="text" name="regnumber" size="37" maxlength="100" />
</div>
<div class="clear-block"></div>
</div>
<div class="formhide" id="partnership">
<!-- Partnership -->
<div class="form-left-even">Partner 1 Name:</div>
<div class="form-right-even">
  <input type="text" name="partner1" size="37" maxlength="100" />
</div>
<div class="clear-block"></div>
<div class="form-left-even">Partner 2 Name:</div>
<div class="form-right-even">
  <input type="text" name="partner2" size="37" maxlength="100" />
</div>
<div class="clear-block"></div>
<div class="form-left-even">Partner 3 Name:</div>
<div class="form-right-even">
  <input type="text" name="partner3" size="37" maxlength="100" />
</div>
<div class="clear-block"></div></div>
<div class="formhide" id="sole">
<!-- Sole Trader -->
<div class="form-left-even">Full Name:</div>
<div class="form-right-even">
  <input type="text" name="soletradername" size="37" maxlength="100" />
</div>
<div class="clear-block"></div></div>

I freely admit to being a purist and a pedant, but why are you adding the jQuery library and writing in it when Magento provides Prototype and Scriptaculous libraries already? — clockworkgeek
– clockworkgeek, Commented Nov 18, 2010 at 14:23

kͩeͣmͮpͥ ͩ · Accepted Answer · 2010-11-18 13:47:04Z

2

You're not watching the select for changes - you're watching the target elements.

You want something like:

HTML

<select id='pagePartSelector'>
    <option value="part1">part1</option>
    <option value="part2">part2</option>
</select>
<div id="part1" class="pagePart">...</div>
<div id="part2" class="pagePart">...</div>

Script:

$('#pagePartSelector').change(
 function() {
    $(".pagePart:visible").slideUp(); //slide up visible pageparts
    $("#"+$(this).val()).slideDown(); //slide down the selected page part by id
});

edited Nov 18, 2010 at 13:47

answered Nov 18, 2010 at 13:41

kͩeͣmͮpͥ ͩ

7,86229 silver badges41 bronze badges

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

Comments

Skadoosh · Accepted Answer · 2010-11-18 13:46:40Z

0

If I understand the code correctly, it seems like you are attaching the .change() to the '#ltd', etc. You need to hook up your .change() event to the dropdown list.

answered Nov 18, 2010 at 13:46

Skadoosh

2,5148 gold badges41 silver badges56 bronze badges

Comments

msuhash · Accepted Answer · 2010-11-18 13:49:06Z

0

As David Kep says,

jQuery("#ltd")

you will need to provide "Id" or "class" to dropdown lists and then watch for the changes.

answered Nov 18, 2010 at 13:49

msuhash

2663 silver badges13 bronze badges

Collectives™ on Stack Overflow

jQuery show/hide in form using dropdown

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related