Forums

I have a form I am building in V4.0

I have sucessfully got fields to show and hide using checkboxes from referencing Bob's FAQ 47 using Peter Paul Koch's Usable Forms Script.

I can't for the life of me get it to work with radio buttons however.

Am I missing something obvious?

Thanks.

Here's a bit more on this.

Below is the code that works just fine for the checkboxes, when I make them radio buttons, it doesn't work.

Each of the checkboxes triggers an element further down the page to reveal.

The usableforms.js is loaded in the head.

<div class="ccms_form_element cfdiv_checkboxgroup label_over" id="autoID-348c57a6983552d324684932cddcfdf2_container_div">
<label>Please choose your Industry Sector</label><input type="hidden" name="industry" value="" alt="ghost" />
<div style="float:left; clear:none;">
<! ---- THESE ARE THE CHECKBOXES I WOULD LIKE TO CONVERT TO RADIO BUTTONS ---- >
<input type="checkbox" name="industry[]" id="industry_chemmedsci" title="" value="ChemMedSci" class="validate['group[19]']" rel="chem"/>
<label for="industry_chemmedsci">Chemical Medical & Scientific</label>
<input type="checkbox" name="industry[]" id="industry_buildtimber" title="" value="BuildTimber" class="validate['group[19]']" rel="timber" />
<label for="industry_buildtimber">Builders and Timber Merchants</label><br />
<input type="checkbox" name="industry[]" id="industry_jeweller" title="" value="Jeweller" class="validate['group[19]']" rel="jewel"/>
<label for="industry_jeweller">Jeweller</label>
<input type="checkbox" name="industry[]" id="industry_marine" title="" value="Marine" class="validate['group[19]']" rel="marine" />
<label for="industry_marine">Marine Chandlers & Boatyards</label><br />
<! ----- THIS IS THE FIRST ELEMENT TO BE HIDDEN/SHOWN - WHEN SOMEONE SELECTED OTHER - A NEW TEXT BOX APPEARS ASKING THEM TO ENTER THEIR INDUSTRY ---- >
<input type="checkbox" name="industry[]" id="industry_other" title="" value="Other" class="validate['group[19]']" rel="industry" />
<label for="industry_other">Other</label></div>
<div id="error-message-industry"></div></div>
<div rel="industry" style="float:left">
<div class="small-message">If Other please enter your sector in the box below.</div>
<div class="ccms_form_element cfdiv_text" id="autoID-365be0877b9d7dea83651187ae969335_container_div"><input maxlength="150" size="30" class="" title="" type="text" value="" name="other" />
<div class="clear"></div><div id="error-message-other"></div></div></div>
<div id="error-message-other"></div></div></div></div>
<div style="clear:both"> </div>
<! ----- THESE ARE THE OTHER HIDDEN ELEMENTS THAT ARE TO BE SHOWN WHEN THEIR RELATED INDUSTRY SECTOR IS SELECTED ----- >
<div rel="timber">
<div style="clear:both"> </div>
<p><strong>Timber & Builders Merchants</strong></p>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_interbranch_transfer" title="" value="Interbranch Transfer" class="validate['group[16]']" />
<label for="input_checkbox_group_16_interbranch_transfer">Interbranch Transfer</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_timber_tally" title="" value="Timber Tally" class="validate['group[16]']" />
<label for="input_checkbox_group_16_timber_tally">Timber Tally</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_cutting_tool" title="" value="Cutting Tool" class="validate['group[16]']" />
<label for="input_checkbox_group_16_cutting_tool">Cutting Tool</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_splitting_a_pack" title="" value="Splitting a Pack" class="validate['group[16]']" />
<label for="input_checkbox_group_16_splitting_a_pack">Splitting a Pack</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_kitting" title="" value="Kitting" class="validate['group[16]']" />
<label for="input_checkbox_group_16_kitting">Kitting</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_door_scheduling" title="" value="Door Scheduling" class="validate['group[16]']" />
<label for="input_checkbox_group_16_door_scheduling">Door Scheduling</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_kits_in_cash_sales" title="" value="Kits in Cash Sales" class="validate['group[16]']" />
<label for="input_checkbox_group_16_kits_in_cash_sales">Kits in Cash Sales</label>
</div>
<div rel="jewel">
<div style="clear:both"> </div>
<p><strong>Jewellers</strong></p>
  <input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_repairs" title="" value="Repairs" class="validate['group[16]']" />
<label for="input_checkbox_group_16_repairs">Repairs</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_gift_vouchers" title="" value="Gift Vouchers" class="validate['group[16]']" />
<label for="input_checkbox_group_16_gift_vouchers">Gift Vouchers</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_valuations" title="" value="Valuations" class="validate['group[16]']" />
<label for="input_checkbox_group_16_valuations">Valuations</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_item_tags" title="" value="Item Tags" class="validate['group[16]']" />
<label for="input_checkbox_group_16_item_tags">Item Tags</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_metal_cost_tables" title="" value="Metal Cost Tables" class="validate['group[16]']" />
<label for="input_checkbox_group_16_metal_cost_tables">Metal Cost Tables</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_new_manufactured" title="" value="New Manufactured" class="validate['group[16]']" />
<label for="input_checkbox_group_16_new_manufactured">New Manufactured</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_stones_in_stock" title="" value="Stones in Stock" class="validate['group[16]']" />
<label for="input_checkbox_group_16_stones_in_stock">Stones in Stock</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_parcels" title="" value="Parcels" class="validate['group[16]']" />
<label for="input_checkbox_group_16_parcels">Parcels</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_rapaport" title="" value="Rapaport" class="validate['group[16]']" />
<label for="input_checkbox_group_16_rapaport">Rapaport</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_certified_diamonds" title="" value="Certified Diamonds" class="validate['group[16]']" />
<label for="input_checkbox_group_16_certified_diamonds">Certified Diamonds</label>
</div>
<div rel="marine">
<div style="clear:both"> </div>
<p><strong>Marine Chandlers & Boatyards</strong></p>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_seasonal_ordering" title="" value="Seasonal Ordering" class="validate['group[16]']" />
<label for="input_checkbox_group_16_seasonal_ordering">Seasonal Ordering</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_future_pricing_label_print" title="" value="Future Pricing Label Print" class="validate['group[16]']" />
<label for="input_checkbox_group_16_future_pricing_label_print">Future Pricing Label Print</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_related_sales_orders" title="" value="Related Sales Orders" class="validate['group[16]']" />
<label for="input_checkbox_group_16_related_sales_orders">Related Sales Orders</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_boat_management" title="" value="Boat Management" class="validate['group[16]']" />
<label for="input_checkbox_group_16_boat_management">Boat Management</label>
</div>
<div rel="chem">
<div style="clear:both"> </div>
<p><strong>Chemical, Medical  & Scientific</strong></p>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_packaging_and_hazardous_goods" title="" value="Packaging and Hazardous Goods" class="validate['group[16]']" />
<label for="input_checkbox_group_16_packaging_and_hazardous_goods">Packaging & Hazardous Goods Info</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_recipes_and_formulas" title="" value="Recipes and Formulas" class="validate['group[16]']" />
<label for="input_checkbox_group_16_recipes_and_formulas">Recipes & Formulas</label>
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_production_planning" title="" value="Production Planning" class="validate['group[16]']" />
<label for="input_checkbox_group_16_production_planning">Production Planning</label>
</div><div class="clear"></div><div id="error-message-input_checkbox_group_16"></div></div>
</div>

When I took the logical (I thought) route to convert these to radio buttons

<div class="ccms_form_element cfdiv_radio label_over" id="autoID-0ab8bc298df134f9c5ecca07ed1080ab_container_div"><label>Choose your industry</label><input type="hidden" name="input_radio_20" value="" alt="ghost" />
<div style="float:left; clear:none;">
<input type="radio" name="input_radio_20" id="input_radio_20_chemical_medical_scientific" title="" value="Chemical Medical & Scientific" class="validate['required']" rel="chem" />
<label for="input_radio_20_chemical_medical_scientific">Chemical Medical & Scientific</label>
<input type="radio" name="input_radio_20" id="input_radio_20_builders_and_timber_merchants" title="" value="Builders and Timber Merchants" class="validate['required']" rel="timber"/>
<label for="input_radio_20_builders_and_timber_merchants">Builders and Timber Merchants</label>
<input type="radio" name="input_radio_20" id="input_radio_20_jeweller" title="" value="Jeweller" class="validate['required']" rel="jewel" />
<label for="input_radio_20_jeweller">Jeweller</label>
<input type="radio" name="input_radio_20" id="input_radio_20_marine_chandlers_boatyards" title="" value="Marine Chandlers & Boatyards" class="validate['required']" rel="marine" />
<label for="input_radio_20_marine_chandlers_boatyards">Marine Chandlers & Boatyards</label>
<input type="radio" name="input_radio_20" id="input_radio_20_other" title="" value="Other" class="validate['required']" rel="industry" />
<label for="input_radio_20_other">Other</label>
</div><div class="clear"></div><div id="error-message-input_radio_20"></div></div>

The divs don't unhide when the radio buttons are selected.

Any pointers much appreciated.

thanks.

Hi datatonic ,

The radio button code looks OK to me. I haven't tried this with CFv4 but I've used radio buttons OK with CFv3. Please post a link to the form so I can take a quick look.

Bob

Form Here

The form with the checkboxes is live and under the arrange demo link on the site.

This form breaks the dropdown menu too (think this is a rocket theme issue though)

If you need admin access please let me know.

Hi datatonic,

Please turn off 'Input Formatting' in the template advanced options and see if that solves the problem.

Bob

Nope no change - well apart from the input formatting of course 😀

I've left it off for now.

Hi datatonic,

I can pin it down to a problem with this line

removeOthers(tg.form[tg.name],fieldsToBeInserted)

tg.form[tg.name] should give an array of elements but it returns null. My JavaScript runs out about here though and I can’t see what causes the error or how to fix it :-(

Bob

Checkboxes it is then. Never know there might be a Timber merchant somewhere that sells jewellery!

I'll keep digging if I find something I'll report back.

Got another problem. Same form. I.E. behaves in the opposite way than expected or wanted. Checking a box doesn't bring up the hidden fields, if you uncheck it again, it does.

Hi Datatonic,

I think that's a problem with the IE definition of OnChange. I had it happen recently on another site.

Yes, this fixed it for them:

$('input_radio_country_united_states').addEvent('change', selectDiv);
  $('input_radio_country_canada').addEvent('change', selectDiv);

Try replacing ‘change’ with ‘click’

Bob

No go there.

IE seems to interact with the label rather than the checkbox.

Hi datatonic,

Hmmm, should be Ok if you are using the input ids.

Bob

Ok I had another problem so I went back to the drawing board with the way I was doing this. I dumped usableforms.js and started using this instead.

  function showhidemanu()
  {
    if (document.Arrange_Demo_Form.manu.checked)
    {
      document.getElementById("hideablemanu").style.display = "block";
    }
    else
    {
      document.getElementById("hideablemanu").style.display = "none";
    }
  }

<div style="float:left; width:15%; display:none;" id="hideablemanu" >
<input type="checkbox" name="input_checkbox_group_16[]" id="input_checkbox_group_16_works_orders" title="" value="Works Orders" class="validate['group[16]']" />
</div>

And still IE behaves weirdly I'm truly stumped.