Show-Hide Field example

Friday, 02 July 2010 11:52 Alexandru Plapana

Show or hide a field based on radio selection.

This example can be rather useful if you wish not to bug a guest with filling unnecessary information. In this example, the guest will be prompted with an additional field if "Other" is selected. If this option will be selected the user will be required to fill the new field.

The functionality is achieved with a little Javascript, placed in the Form Layout area. Basically, two functions are used: one that controls when the field is displayed (displayField()), and one that controls the field validation (validateFields()). These functions are triggered when the form is first displayed, and from the Additional Attributes area of the raddio group field and submit button.

Message

Please note: The forms only work with RSForm!Pro version 1.2.0 or above. Please make sure you have updated your version before trying to install it

Step by Step guide

Get this form

RSS

Juan Valdez (20.07.2010 (01:21:27))

Error 1 I GOT THIS ERROR WHEN I TRIED TO RESTORE THE FILE

QUERY ERROR INSERT INTO `#__rsform_form s` (`FormId`,`Form Name`,`FormLayo ut`,`FormLayout Name`,`FormLayo utAutogenerate` ,`FormTitle`,`P ublished`,`Lang `,`ReturnUrl`,` Thankyou`,`User EmailText`,`Use rEmailTo`,`User EmailCC`,`UserE mailBCC`,`UserE mailReplyTo`,`U serEmailFrom`,` UserEmailFromNa me`,`UserEmailS ubject`,`UserEm ailMode`,`UserE mailAttach`,`Us erEmailAttachFi le`,`AdminEmail Text`,`AdminEma ilTo`,`AdminEma ilCC`,`AdminEma ilBCC`,`AdminEm ailReplyTo`,`Ad minEmailFrom`,` AdminEmailFromN ame`,`AdminEmai lSubject`,`Admi nEmailMode`,`Sc riptProcess`,`S criptProcess2`, `ScriptDisplay` ,`MetaTitle`,`M etaDesc`,`MetaK eywords`,`Requi red`,`ErrorMess age`) VALUES ('','show-hide','\r\n
{global:formtit le}
\r\n{error}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
{Find:caption} {Find:body}
{Find:validatio n} {Find:descripti on}
{FindOther:capt ion} {FindOther:body }
{FindOther:vali dation} {FindOther:desc ription}
{Submit:caption }Quote

AlexP (20.07.2010 (01:42:35))

Error

Hello,

Please make sure that you are using the latest version of RSForm!Pro (revision 29). Quote

Lucrece (19.08.2010 (11:57:58))

A little explanation? 1 It would be incredibly helpful here if there were some, ANY documentation here explaining what is going on in the script so that we can actually implement it in our own forms.
Here is the script from the form example:

function displayField(fi eld)
{
if(document.getElementById( 'Find3').checked)
document.getElementById( 'helement').style.display="";

else {
document.getElementById( 'helement').style.display="none";
document.getElementById( 'FindOther').value="";
document.getElementById( 'component27').setAttribute("class", "formNoErro r");
}
}

function validateFields( )
{
if(document.getElementById( 'Find3').checked && document.getElementById( 'FindOther').value == '')
{
document.getElementById( 'component27').setAttribute("class", "formError");
return false;
}
else
return true;
}

It all kind of makes sense aside from the mysterious "Component2 7"- what is that? where does it come from? what is it supposed to do?
Bueller?Quote

Alex P. (22.08.2010 (23:50:22))

@Lucrece

Hello,

Well, component27 is the actual id of the span that holds the validation message. As you know, for each field you can set a validation message. If this fails, the message will appear. You can easily view this container using a inspect tool (like Firebug for Firefox) or by viewing the page source.Quote

Sarah Shafawati (19.09.2010 (19:00:48))

Receive error as Juan Valdez

Hi,
I'm also receive an error same as Juan ValdezQuote

Alex P. (19.09.2010 (23:31:20))

@ Sarah

Hello,

What revision are you using ?Quote

Rudy (30.09.2010 (01:50:32))

Hide the field from start

I want to hide the field before filling out the form. When I hit the No button the field should show.
How can I hide from start?Quote

Alex P. (30.09.2010 (02:17:10))

@rudy

You can simply add the following style to the hiding block:

style="display:no ne"Quote

Help! (15.10.2010 (13:58:45))

Hello,

I would like to make this form with 2 hidden fields. Could you help me with the script please?
Thank you!Quote

Pete (26.07.2011 (18:14:04))

JInstaller: :Install: Cannot find Joomla XML setup file

JInstaller: :Install: Cannot find Joomla XML setup file
I was able to install the paypal, but not this one. I am on th elatest version of RSPro and Joomla 1.7
Quote