Show or hide fields

Through Conditional Fields

There's a simpler way to show or hide fields in RSForm! Pro.

Through Javascript

In this article we will describe how to show or hide fields depending on a radio button selection using Javascript.

Here is what you should do:

1. Let's suppose, for example that your radio component is named: "Radio" with the following configuration:

Items:
val1|Description1
val2|Description2

Additional Attributes:

onclick="displayField();"

2. Go to the "Javascript" tab and put in the following code:

 
<script type="text/javascript">
function displayField()
{
  if(document.getElementsByName('form[Radio]')[0].checked)
  document.getElementById('hide').style.display="none";
 
  if(document.getElementsByName('form[Radio]')[1].checked)
  document.getElementById('hide').style.display="";
}
</script>
 

In order to hide your desired field when the page is loaded you will have to add the following code after your already existing code from the CSS and Javascript:

 
 window.onload = function() {
    displayField();
};
 

The above code lines will load the displayField() function when the page will load and so the field will the hidden by default.

3. Let's suppose also that you want to hide a simple text box named "Textbox". You will have to assign an id to the "tr" tag that contains the textbox component, for example:

<tr id="hide">
<td>{Textbox:caption}</td>
<td>{Textbox:body}<div class="clr"/>{Textbox:validation}</td>
<td>{Textbox:description}</td>
</tr>

4. In order to make the shown field required dynamically you will have to add an extra function that will validate the field. The script that you can use is similar to the following:

 
<script type="text/javascript">
function validateField()
{
  if(document.getElementById('hide').style.display=="" && document.getElementById('Textbox').value=="")
  {
    document.getElementById('component150').className = 'formError';
    return false;
  }
  else
  {
    document.getElementById('component150').className = 'formNoError';
    return true;
  }
} 
</script>
 

Where 'component150' is the id of the form component in the page source of your form (from the front end). You will see that each field from your form will have a 'span' container like this one:

<span id="component150" class="formNoError">Invalid Input</span>

Also a trigger will have to be placed for the function, in the Additional Attributes area of the submit button from your form:

onclick="return validateField();"
Note:

This layout code is generated when using the "Inline" layout.

11 persons found this article helpful.


Was this article helpful?

Yes No
Sorry about that

You Should Also Read

Fields are not showing up in the frontend HOT

Set up conditionals for groups of fields

Hidden fields take up space in the form

Calculate user's age using BirthDay field

How to copy information from other fields