Change a hidden field on a form based on dropdown value
| Joomla > RSForms |
As always, necessity can be the mother of invention. And as is becoming more often, I'm writing another blog post mainly so I can come back and find the answer next time I need it, as well as share it with anyone else that it might assist.
Today I needed to setup an RSForm!Pro form to do the following:
- Select the subject type from a dropdown
- Based on the subject type, set the email addresses to send the form result through to.
The starting point on the RSForms!Pro FAQ page only helps with setting the email address based on the dropdown selection. Switching then to custom scripting, another part of the equation is explained as to how to compare some fields in javascript.
So that then moves onto what we want to create... a function that checks the Type selected, and then sets the TypeEmail value based on that selection.
- In your form, create a dropdown field called "Type" (or modify name as appropriate)
- Put in your items. The | before Select one... makes the value for that item null.
|Select one... Website Enquiry Sales Enquiry
- As you want to use this value as your email subject line or similar, you can't just | the email address in as the value like is shown in the FAQ.
- Set the Type field as required (so it will always get a value selected)
- Next create a hidden field called "TypeEmail" (or modify name as appropriate)
- Last, on the Attributes tabe in Additional Attributes for the Type field add the following:
OnChange="setTypeEmail(this.form);"
- Now go to the form's Properties tab
- Under Design, click on CSS and Javascript
- In the Javascript, paste the following code (modifying it for your dropdown values, and also the ids of the fields if you changed them above):
<script type="text/javascript">
function setTypeEmail(thisForm)
{
switch (document.getElementById('Type').value) {
case 'Website Feedback':
document.getElementById('TypeEmail').value = 'webmaster.eg@kpsystems.com.au';
break;
case 'Sales Enquiry':
document.getElementById('TypeEmail').value = 'sales.eg@kpsystems.com.au';
break;
default:
document.getElementById('TypeEmail').value = '';
break;
}
}
</script> - Note that the default case is only used when there's not been a topic selected, or if they change back to "Select one..." so it will usually not end up with being used assuming you've got Type set as a required field. You could also put an alert in the default case if you wanted to give the user an alert.
alert('You've not selected an enquiry type!') - Save the changes to the form
- Hit Preview to test the form
- Tweak remaining parts of form as required, including putting {TypeEmail:value} in the various places you want to use the field that has been set.
- To set multiple values on the form, based on the one selection, put the extra values needed in each case statement.
- Put in your items. The | before Select one... makes the value for that item null.
You should now find that your drop down form populates your hidden field with the new email address you want to use for that enquiry type.

