Radio Button Amount

This will allow your customers to select from a list of predefined amounts or to enter in a custom amount. The image below shows an example of a form where the customer can choose $10, $20, $50, or a custom amount of their choosing.

Javascript

Locate this section:

<script type="text/javascript">
     var submitted = false;
     function submitform()
     {
       if(submitted) {
         return false;
       }
       submitted=true;
       document.epayform.submitbutton.value='Please Wait... Processing';
       return true;
     }
</script>

Insert a new line directly below and add the following code:

<script type="text/javascript">
      function getamount() 
      {
      var radioAmount = document.epayform.RadioAmount.value ; 
      var otherAmount = document.epayform.OtherAmount.value ;


      if(radioAmount =='other'){
          if(isNaN(otherAmount)|| otherAmount ==0){
             alert("Please enter an Amount.");
             return false
          }
          else{
            var total = otherAmount;
          }
      }
      else{
          var total = radioAmount;
      }
      document.epayform.UMamount.value = total ;
      return true;
      }
</script>

HTML

Next, locate the UMamount text box section and remove it.

<div class="form-group">
  <span class="col-form-label col-sm-4 col-xs-12 ">Order Amount</span>
  <div class="col-md-8 col-xs-12 ">
    <input id="UMamount" name="UMamount" class="form-control displayonly" type="text"  readonly="readonly" placeholder="Order Amount" value="[UMamount]">
  </div>
</div>

Replace it with the code below:

<div class="form-group">
  <span class="col-form-label col-sm-4 col-xs-12 ">Order Amount</span>
  <div class="col-md-8 col-xs-12 ">
    <div class="form-group">
      <div class="radio">
        <label>
          <input id="RadioAmount" type="radio" name="RadioAmount" value="10.00" checked="checked"> $10
        </label>
      </div>
    </div>
    <div class="form-group">
      <div class="radio">
        <label>
          <input type="radio" name="RadioAmount" value="20.00"> $20
        </label>
      </div>
    </div>
    <div class="form-group">
      <div class="radio">
        <label>
          <input type="radio" name="RadioAmount" value="50.00"> $50
        </label>
      </div>
    </div>
    <div class="form-group">
      <div class="radio">
        <label>
          <input type="radio" name="RadioAmount" value="other">
          <input class="form-control" name="OtherAmount" type="text" placeholder="Other">
        </label>
      </div>
    </div>
  </div>
</div>

And add as many preset amounts as you need by adding more of the lines below and changing 50 to your desired amount:

<div class="form-group">
  <div class="radio">
    <label>
      <input type="radio" name="RadioAmount" value="50.00"> $50
    </label>
  </div>
</div>

Lastly, find this at the bottom of the form:

<div id="submitButton">
    <button class="btn btn-primary center-block"  type="submit">Submit</button>
</div>

And replace it with this:

<div id="submitButton">
  <button class="btn btn-primary center-block"  type="submit"onclick="return getamount();">Submit</button>
</div>

Once save, the amount will allow the customer to select the amount by radio value rather than typing it into a text box.