The HTML for a form containing a series of radio buttons, with the last being for an 'other' amount, that shows a text field to allow customers to specify whatever figure they want. The double underscore before the name of the radio buttons is there to prevent that option from being added with the cart. The javascript to follow will take care of updating the price field with the selected donation automatically.

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

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.

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_9