Search jQuery

jQuery Forum

Dynamic Forms and DropDown Lists

in Using jQuery • 11 years ago

I am trying to figure out how to dynamically show/hide certain form elements based on the selection from the drop down list.

My form is defined like so:

<ul>

<option value="house">Around the House</option>

<option value="honey">Honey Do</option>

<option value="bill">Bills</option>

<option value="errand">Errands</option>

<option value="shopping">Shopping</option>

</select>

</li>

<li>

<li>

</li>

</ul>

</form>

So when the option bill is selected I would like to hide the input fields with the ids of taskcontact and taskaddress, and if the errands option is selected I would like to hide the taskamount and taskaccount fields.

Can someone give me some help getting this done?

Thanks

Replies(6)

charlietfl

Re: Dynamic Forms and DropDown Lists

11 years ago

use the change event of the select

incomplete example to get you started:

$('#tasktype').change(function(){
            var currValue=$(this).val();

            if( currVal=='bill'){
                  $('#taskaddress').parent().hide();
            }

});

rfines

Re: Dynamic Forms and DropDown Lists

11 years ago

Thanks for your reply, however I am still not able to get the fields to hide based on the selection. Here is how I have used the suggestion that you gave me:

function hideFields(){

$('#tasktype').change(function(){

var currVal = $(this).val();

switch (currVal){

case 'bill':

('#taskaddress').parent().hide();

('#taskcontact').parent().hide();

break;

case 'errand':

('#taskaccount').parent().hide();

('#taskamount').parent().hide();

break;

default:

('#taskaddress').parent().hide();

('#taskcontact').parent().hide();

('#taskaccount').parent().hide();

('#taskamount').parent().hide();

break;

}

});

}

</script>

I then attach this method to the onclick property of my select tag. Am I doing something wrong here?

Thanks

ux_web

Re: Re: Dynamic Forms and DropDown Lists

11 years ago

Hi rifnes.

What I see is that there is no need to wrap the change event handler within a function, cause everytime you call the hideFields() function you´ll be attaching the event handler one more time.

So the right solution is to leave the change event handler alone, of course, inside the $(document).ready() event handler method of jQuery

Also, if it´s not wrking with this, try to put some braces at the start and end of every SWITCH CASE like this:

switch() {

case '1': {

-- your code here

break;

}

Sorry for my english, is not good at all but hope you understand this solution

rfines

Re: Dynamic Forms and DropDown Lists

11 years ago

Thanks for your reply, by making those changes it got me somewhere, now at least I am getting a javascript exception. It is saying that ('#taskaddress') has no method parent(). The exact error follows:

Uncaught TypeError: Object ('#taskaddress') has no method parent.

So I know I am getting into the switch and failing when I call parent(). Is there another way to hide them? Could I use the .css('display', 'none') on the ('#taskaddress') object?