PHPJavascript

Web Development Guide – My Personal Library of Tutorials and Scripts

Ubercart dependent attribute hide show

June13

I have an attribute called “size” with an option “custom”. Now when a user selects the custom option a textfield should be  visible where the user can give his custom size measurements.

Now I considered various options, there is an actual module on attribute dependency but that was not useful for as my requirement was simple. So I used jquery in comtemplate of “product” cck (comes with ubercart to store its products).

This the jquery code:

<script type=”text/javascript”>
$(document).ready(function(){
$(’#edit-attributes-6-wrapper’).hide();
$(”#edit-attributes-3″).change(function(){
if(this.value == ‘14′)
{$(”#edit-attributes-6-wrapper”).show();}
else {$(”#edit-attributes-6-wrapper”).hide();}
});
});
</script>

Use firebug (mozilla’s product use in web development) to find out the exact Ids of the selectbox and textbox holding the respective data. In my case ‘edit-attributes-3′ is the name of the selectbox holding the different sizes with the custom size option and ‘edit-attributes-6-wrapper’ is the id of textfield which the user will use to enter the custom size measurements.

posted under Ubercart
One Comment to

“Ubercart dependent attribute hide show”

  1. On November 13th, 2011 at 5:51 pm hem Says:

    Hi Which file do you upgrade to hide/show the options?

Email will not be published

Website example

Your Comment:

 

12,829 spam comments
blocked by
Akismet