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.

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>

The double underscore before the name of the radio buttons is there to prevent that option from being added with the cart. How does the price get passed through then? That's when the javascript comes into to play. You may notice that at the bottom of the donation amounts is a text input with the name of price. This is the default price input for a FoxyCart form, which is usually set as hidden, but for this setup we need it to be text so people can interact with it. The javascript to follow will take care of updating the price field with the customers selected donation automatically.

The following javascript needs to be added right before the closing </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.

<script type="text/javascript" charset="utf-8">
  jQuery( function() {
    jQuery(".donate_other").hide();
 
    jQuery("input[name=__donation]").change(function() {
      toggle_donation();
    });
 
    // Update the price based on preselected donation value if there is one
    if (jQuery("input[name=__donation]:checked").length > 0) {
      toggle_donation();
    }
  });
 
  function toggle_donation() {
    var cur_donation = jQuery("input[name=__donation]:checked").val();
    if (cur_donation > 0) {
        jQuery("input[name=price]").val(cur_donation);
        jQuery(".donate_other").hide();
      } else {
        jQuery("input[name=price]").val("");
        jQuery(".donate_other").show();
      }
  }
</script>

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.

The javascript does a few things. Firstly, it hides the price input on page load so people can't see it by default. Next it runs a function also on page load if one of the radio buttons are selected, and also binds a function to the radio buttons whenever they are changed. This function first gets the value of the currently selected donation. If that donation is more than 0, it updates the hidden price input with the value of the selected donation, and makes sure that the price field is still hidden. If the donation is 0, it sets the price input to be empty, and then shows it. Worth noting is that it shows any element with a class of 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 donate_other

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).

• http://forum.foxycart.com/comments.php?DiscussionID=4417&page=1#Item_1