The problem
The client has a donation system that they need implemented on their new website. The caveat is that the client would like an automated way to populate a hidden field based on the amount that a user donates. They have various tiers assigned to the donation amounts of their supporters, as detailed below:
- Benefactors: $10,000+
- Patrons: $5000 - $9999
- Supporters: $1000 - $4999
- Contributors: $250 - $999
- Donors: $1 - $249
Each tier has unique benefits, so the client would like it tracked in the database so it can be sorted and imported to another system.
The solution
After reviewing Demo 20 (and a lot of support from Candace and Chad), I came up with a way to accomplish this using the Client Side Event field of my donation field.
It required some custom JavaScript work, but it ended up being relatively simple. One tip I got from Chad was that you can use the field tokens, such as $(field), in place of the JavaScript syntax document.getElementByID(‘fieldid’).value. Essentially, you can use the built in DNN tokens to reference any field values.
By populating the Client Side Event field of the donationamt field with the appropriate JavaScript, I was able to populate the value of the donationlvl field, which holds the information for the tier level.
The code I used for this can be seen below:
if (parseInt($(donationamt)) < 250) {
($(donationlvl)) = 'Donor';
}
else if ((parseInt($(donationamt))) >= 250 && (parseInt($(donationamt))) <1000) {
($(donationlvl)) = 'Contributor';
}
else if ((parseInt($(donationamt))) >= 1000 && (parseInt($(donationamt))) <5000) {
($(donationlvl)) = 'Supporter';
}
else if ((parseInt($(donationamt))) >= 5000 && (parseInt($(donationamt))) <10000) {
($(donationlvl)) = 'Patron';
}
else if ((parseInt($(donationamt))) >= 10000) {
($(donationlvl)) = 'Benefactor';
}
The most challenging part of the programming was keeping track of all of the parentheses. I used the parseInt function to determine what number was input into the donationamt field, and then wrote conditionals to match that number to the correct tier for the donationlvl field.
One thing of note that I did not catch immediately: It’s important that the field that is populated with your JavaScript (donationlvl in my case), is set to “Hidden Field” as its Question Type. Unless this is done, the JavaScript won’t pass the value to the field (e.g. if it’s a normal text box field that is set to be hidden until forced visible).
A special “Thanks” to both Chad and Candace for all the assistance in finishing this project. I don’t think I would have been able to solve this without the support!