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

Email will not be published

Website example

Your Comment:

 

3,055 spam comments
blocked by
Akismet