How do I automatically add a percentage to user defined amount in textbox?

See more:

Javascript

PHP

I have a form for customers to enter their invoice number and amount, and choose their payment method before clicking the submit button and redirecting to the payment gateway.

This all works perfectly, however, I need to be able to automatically add 3% to the value entered in the amount textbox, and place the new value in a readonly textbox (total), but only when a customer selects Visa or Mastercard.



Example:

Invoice Number (Textbox) - 12345

Payment Type (Dropdown) - Visa/Mastercard

Invoice Amount (Textbox) - £100

Total (Readonly Textbox) - £103 (inc. 3% surcharge)



My code is as follows:

<form action="" name="" method="POST">
				
<input type="text" name="cartId" placeholder="Invoice Number">

<select name="paymentType">
	<option>Payment Method</option>
	<option value="MSCD">Mastercard</option>
	<option value="DMC">Mastercard Debit</option>
	<option value="MAES">Maestro</option>
	<option value="VISA">Visa</option>
	<option value="VISD">Visa Debit</option>
	<option value="VIED">Visa Electron</option>
</select>

<input type="text" name="amount" placeholder="Amount">

<input type="text" name="total" value="" readonly>
				
<input type="submit" value="Pay Now" class="wpcf7-submit">
				
			
</form>