Download sample form

In this article we will describe the steps needed in order to create a Show/Hide Form with RSForm!Pro, radio group implementation. Note: The actual validation is not triggered in the sample form.

• First you will need to make sure all your fields placeholders are used in the code from the Form Layout tab;
• You will need to use a custom script that checks if the correct conditions are met and then show the field if they are all met. The show / hide part will be performed by a Javascript code. The script should be similar to:
  

  	if(document.getElementById('Find3').checked){
  
  		document.getElementById('helement1').style.display="";
  
  	}
  
  	else {
  
  		document.getElementById('helement1').style.display="none";
  
  		document.getElementById('FindOther').value="";
  
  		document.getElementById('component11').setAttribute("class", "formNoError");
  
  		}
  
  

• you can also make the hidden field required if displayed by adding the following script, in the PHP Scripts > Scripts called on form process area:
  

  if($_POST['form']['Find'] == 'Other' && $_POST['form']['FindOther'] == ''){
  
  	$invalid[] = RSFormProHelper::getComponentId("FindOther");
  
  }
  
  

• after the script is ready you will need to trigger it when the user makes a selection or fills in a field. This can be done by adding different triggers (onfocus, onclick, onchange...) in the Additional attributes of your form fields, for example:

  		
  onclick="displayField();"
  

• 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.addEvent('domready', function() {
  
  displayField1();
  
  });
  

  this will trigger the function after the page is loaded and hide the field if the correct conditions are not met.