Question on building dependant dd for registration

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:
[code:1]
<label>State:<input type="select" name="state" class="DEPENDS ON cb_country BEING United States"
</label>
[/code:1]
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.

[code:1]<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>[/code:1]

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 www.oohya.net/sandbox/oohya , click on the registration button at the top right.

Post edited by: sfraise, at: 2010/09/22 23:58

Post edited by: sfraise, at: 2010/09/23 00:20

I saw this was moved, just to be clear I'm not requesting that someone else develop this, I'm just hoping that someone can point out what I'm doing wrong building this myself. Like I said, I can get the dependency to work FROM the cb field data, I just can't seem to get it to APPLY to the cb fields.

If you go to the sandbox page for this site at www.oohya.net/sandbox/oohya and click the register button you can see the form, if you choose Canada as the country you'll see a little box appear at the top that says ssh which is just a simple test to make sure the script works with the cb fields which it does, but what I can't do is make the state field only appear when the united states is selected.

I hope I'm being clear on this, it's tough trying to explain what I'm trying to do and what I'm struggling with clearly.

Once I'm able to get this to work this way I then want to try and build an actual plugin for this as I know there is a lot of desire for this functionality, but I need this to work as soon as possible as this is for a professional project and I need something to show on this soon.

Post edited by: sfraise, at: 2010/09/23 17:11

Ok I got this working..... Kind of.
The only way I can get this to work is to REPLACE the class with the DEPENDS ON class. For example, to get the state to be conditional I had to replace class="required" with class="DEPENDS ON cb_country BEING United States". And for the Alabama city field I had to replace class="input" with class="DEPENDS ON cb_state BEING Alabama AND DEPENDS ON cb_country BEING United States".

So question 1: how can I get both classes to co exist together? The html editor in Joomla removes the additional class if I try to have both together, and using a ; between the classes don't seem to work.

Question 2: This only removes the actual drop down box, it won't remove the titles and icons and no matter how I try to wrap it I can't get this to remove those. I'm sure I can set this up without using those on the conditional fields but I would like to be able to if I could.

Once I get the kinks all worked out on setting this up through the html like I'm doing now, I'm going to sit down with the API and try to turn this into a plugin, if anyone wants to collaborate on this that really knows the comprofiler well I'm more than happy to have the help. I think if we can get a good solid cb plugin that adds the conditional fields option there will be a lot of really happy cb useres out there.

Ok, I may have found a solution, would like some feedback on it.

I set the class as class="required AND DEPENDS ON cb_country BEING United States"

The form seems to work ok using this, is this an acceptable way to do this, is the class="required part still getting passed correctly like this?

It all seems to work ok and looks fine, not sure if it's exactly w3c compliant or not but it does the job.
My next step is to turn this into an actual cb plugin but it's going to take a while as there is a lot more to figure out than just throwing a bit of java into some html there. I'll probably be back asking some more questions when I tackle that.

In the mean while, here's the code that I use in the light box html section for the form with dependent dropdowns. The script I'm using to power the dropdowns can be found at dynamicdrive.com:
[code:1]
<h3>Registration</h3>
<div class="cb_template_default">
<div class="contentpaneopen">
<div class="cb_comp_outer">
<div class="cb_comp_inner cbHtmlEdit cbRegistration"><form id="cbcheckedadminForm" action=" www.oohya.net/sandbox/oohya/index.php?option=com_comprofiler " enctype="multipart/form-data" method="post">
<table id="registrationTable" class="contentpane" border="0">
<tbody>
<tr id="cbfr_41" class="sectiontableentry1 cbft_predefined">
<td class="titleCell"><label title="Name:«»Please enter your real full name." for="name">Name:</label></td>
<td id="cbfv_41" class="fieldCell"><input id="name" class="required inputbox" title="Name: Please enter your real full name." name="name" size="25" type="text" /><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-no.png" border="0" alt="This Field IS NOT visible on profile" title="This Field IS NOT visible on profile" width="16" height="16" /> <img src="components/com_comprofiler/plugin/templates/default/images/mini-icons/icon-16-info.png" border="0" alt="Information for: Name : Please enter your real full name." onmouseover="return overlib('Please enter your real full name.', CAPTION, 'Name');" onmouseout="return nd();" /></span></td>
</tr>
<tr id="cbfr_50" class="sectiontableentry2 cbft_primaryemailaddress">
<td class="titleCell"><label title="Email:«»Please enter a valid e-mail address. A confirmation email will be sent to this address upon registration." for="email">Email:</label></td>
<td id="cbfv_50" class="fieldCell"><input id="email" class="email required inputbox" title="Email: Please enter a valid e-mail address. A confirmation email will be sent to this address upon registration." name="email" size="25" type="text" /><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-no.png" border="0" alt="This Field IS NOT visible on profile" title="This Field IS NOT visible on profile" width="16" height="16" /> <img src="components/com_comprofiler/plugin/templates/default/images/mini-icons/icon-16-info.png" border="0" alt="Information for: Email : Please enter a valid e-mail address. A confirmation email will be sent to this address upon registration." onmouseover="return overlib('Please enter a valid e-mail address. A confirmation email will be sent to this address upon registration.', CAPTION, 'Email');" onmouseout="return nd();" /></span></td>
</tr>
<tr id="cbfr_42" class="sectiontableentry1 cbft_predefined">
<td class="titleCell"><label title="Username:«»Please enter a valid username. No spaces, at least 3 characters and contain 0-9,a-z,A-Z" for="username">Username:</label></td>
<td id="cbfv_42" class="fieldCell"><input id="username" class="required inputbox" title="Username: Please enter a valid username. No spaces, at least 3 characters and contain 0-9,a-z,A-Z" name="username" size="25" type="text" /><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" /> <img src="components/com_comprofiler/plugin/templates/default/images/mini-icons/icon-16-info.png" border="0" alt="Information for: Username : Please enter a valid username. No spaces, at least 3 characters and contain 0-9,a-z,A-Z" onmouseover="return overlib('Please enter a valid username. No spaces, at least 3 characters and contain 0-9,a-z,A-Z', CAPTION, 'Username');" onmouseout="return nd();" /></span></td>
</tr>
<tr id="cbfr_51" class="sectiontableentry2 cbft_password">
<td class="titleCell"><label title="Password:«»Please enter a valid password. No spaces, at least 6 characters and contain lower and upper-case letters, numbers and special signs" for="password">Password:</label></td>
<td id="cbfv_51" class="fieldCell"><input id="password" class="{minlength:6} required inputbox" title="Password: Please enter a valid password. No spaces, at least 6 characters and contain lower and upper-case letters, numbers and special signs" maxlength="50" name="password" size="25" type="password" /><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-no.png" border="0" alt="This Field IS NOT visible on profile" title="This Field IS NOT visible on profile" width="16" height="16" /> <img src="components/com_comprofiler/plugin/templates/default/images/mini-icons/icon-16-info.png" border="0" alt="Information for: Password : Please enter a valid password. No spaces, at least 6 characters and contain lower and upper-case letters, numbers and special signs" onmouseover="return overlib('Please enter a valid password. No spaces, at least 6 characters and contain lower and upper-case letters, numbers and special signs', CAPTION, 'Password');" onmouseout="return nd();" /></span></td>
</tr>
<tr id="cbfr_51__verify" class="sectiontableentry2 cbft_password">
<td class="titleCell"><label title="Verify Password:«»Please enter a valid password. No spaces, at least 6 characters and contain lower and upper-case letters, numbers and special signs" for="password__verify">Verify Password:</label></td>
<td id="cbfv_51__verify" class="fieldCell"><input id="password__verify" class="{minlength:6,equalTo:'#password'} required inputbox" title="Verify Password: Please enter a valid password. No spaces, at least 6 characters and contain lower and upper-case letters, numbers and special signs" maxlength="50" name="password__verify" size="25" type="password" /><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-no.png" border="0" alt="This Field IS NOT visible on profile" title="This Field IS NOT visible on profile" width="16" height="16" /> <img src="components/com_comprofiler/plugin/templates/default/images/mini-icons/icon-16-info.png" border="0" alt="Information for: Verify Password : Please enter a valid password. No spaces, at least 6 characters and contain lower and upper-case letters, numbers and special signs" onmouseover="return overlib('Please enter a valid password. No spaces, at least 6 characters and contain lower and upper-case letters, numbers and special signs', CAPTION, 'Verify Password');" onmouseout="return nd();" /></span></td>
</tr>
<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> <option id="cbf400" value="Cape Verde">Cape Verde</option> <option id="cbf401" value="Cayman Islands">Cayman Islands</option> <option id="cbf402" value="Chad">Chad</option> <option id="cbf403" value="Chile">Chile</option> <option id="cbf404" value="China">China</option> <option id="cbf405" value="Christmas Island">Christmas Island</option> <option id="cbf406" value="Cocos Islands">Cocos Islands</option> <option id="cbf407" value="Columbia">Columbia</option> <option id="cbf408" value="Comoros">Comoros</option> <option id="cbf409" value="Congo">Congo</option> <option id="cbf410" value="Cook Islands">Cook Islands</option> <option id="cbf411" value="Costa Rica">Costa Rica</option> <option id="cbf412" value="Cote D'Ivoire">Cote D'Ivoire</option> <option id="cbf413" value="Croatia">Croatia</option> <option id="cbf414" value="Cuba">Cuba</option> <option id="cbf415" value="Cyprus">Cyprus</option> <option id="cbf416" value="Czech Republic">Czech Republic</option> <option id="cbf417" value="Denmark">Denmark</option> <option id="cbf418" value="Djibouti">Djibouti</option> <option id="cbf419" value="Dominica">Dominica</option> <option id="cbf420" value="Dominican Republic">Dominican Republic</option> <option id="cbf421" value="East Timor">East Timor</option> <option id="cbf422" value="Ecuador">Ecuador</option> <option id="cbf423" value="Egypt">Egypt</option> <option id="cbf424" value="El Salvador">El Salvador</option> <option id="cbf425" value="Equatorial Guinea">Equatorial Guinea</option> <option id="cbf426" value="Eritrea">Eritrea</option> <option id="cbf427" value="Estonia">Estonia</option> <option id="cbf428" value="Ethiopia">Ethiopia</option> <option id="cbf429" value="Falkland Islands">Falkland Islands</option> <option id="cbf430" value="Faroe Islands">Faroe Islands</option> <option id="cbf431" value="Fiji">Fiji</option> <option id="cbf432" value="Finland">Finland</option> <option id="cbf433" value="France">France</option> <option id="cbf434" value="French Guiana">French Guiana</option> <option id="cbf435" value="French Polynesia">French Polynesia</option> <option id="cbf436" value="Gabon">Gabon</option> <option id="cbf437" value="Gambia">Gambia</option> <option id="cbf438" value="Georgia">Georgia</option> <option id="cbf439" value="Germany">Germany</option> <option id="cbf440" value="Ghana">Ghana</option> <option id="cbf441" value="Gibraltar">Gibraltar</option> <option id="cbf442" value="Greece">Greece</option> <option id="cbf443" value="Greenland">Greenland</option> <option id="cbf444" value="Grenada">Grenada</option> <option id="cbf445" value="Guadeloupe">Guadeloupe</option> <option id="cbf446" value="Guam">Guam</option> <option id="cbf447" value="Guatemala">Guatemala</option> <option id="cbf448" value="Guernsey">Guernsey</option> <option id="cbf449" value="Guinea">Guinea</option> <option id="cbf450" value="Guyana">Guyana</option> <option id="cbf451" value="Haiti">Haiti</option> <option id="cbf452" value="Honduras">Honduras</option> <option id="cbf453" value="Hong Kong">Hong Kong</option> <option id="cbf454" value="Hungary">Hungary</option> <option id="cbf455" value="Iceland">Iceland</option> <option id="cbf456" value="India">India</option> <option id="cbf457" value="Indonesia">Indonesia</option> <option id="cbf458" value="Iran">Iran</option> <option id="cbf459" value="Iraq">Iraq</option> <option id="cbf460" value="Ireland">Ireland</option> <option id="cbf461" value="Israel">Israel</option> <option id="cbf462" value="Italy">Italy</option> <option id="cbf463" value="Ivory Coast">Ivory Coast</option> <option id="cbf464" value="Jamaica">Jamaica</option> <option id="cbf465" value="Japan">Japan</option> <option id="cbf466" value="Jersey">Jersey</option> <option id="cbf467" value="Jordan">Jordan</option> <option id="cbf468" value="Kazakhstan">Kazakhstan</option> <option id="cbf469" value="Kenya">Kenya</option> <option id="cbf470" value="Kiribati">Kiribati</option> <option id="cbf471" value="Kosovo">Kosovo</option> <option id="cbf472" value="Kuwait">Kuwait</option> <option id="cbf473" value="Kyrgyzstan">Kyrgyzstan</option> <option id="cbf474" value="Lao">Lao</option> <option id="cbf475" value="Latvia">Latvia</option> <option id="cbf476" value="Lebanon">Lebanon</option> <option id="cbf477" value="Lesotho">Lesotho</option> <option id="cbf478" value="Liberia">Liberia</option> <option id="cbf479" value="Liechtenstein">Liechtenstein</option> <option id="cbf480" value="Lithuania">Lithuania</option> <option id="cbf481" value="Luxembourg">Luxembourg</option> <option id="cbf482" value="Macedonia">Macedonia</option> <option id="cbf483" value="Madagascar">Madagascar</option> <option id="cbf484" value="Malawi">Malawi</option> <option id="cbf485" value="Malaysia">Malaysia</option> <option id="cbf486" value="Maldives">Maldives</option> <option id="cbf487" value="Mali">Mali</option> <option id="cbf488" value="Malta">Malta</option> <option id="cbf489" value="Marshall Islands">Marshall Islands</option> <option id="cbf490" value="Martinique">Martinique</option> <option id="cbf491" value="Mauritania">Mauritania</option> <option id="cbf492" value="Mauritius">Mauritius</option> <option id="cbf493" value="Mayotte">Mayotte</option> <option id="cbf494" value="Mexico">Mexico</option> <option id="cbf495" value="Micronesia">Micronesia</option> <option id="cbf496" value="Moldova">Moldova</option> <option id="cbf497" value="Monaco">Monaco</option> <option id="cbf498" value="Mongolia">Mongolia</option> <option id="cbf499" value="Montenegro">Montenegro</option> <option id="cbf500" value="Montserrat">Montserrat</option> <option id="cbf501" value="Morocco">Morocco</option> <option id="cbf502" value="Mozambique">Mozambique</option> <option id="cbf503" value="Myanmar">Myanmar</option> <option id="cbf504" value="Namibia">Namibia</option> <option id="cbf505" value="Mauru">Mauru</option> <option id="cbf506" value="Nepal">Nepal</option> <option id="cbf507" value="Netherlands">Netherlands</option> <option id="cbf508" value="New Caledonia">New Caledonia</option> <option id="cbf509" value="New Zealand">New Zealand</option> <option id="cbf510" value="Nicaragua">Nicaragua</option> <option id="cbf511" value="Niger">Niger</option> <option id="cbf512" value="Nigeria">Nigeria</option> <option id="cbf513" value="Niue">Niue</option> <option id="cbf514" value="Norfolk Island">Norfolk Island</option> <option id="cbf515" value="Norway">Norway</option> <option id="cbf516" value="Oceania">Oceania</option> <option id="cbf517" value="Oman">Oman</option> <option id="cbf518" value="Pakistan">Pakistan</option> <option id="cbf519" value="Palau">Palau</option> <option id="cbf520" value="Panama">Panama</option> <option id="cbf521" value="Papua New Guinea">Papua New Guinea</option> <option id="cbf522" value="Paraguay">Paraguay</option> <option id="cbf523" value="Peru">Peru</option> <option id="cbf524" value="Philippines">Philippines</option> <option id="cbf525" value="Pitcairn Island">Pitcairn Island</option> <option id="cbf526" value="Poland">Poland</option> <option id="cbf527" value="Portugal">Portugal</option> <option id="cbf528" value="Puerto Rico">Puerto Rico</option> <option id="cbf529" value="Qatar">Qatar</option> <option id="cbf530" value="Reunion">Reunion</option> <option id="cbf531" value="Romania">Romania</option> <option id="cbf532" value="Russia">Russia</option> <option id="cbf533" value="Rwanda">Rwanda</option> <option id="cbf534" value="Saint Lucia">Saint Lucia</option> <option id="cbf535" value="Saint Martin">Saint Martin</option> <option id="cbf536" value="Samoa">Samoa</option> <option id="cbf537" value="San Marino">San Marino</option> <option id="cbf538" value="Sao Tome & Principe">Sao Tome & Principe</option> <option id="cbf539" value="Saudi Arabia">Saudi Arabia</option> <option id="cbf540" value="Senegal">Senegal</option> <option id="cbf541" value="Serbia">Serbia</option> <option id="cbf542" value="Seychelles">Seychelles</option> <option id="cbf543" value="Sierra Leone">Sierra Leone</option> <option id="cbf544" value="Singapore">Singapore</option> <option id="cbf545" value="Slovakia">Slovakia</option> <option id="cbf546" value="Slovenia">Slovenia</option> <option id="cbf547" value="Solomon Islands">Solomon Islands</option> <option id="cbf548" value="Somalia">Somalia</option> <option id="cbf549" value="South Africa">South Africa</option> <option id="cbf550" value="Spain">Spain</option> <option id="cbf551" value="Sri Lanka">Sri Lanka</option> <option id="cbf552" value="Sudan">Sudan</option> <option id="cbf553" value="Suriname">Suriname</option> <option id="cbf554" value="Swaziland">Swaziland</option> <option id="cbf555" value="Sweden">Sweden</option> <option id="cbf556" value="Switzerland">Switzerland</option> <option id="cbf557" value="Syria">Syria</option> <option id="cbf558" value="Taiwan">Taiwan</option> <option id="cbf559" value="Tajikistan">Tajikistan</option> <option id="cbf560" value="Tanzania">Tanzania</option> <option id="cbf561" value="Thailand">Thailand</option> <option id="cbf562" value="Timor-Leste">Timor-Leste</option> <option id="cbf563" value="Togo">Togo</option> <option id="cbf564" value="Tokelau">Tokelau</option> <option id="cbf565" value="Tonga">Tonga</option> <option id="cbf566" value="Trinidad & Tobago">Trinidad & Tobago</option> <option id="cbf567" value="Tunisia">Tunisia</option> <option id="cbf568" value="Turkey">Turkey</option> <option id="cbf569" value="Turkmenistan">Turkmenistan</option> <option id="cbf570" value="Tuvalu">Tuvalu</option> <option id="cbf571" value="Uganda">Uganda</option> <option id="cbf572" value="Ukraine">Ukraine</option> <option id="cbf573" value="United Arab Emirates">United Arab Emirates</option> <option id="cbf574" value="United Kingdom">United Kingdom</option> <option id="cbf575" value="Uruguay">Uruguay</option> <option id="cbf576" value="Uzbekistan">Uzbekistan</option> <option id="cbf577" value="Vanuatu">Vanuatu</option> <option id="cbf578" value="Venezuela">Venezuela</option> <option id="cbf579" value="Viet Nam">Viet Nam</option> <option id="cbf580" value="Virgin Islands">Virgin Islands</option> <option id="cbf581" value="Wallis & Futuna">Wallis & Futuna</option> <option id="cbf582" value="Yemen">Yemen</option> <option id="cbf583" value="Zambia">Zambia</option> <option id="cbf584" value="Zimbabwe">Zimbabwe</option> </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="sectiontableentry1 cbft_select">
<td class="titleCell"><label>State:<input class="DEPENDS ON cb_country BEING United States" type="hidden" /></label><label>Province:<input class="DEPENDS ON cb_country BEING Canada" type="hidden" /></label></td>
<td class="fieldcell"><select id="cb_state" class="inputbox AND DEPENDS ON cb_country BEING United States" name="cb_state"> <option> </option><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> <option id="cbf589" value="California">California</option> <option id="cbf590" value="Colorado">Colorado</option> <option id="cbf591" value="Connecticut">Connecticut</option> <option id="cbf592" value="Delaware">Delaware</option> <option id="cbf593" value="District of Columbia">District of Columbia</option> <option id="cbf594" value="Florida">Florida</option> <option id="cbf595" value="Georgia">Georgia</option> <option id="cbf596" value="Hawaii">Hawaii</option> <option id="cbf597" value="Idaho">Idaho</option> <option id="cbf598" value="Illinois">Illinois</option> <option id="cbf599" value="Indiana">Indiana</option> <option id="cbf600" value="Iowa">Iowa</option> <option id="cbf601" value="Kansas">Kansas</option> <option id="cbf602" value="Kentucky">Kentucky</option> <option id="cbf603" value="Louisiana">Louisiana</option> <option id="cbf604" value="Maine">Maine</option> <option id="cbf605" value="Maryland">Maryland</option> <option id="cbf606" value="Massachusetts">Massachusetts</option> <option id="cbf607" value="Michigan">Michigan</option> <option id="cbf608" value="Minnesota">Minnesota</option> <option id="cbf609" value="Mississippi">Mississippi</option> <option id="cbf610" value="Missouri">Missouri</option> <option id="cbf611" value="Montana">Montana</option> <option id="cbf612" value="Nebraska">Nebraska</option> <option id="cbf613" value="Nevada">Nevada</option> <option id="cbf614" value="New Hampshire">New Hampshire</option> <option id="cbf615" value="New Jersey">New Jersey</option> <option id="cbf616" value="New Mexico">New Mexico</option> <option id="cbf617" value="New York">New York</option> <option id="cbf618" value="North Carolina">North Carolina</option> <option id="cbf619" value="North Dakota">North Dakota</option> <option id="cbf620" value="Ohio">Ohio</option> <option id="cbf621" value="Oklahoma">Oklahoma</option> <option id="cbf622" value="Oregon">Oregon</option> <option id="cbf623" value="Pennsylvania">Pennsylvania</option> <option id="cbf624" value="Rhode Island">Rhode Island</option> <option id="cbf625" value="South Carolina">South Carolina</option> <option id="cbf626" value="South Dakota">South Dakota</option> <option id="cbf627" value="Tennessee">Tennessee</option> <option id="cbf628" value="Texas">Texas</option> <option id="cbf629" value="Utah">Utah</option> <option id="cbf630" value="Vermont">Vermont</option> <option id="cbf631" value="Virginia">Virginia</option> <option id="cbf632" value="Washington">Washington</option> <option id="cbf633" value="West Virginia">West Virginia</option> <option id="cbf634" value="Wisconsin">Wisconsin</option> <option id="cbf635" value="Wyoming">Wyoming</option> </select><select id="cb_caprovince" class="inputbox AND DEPENDS ON cb_country BEING Canada" name="cb_caprovince"> <option> </option> <option id="cbf693" value="Alberta">Alberta</option> <option id="cbf694" value="British Columbia">British Columbia</option> <option id="cbf695" value="Manitoba">Manitoba</option> <option id="cbf696" value="New Brunswick">New Brunswick</option> <option id="cbf697" value="NewFoundland">NewFoundland</option> <option id="cbf698" value="North West Territories">North West Territories</option> <option id="cbf699" value="Nova Scotia">Nova Scotia</option> <option id="cbf700" value="Nunavut">Nunavut</option> <option id="cbf701" value="Ontario">Ontario</option> <option id="cbf702" value="Prince Edward Island">Prince Edward Island</option> <option id="cbf703" value="Quebec">Quebec</option> <option id="cbf704" value="Saskatchewan">Saskatchewan</option> <option id="cbf705" value="Yukon">Yukon</option></select></td>
</tr>
<tr id="cbfr_57" class="sectiontableentry1 cbft_select">
<td class="titleCell"><label>City:<input class="DEPENDS ON cb_country BEING United States AND DEPENDS ON cb_state BEING Alabama" type="hidden" /></label><label>City:<input class="DEPENDS ON cb_country BEING United States AND DEPENDS ON cb_state BEING Alaska" type="hidden" /></label></td>
<td class="fieldcell"><select id="cb_cityal" class="inputbox AND DEPENDS ON cb_state BEING Alabama AND DEPENDS ON cb_country BEING United States" name="cb_cityal"> <option> </option></select><select id="cb_cityak" class="inputbox AND DEPENDS ON cb_state BEING Alaska AND DEPENDS ON cb_country BEING United States" name="cb_cityak"> <option> </option> </select></td>
</tr>
<tr>
<td class="titlecell"><br /><input class="button" type="submit" value="Register" /></td>
</tr>
</tbody>
</table>
</form></div>
</div>
</div>
</div>
[/code:1]
You can see the actual form in action at www.oohya.net/sandbox/oohya and just click on the registration button at the top right.

I'm all ears for criticism on this, feel free to fire away. I'm also all ears on tips on turning this into a cb plugin.

Post edited by: sfraise, at: 2010/09/26 00:50

Does anyone have any ideas on how to use the cb captcha with this method?