Help using form dependency script

[sfraise]

Ok so hopefully someone can point me in the right direction here.

 

I'm building a custom registration form in a popup lightbox. That part is fine and dandy. However, I'm trying to build dependent drop downs to appear conditionally (If United States is chosen in country field then states drop down selector will appear). The problem I'm running into is I'm not sure where to put the dependency statement in the cb registration code in order to make it dependent on something else.

 

The script is pretty basic and basically you just use the following:

DEPENDS ON name [bEING value]

So you do something like:

<label>State:<input type="select" name="state" class="DEPENDS ON cb_country BEING United States"
</label>

 

But no matter where I put the class="DEPENDS ON in a cb field it won't hide the option

 

Now I can build a form label from scratch that is not part of the actual cb registration form and tell it to only appear if United States is selected in cb_country and it works like a champ, so it's able to work off of the cb registration field data, it just won't apply the conditions to a cb registration label it's self.

 

Of course the cb field language is worded a bit different in that it's not a simple <label></label>, rather a <label for= and I'm sure therein lies the problem.

 

So now that I've completely confused everyone let me just show what I'm doing and hopefully you'll understand better by looking at the code it's self.

<tr id="cbfr_54" class="sectiontableentry1 cbft_select">
<td class="titleCell"><label for="cb_country">Country:</label></td>
<td id="cbfv_54" class="fieldCell"><select id="cb_country" class="required inputbox" name="cb_country"> <option id="cbf363" selected="selected" value="United States">United States</option> <option id="cbf364" value="Afghanistan">Afghanistan</option> <option id="cbf365" value="Albania">Albania</option> <option id="cbf366" value="Algeria">Algeria</option> <option id="cbf367" value="American Samoa">American Samoa</option> <option id="cbf368" value="Andorra">Andorra</option> <option id="cbf369" value="Angola">Angola</option> <option id="cbf370" value="Anguilla">Anguilla</option> <option id="cbf371" value="Antigua & Barbuda">Antigua & Barbuda</option> <option id="cbf372" value="Antilles, Netherlands">Antilles, Netherlands</option> <option id="cbf373" value="Argentina">Argentina</option> <option id="cbf374" value="Armenia">Armenia</option> <option id="cbf375" value="Aruba">Aruba</option> <option id="cbf376" value="Australia">Australia</option> <option id="cbf377" value="Austria">Austria</option> <option id="cbf378" value="Azerbaijan">Azerbaijan</option> <option id="cbf379" value="Bahrain">Bahrain</option> <option id="cbf380" value="Bangladesh">Bangladesh</option> <option id="cbf381" value="Barbados">Barbados</option> <option id="cbf382" value="Belarus">Belarus</option> <option id="cbf383" value="Belgium">Belgium</option> <option id="cbf384" value="Belize">Belize</option> <option id="cbf385" value="Benin">Benin</option> <option id="cbf386" value="Bermuda">Bermuda</option> <option id="cbf387" value="Bhutan">Bhutan</option> <option id="cbf388" value="Bolivia">Bolivia</option> <option id="cbf389" value="Bosnia & Herzegovina">Bosnia & Herzegovina</option> <option id="cbf390" value="Botswana">Botswana</option> <option id="cbf391" value="Bouvet Island">Bouvet Island</option> <option id="cbf392" value="Brazil">Brazil</option> <option id="cbf393" value="Brunei Darussalam">Brunei Darussalam</option> <option id="cbf394" value="Bulgaria">Bulgaria</option> <option id="cbf395" value="Burkina Faso">Burkina Faso</option> <option id="cbf396" value="Burundi">Burundi</option> <option id="cbf397" value="Cambodia">Cambodia</option> <option id="cbf398" value="Cameroon">Cameroon</option> <option id="cbf399" value="Canada">Canada</option> bla bla bla... </select> <span class="cbFieldIcons"> <img src="components/com_comprofiler/plugin/templates/default/images/mini-icons/icon-16-required.png" border="0" alt="* This Field is required" title="This Field is required" width="16" height="16" /> <img src="components/com_comprofiler/plugin/templates/default/images/mini-icons/icon-16-profile-yes.png" border="0" alt="This Field IS visible on profile" title="This Field IS visible on profile" width="16" height="16" /></span></td>
</tr>
<tr id="cbfr_55" class="sectiontableentry2 cbft_select">
<td class="titleCell"><label for="cb_state">State:</label></td>
<td id="cbfv_55" class="fieldCell"><select id="cb_state" class="required inputbox" name="cb_state"> <option id="cbf585" value="Alabama">Alabama</option> <option id="cbf586" value="Alaska">Alaska</option> <option id="cbf587" value="Arizona">Arizona</option> <option id="cbf588" value="Arkansas">Arkansas</option> 
bla bla bla... </select> <span class="cbFieldIcons"> <img src="components/com_comprofiler/plugin/templates/default/images/mini-icons/icon-16-required.png" border="0" alt="* This Field is required" title="This Field is required" width="16" height="16" /> <img src="components/com_comprofiler/plugin/templates/default/images/mini-icons/icon-16-profile-yes.png" border="0" alt="This Field IS visible on profile" title="This Field IS visible on profile" width="16" height="16" /></span></td>
</tr>
<label>SSH<input class="DEPENDS ON cb_country BEING Canada" name="ssh" type="checkbox" /></label> 
<tr>
<td class="contentpaneopen" colspan="2"></td>
</tr>
<tr>
<td colspan="2"><input class="button" type="submit" value="Register" /></td>
</tr>
</tbody>
</table>
</form></div>
</div>
</div>
</div>

 

The <label>ssh<input class bla bla bla works, it recognizes cb_country and understands when the correct option is selected, so I know this should work, but how do I get the existing cb_state to use the conditions to only show when United States is selected in cb_country?

 

I'm betting this is super simple and someone is going to see how to do this right away, I just need some fresh eyes on it.

 

BTW the url to the site is http://www.oohya.net/sandbox/oohya, click on the registration button at the top right.

[sfraise]

Ok, I got this working... kind of.

I have to replace the class with the depends on class in order to make this work.

How can I have both classes together?

For example, to have the state be conditional on the country I have to replace class="required" with class="DEPENDS ON cb_country BEING United States", I need to have both of these classes but I'm not exactly sure how.