Validating data on a pledge form

March 13, 2008 4:53 AM

Javascriptfilter: Building an online donation form, and need some hand-holding.

Our non-profit is gearing up for membership drive, and we want to add "thank you gifts" (a la PBS) to our contribution page. The contribution page already exists and works; people type in the amount they want to give into a text field, with suggested giving levels out to the side.

But we want to add a list of "premiums" - DVDs, books, etc - that are only available at certain giving levels. So if you give $250, you get your choice of the DVD, book #1 or book #2; if you give $120, you can only choose between the two books.

We want all of the items to be displayed (so that people can see what they'd get if they upped their gift), but need some kind of validation logic that sends them back to the form with an error message if they choose a gift that is above their giving level.

Can you help with this? I'm guessing Javascript/Ajax is the answer, but my skills in the former are weak and in the latter are nil.

posted by jbickers to computers & internet (7 comments total)

You don't want to do this in JS. This is logic that you want performed on the server-side, otherwise any user could turn off Javascript (or modify the Javascript) and add all the gifts they want to their basket.

Whatever is powering the contribution page -- PHP, ASP, Perl, etc. -- that's what you want to use to make these changes.
posted by Jairus at 5:09 AM on March 13

I think part of it could be done in JavaScript, but to a certain extent Jairus is correct -- you never want to rely solely on JS to validate forms.

What I assume you're looking for is two form fields -- one being a text box where they type in the amount, and then a dropdown listing all of the potential "premiums." Changing the available values in the dropdown based on what the user types in the textbox is pretty easy (Google for "javascript dynamic dropdown"), but it sounds like what you want is to always list everything in the dropdown, but if the user (for example) enters a $50 pledge but selects a gift associated with a $250 donation, they would not be allowed to submit the form. That too is doable (Google "javascript form validation"), but (as Jairus points out) needs to be backed up by server-side validation (since JS form validation can easily be circumvented by a savvy user).

Another alternative might be to list all options in the dropdown, but disable the ones that are above what the user is going to pledge, but that might be a bit tricky, as I think it would involve some heavy-duty CSS skills, since I don't think you can disable individual dropdown items using standard HTML. This too, however, would need to be backed up by server-side validation.
posted by Doofus Magoo at 5:33 AM on March 13

As everyone else said, JavaScript validation should only be used in addition to server-side validation. AJAX doesn't help much here. You can attach a keyup event to the donation box, and disable the out-of-bounds gifts pretty easily if you know JavaScript. If you don't, you probably want to find someone who does to do it for you. You can probably figure out what an enabled vs. disabled gift choice looks like yourself, and it should take less than an hour for someone who knows JavaScript to switch between those states based on the amount input. Make sure everything is enabled by default, so you're not blocking people without JavaScript from giving you donations.
posted by scottreynen at 6:00 AM on March 13

To clarify, we're not really worried about someone intentionally getting past this validation. Every gift that goes out is being reviewed by a human being anyway, because these are thank-you gifts and not purchases; if someone manages to select the $250-level gift but only gives $120, the only thing that is going to happen is that we will get their $120 from the credit card and will then call them and say, no, you can't has Celtic Woman, unless you'd like to move up to the $250 level.

The biggest consideration, frankly, is time - we have literally a matter of days to pull this off, and want to do it as elegantly (and quickly) as possible.
posted by jbickers at 5:32 PM on March 13

Either way, however, the validation code needs to be written, and there's no point writing it client-side -- that's just poor design. It's not going to be significantly more or less complicated in JS than it will be in PHP or whatever your form is written in. The place to put it is with the rest of your server-side form validation.
posted by Jairus at 8:45 PM on March 13

could do something like this >>

<input id="amount" onkeyup="checkGifts(parseInt(this.value));">

<div id="divGift1" style="background:pink;width:40px;margin:10px;">gift 1</div>
<div id="divGift2" style="background:pink;width:40px;margin:10px;">gift 2</div>
<div id="divGift3" style="background:pink;width:40px;margin:10px;">gift 3</div>

and then javascript might look like this >>

var gifts = [
{name:"gift 1",elmId:"divGift1", cutoff:10},
{name:"gift 2",elmId:"divGift2", cutoff:20},
{name:"gift 3",elmId:"divGift3", cutoff:30}
]



function checkGifts(myDonation){
for(var i = 0;i<gifts.length; i++){
thisGift = document.getElementById(gifts[i].elmId);
thisGift.style.background=(myDonation >= gifts[i].cutoff)?"green":"red";
}
}
posted by nihlton at 4:22 PM on March 14

if you want a little more classy, your gifts object array could look like this

{name:"xx",elmId:"xx",enabledImg:"xx.gif",disabledImage:"xx.gif",cutoff:xx}

then the enable disable code could look like

thisGift.src = (myDonation >= gifts[i].cutoff)?gifts[i].enabledImage:gifts[i].disabledImage;

assuming that the elmId refers to the gift graphic.
posted by nihlton at 4:27 PM on March 14