Radio Amount Buttons with a Textbox to Type in an Amount
This will allow your customers to select from a list of predefined amounts or select other and enter an amount.
On the Form
Locate the string <script type="text/javascript">
, insert a new line below and add the following code:
<script>
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>
Next find this:
<tr>
<td bgcolor="#F0F0F0" width="234" align="right"><font size="2" face="Verdana">Order Amount:</font></td>
<td bgcolor="#F0F0F0" width="450">[UMamount]
</td>
</tr>
Replace it with this:
<tr>
<td bgcolor="#F0F0F0" width="234" align="right"><font size="2" face="Verdana">Payment Amount:</font></td>
<td bgcolor="#F0F0F0" width="450">
<input type="radio" name="RadioAmount" value="10.00" checked="checked"> $10<br />
<input type="radio" name="RadioAmount" value="40.00"> $40<br />
<input type="radio" name="RadioAmount" value="100.00"> $100<br />
<input type="radio" name="RadioAmount" value="other"> <input name="OtherAmount" type="text" size=10><br />
</td>
</tr>
And add as many preset amounts as you need by adding more of these lines and changing the amounts:
<input type="radio" name="RadioAmount" value="25.00"> $25<br />
Lastly find this at the bottom of the form:
<input type="submit" name="submitbutton" value="Process Payment >>">
And replace it with this:
<input type="submit" name="submitbutton" value="Process Payment >>" onclick="return getamount();">
Once save, the amount will allow the customer to select the amount by radio value rather than typing it into a text box.