Conditional Form Fields

Hi All,

I'm struggling to get a section to show when the radio button "Yes" is selected. This is an RSVP form. The user is required to type in his Name and Surname. Followed by if they coming or not by selecting "Yes" or "No". If "Yes" is selected, dietary requirements and number of attendees is asked.

Unfortunately the many other threads are a bit over my head. But I have learned that I need to use the usableforms.js and "rel" tags. I just can't seem to get it to work though. Please feel free to copy the code into a test form. Here is the code:

<script type="text/javascript" src="/components/com_chronoforms/js/usableforms.js"></script>

<form action=
  "http://test.com/index.php?option=com_chronoforms&chronoform=-test&event=submit"
  name="yearendrsvp-test" id="chronoform_yearendrsvp-test" method="post" class=
  "Chronoform">
    <div class="ccms_form_element cfdiv_text" id="first_name_container_div">
      <label>First Name</label><input maxlength="150" size="30" class=
      "validate['required','nodigit']" title="" label_over="0" hide_label="0" type="text"
      value="" name="input_fname_0" />

      <div class="clear"></div>

      <div id="error-message-input_fname_0"></div>
    </div>

    <div class="ccms_form_element cfdiv_text" id="surname_container_div">
      <label>Surname</label><input maxlength="150" size="30" class=
      "validate['required','nodigit']" title="" label_over="0" hide_label="0" type="text"
      value="" name="input_srname_1" />

      <div class="clear"></div>

      <div id="error-message-input_srname_1"></div>
    </div>

    <div class="ccms_form_element cfdiv_radio" id="will_you_be_attending__container_div">
      <label>Will you be attending?</label><input type="hidden" name="input_radio_0"
      value="" alt="ghost" /> <input rel="input_radio_0_yes" type="radio" name="input_radio_0" id=
      "input_radio_0_yes" title="" value="Yes" class="validate['required']" />
      <label for="input_radio_0_yes">Yes</label> <input type="radio" name="input_radio_0"
      id="input_radio_0_no" title="" value="No" class="validate['required']" />
      <label for="input_radio_0_no">No</label>

      <div class="clear"></div>

      <div id="error-message-input_radio_0"></div>
    </div>
	
	<div rel="input_radio_0_yes">
    <div class="ccms_form_element cfdiv_select" id="number_of_attendees_container_div">
      <label>Number of Attendees</label><select size="1" label_over="0" hide_label="0"
      class="" title="" type="select" name="input_attndees_10">
        <option value="">
          Please select
        </option>

        <option value="1">
          1
        </option>

        <option value="2">
          2
        </option>
      </select>

      <div class="clear"></div>

      <div id="error-message-input_attndees_10"></div>
    </div>

    <div class="ccms_form_element cfdiv_select" id="dietary_requirements_container_div">
      <label>Dietary Requirements</label><select size="1" label_over="0" hide_label="0"
      class="" title="" type="select" name="input_diet_7">
        <option value="">
          Please select
        </option>

        <option value="None">
          None
        </option>

        <option value="Halal">
          Halal
        </option>

        <option value="Vegetarian">
          Vegetarian
        </option>

        <option value="Other">
          Other
        </option>
      </select>
	
      <div class="clear"></div>

      <div id="error-message-input_diet_7"></div>
    </div>
	</div>
    <div class="ccms_form_element cfdiv_submit" id="input_submit_9_container_div">
      <input name="input_submit_9" class="" value="Submit" type="submit" />

      <div class="clear"></div>

      <div id="error-message-input_submit_9"></div>
    </div><input type="hidden" name="254e95125455a864022cfee2d0ea6b6e" value="1" />
  </form>

Hi,

I managed to fix it by adding the following LoadJS:

function attending(){

    if (document.forms[0].input_radio_0_yes.checked) {

        document.getElementById("rsvp_yes").style.display = 'inline';

      } else {

        document.getElementById("rsvp_yes").style.display = 'none';

      }
    }

function attending_no(){

    if (document.forms[0].input_radio_0_no.checked) {

        document.getElementById("rsvp_yes").style.display = 'none';

      }
    }

Then added onClick= to call the functions like so:

<form action=
  "http://test/index.php?option=com_chronoforms&chronoform=yearendrsvp-test&event=submit"
  name="yearendrsvp-test" id="chronoform_yearendrsvp-test" method="post" class=
  "Chronoform">
    <div class="ccms_form_element cfdiv_text" id="first_name_container_div">
      <label>First Name</label><input maxlength="150" size="30" class=
      "validate['required','nodigit']" title="" label_over="0" hide_label="0" type="text"
      value="" name="input_fname_0" />

      <div class="clear"></div>

      <div id="error-message-input_fname_0"></div>
    </div>

    <div class="ccms_form_element cfdiv_text" id="surname_container_div">
      <label>Surname</label><input maxlength="150" size="30" class=
      "validate['required','nodigit']" title="" label_over="0" hide_label="0" type="text"
      value="" name="input_srname_1" />

      <div class="clear"></div>

      <div id="error-message-input_srname_1"></div>
    </div>

    <div class="ccms_form_element cfdiv_radio" id="will_you_be_attending__container_div">
      <label>Will you be attending?</label><input type="hidden" name="input_radio_0"
      value="" alt="ghost" /> <input onClick="attending();" type="radio" name="input_radio_0" id=
      "input_radio_0_yes" title="" value="Yes" class="validate['required']" />
      <label for="input_radio_0_yes">Yes</label> <input type="radio" onClick="attending_no();" name="input_radio_0"
      id="input_radio_0_no" title="" value="No" class="validate['required']" />
      <label for="input_radio_0_no">No</label>

      <div class="clear"></div>

      <div id="error-message-input_radio_0"></div>
    </div>
	
	<div id="rsvp_yes" style="display:none;">
    <div class="ccms_form_element cfdiv_select" id="number_of_attendees_container_div">
      <label>Number of Attendees</label><select size="1" label_over="0" hide_label="0"
      class="" title="" type="select" name="input_attndees_10">
        <option value="">
          Please select
        </option>

        <option value="1">
          1
        </option>

        <option value="2">
          2
        </option>
      </select>

      <div class="clear"></div>

      <div id="error-message-input_attndees_10"></div>
    </div>

    <div class="ccms_form_element cfdiv_select" id="dietary_requirements_container_div">
      <label>Dietary Requirements</label><select size="1" label_over="0" hide_label="0"
      class="" title="" type="select" name="input_diet_7">
        <option value="">
          Please select
        </option>

        <option value="None">
          None
        </option>

        <option value="Halal">
          Halal
        </option>

        <option value="Vegetarian">
          Vegetarian
        </option>

        <option value="Other">
          Other
        </option>
      </select>
	
      <div class="clear"></div>

      <div id="error-message-input_diet_7"></div>
    </div>
	</div>
	
    <div class="ccms_form_element cfdiv_submit" id="input_submit_9_container_div">
      <input name="input_submit_9" class="" value="Submit" type="submit" />

      <div class="clear"></div>

      <div id="error-message-input_submit_9"></div>
    </div><input type="hidden" name="254e95125455a864022cfee2d0ea6b6e" value="1" />
  </form>

The only problem I'm experiencing now is validation. Submit ignores validation for the two drop downs regardless of their state. Firstname and Surname validation is working. Ideally I would like validation to only apply to Dietary Requirements and Attendees if "Yes" is selected. Anybody have any ideas?

Select diet and Attendees is validating now. I still can't get it to stop validating if "No" is selected. I'm trying to use getElementByID.removeClass('required'); but it doesn't seem to work. I added "id=" to each select to correspond as below:

       select.getElementById("input_attndees_10").removeClass('required');
       select.getElementById("input_diet_7").removeClass('required');

Hi Ross,

Please see this post where i worked out an example. You need to use the formcheck.register() and formcheck.dispose() methods to turn the validation on and off. Adding and emoving the classes won't work once he form is loaded in the browsr.

Bob