• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 2 posts ] 
Author Message
 Post subject: Hide/Show fields on a form
PostPosted: Thu Sep 13, 2012 11:33 pm 
Offline
Power Poster
Power Poster

Joined: Sat Jan 22, 2005 11:19 am
Posts: 463
The following was developed to hide/show fields in a module frontend form, not FormBuilder, although should work with any front end form. You will just have to modify the code to find your HTML elements.

Firstly, create a jQuery function:

\$1:

// Show/Hide form fields following radio or select fields
jQuery.fn.showField = function(showField, choice){
   
    var answer = $(this).next().text();
   
    if (answer == choice) {
        $(this).parentsUntil('form').parent().find(showField).removeClass('accessibility');
      $(showField + ' select').addClass('chooseOne');
      $(showField + ' input').addClass('required');
      $(showField + ' textarea').addClass('required');
    }
    else {
        $(this).parentsUntil('form').parent().find(showField).addClass('accessibility');
      $(showField + ' select').removeClass('chooseOne').val('');
      $(showField + ' input').removeClass('required').val('');
      $(showField + ' textarea').removeClass('required').val('');
     }
}
      


Next code your form, eg:

\$1:
      <div id="myradiobuttons_yn">
         <p class="left49" style="clear:left">{$item->myradiobuttons_yn->Label()} :</p>
         <p class="left49 required">{$item->myradiobuttons_yn}</p>
      </div>
      <div class="accessibility" id="mytextfield">      
         <p class="left49" style="clear:left">{$item->mytextfield->Label()} :</p>
         <p class="left49">{$item->mytextfield}</p>
      </div>


In the above sample form part, the field 'myradiobuttons_yn' is a radio button set with the choices 'Yes' and 'No'.

The following field uses the 'accessibility' class. This CSS class is found in the the standard cms stylesheet, "Accessibility and cross-browser tools". I used this to hide the field from display and at the same time, keep it in the DOM so the form would submit even if the radio button choice was 'No'.

The id is added to the entire HTML related to the un-displayed field so that the label etc wont show unless it's required.

Next, add your custom jquery js to call the function:

\$1:
      {literal}
      <__script__ type="text/javascript">
      $(document).ready(function(){      
         // Validate the form
         $('#myform input[type="submit"]').click(function() {
             $('#myform').validate();
            
          });

      // Show/hide fields and add/remove validation
          $('input[name$="myradiobuttons_yn"]').click(function(){
              $(this).showField('#mytextfield','Yes');
          });
      });
      </__script>
      {/literal}


When the 'Yes' (the text displayed with the option) radio is clicked in the radio button field choices, the 'mytextfield' text field is displayed and the 'required' class added.

Add the 'showField' call for every field that has a following hide/show field.

Please Note:
The form uses jquery.validation.js to validate the form prior to submission. If the 'required' class was included in the original form HTML on the hidden 'mytextfield' field, it would never submit.

Have fun with it!


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Hide/Show fields on a form
PostPosted: Sun Nov 04, 2012 3:34 am 
Offline
Power Poster
Power Poster

Joined: Thu Jan 11, 2007 9:16 pm
Posts: 262
Location: Colorado
This appears to be a great idea. Do you have a live example anywhere that could be viewed?

Elkman


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 2 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting