Table of Contents
Form with radio options for price with an option for user to enter any amount they want - perfect for donations
Sometimes you need a form that presents some common basic options to your customers, but also gives the freedom for your customers to enter a completely different amount. This type of approach is especially useful when taking donations. This approach allows you to have as many selectable options as you want as radio inputs, with an additional radio input which when selected shows a textbox to enter any price the customer wants.
Step 1: Setup your form
The form does need to be set up in a specific way, and you can see from the example below that there is a pattern to it.
<form action="foxycart_store" method="post"> <input type="hidden" name="name" value="Donation" /> <label for="donate_500"><input type="radio" name="__donation" id="donate_500" value="500" />$500</label> <label for="donate_250"><input type="radio" name="__donation" id="donate_250" value="250" />$250</label> <label for="donate_100"><input type="radio" name="__donation" id="donate_100" value="100" />$100</label> <label for="donate_50"><input type="radio" name="__donation" id="donate_50" value="50" />$50</label> <label for="donate_0"><input type="radio" name="__donation" id="donate_0" value="0" />Other</label> <label class="donate_other" for="price">Please specify</label> <input type="text" name="price" class="donate_other" value="0" /> <input type="submit" value="Add To Cart"> </form>
For each selectable element, you have the following pattern, where
AMOUNT is the number for that donation amount:
<label for="donate_AMOUNT"><input type="radio" name="__donation" id="donate_AMOUNT" value="AMOUNT" />$AMOUNT</label>
</head> tag in your page and basically is set to update the price input whenever the radio buttons are changed, and also on page load (just in case an option is already selected when the page loads - like after a refresh). It also hides and shows the price text input depending if the 'other' option is selected, which is hidden on page load.
How it works
So it works the following way:
The radio buttons all have the same name, but unique id's that are shared with their respective labels, and a value that is the value of the donation. The last radio button has a value of 0, and is for the 'other' option. Following this radio button is a text input that is actually the required 'price' input for any FoxyCart form.
donate_other, and with the links script this shows the price input and a label for it. If you wanted other text or elements to be hidden and shown depending if they've selected the 'other' amount or not, simply give your element a class of
Obviously you'll want to customise the values to suit your requirements, and you can add as many or as little other options as you want - as long as it keeps with the same setup as it currently as, which is a name of “_donation ”, and id that is unique to that radio button (like “donate_200”) and that the ID is used in the 'for' value for its respective label, and the value of the radio button input is the value of the donation (like '200).