Auto fill a total value based on selection

[SeaEdAssoc]

I am using the Advanced Integration Method, PHP, Expression Engine 2.4.0. This is the form in question:

https://cart.sea.edu/student_form.php

We use a script to add a 3% transaction fee on 2 of 3 types of payments: Loan Payments and Tuition Payments. We don't charge the 3% fee for App Fee. The App Fee is always the same amount.

The user chooses 1 of the 3 types of payments, then enters the amount they want to pay in the Amount of Payment field. However, there is a loop hole. Users are selecting App Fee as their type of payment, then entering in either a Loan or Tuition payment amount and not getting charged the 3%. 

I'd like to auto-fill the Amount of Payment field with the App Fee, if the user chooses that type of payment, and make it so they can't then edit the Amount of Payment field, to change the amount. If they choose either of the other 2 payment types, they can then enter in whatever they want and be charged the 3% fee.

Here is the script we are using to add the 3% fee, based on their payment type selection:

<script language="javascript">
	
function SI_money(amount) {
        // makes sure that there is a 0 in the ones column when appropriate
        // and rounds for to account for poor Netscape behaviors 
        amount=(Math.round(amount*100))/100;
        return (amount==Math.floor(amount))?amount+'.00':((amount*10==Math.floor(amount*10))?amount+'0':amount);
    }	
	
function calcTotal(){
	var total = document.getElementById('x_amount');
	var amount = document.getElementById('payment_amount');
	var payment = document.getElementById('x_ship_to_address');
	
	if( payment.selectedIndex == 0)
		total.value = 'Select Payment Type ^^';
	else if( payment.selectedIndex == 2 || payment.selectedIndex == 3 )
		total.value = SI_money(parseFloat(amount.value * 1.03));
	else if( payment.selectedIndex == 1 )
		total.value = SI_money(amount.value);
	}
	
</script>

Here is the part of the form that uses it:

<li><label class="leftlabel" for="x_ship_to_address">Type of Payment:*</label><select onblur="javascript&colon;calcTotal();"id="x_ship_to_address" name="x_ship_to_address">
						  		<option value="" selected></option>
								<option value="AppFee">App Fee</option>
						  		<option value="Loan Payment">Loan Payment</option>
								<option value="TuitionPayments">Tuition Payments</option>
								</select></li>

<li> <label class="leftlabel" for="payment_amount">Amount of Payment</label> $<input type="text" id="payment_amount" name="payment_amount" onblur="javascript&colon;calcTotal();" /></li>
<li> <label class="leftlabel" for="x_amount">Total</label> $<input type="text" id="x_amount" name="x_amount" readonly /></li>

I think the script needs to be changed to something like:

if( payment.selectedIndex == 0)
		total.value = 'Select Payment Type ^^';
	else if( payment.selectedIndex == 2 || payment.selectedIndex == 3 )
		total.value = SI_money(parseFloat(amount.value * 1.03));
	else if( payment.selectedIndex == 1 )
		total.value = SI_money(45.00);

 And then something else added to make it so the user can't then edit the Amount of Payment or the Total fields.

Thanks in advance!

Lauren

[TJPride]

You can disable a field with field.disable = true;