Question

When a field in my form gets focus, I’d like a javascript function to be called that
calculates a value for that field without my putting in a specific button to do that.

Is this possible without causing the form to reload?

I have thought about making the Amount field read-only, and some other ways of doing this, but I’m looking to see if changing the Quantity field could cause the Amount field to change either using onchange in the Quantity field or onfocus in the Amount field.

Purchase Tickets<br>                
<script type="text/javascript" language="JavaScript1.2">
<script type="text/javascript" language="JavaScript1.2">
document.write(
'<form name="InvGenPayTickets" action="'+PostURL+'" 
onsubmit="return validateForm();" method=GET>');
</script>

<input type=hidden name="TplURL" value="GenPayCCInfo.html">
<input type=hidden name="CancelURL" value="Ooopsie.html">
<input type=hidden name="SuccessURL" value="Joanie.html">

<input type='hidden' name='TransDesc' id='TransDesc' 
value="$_POST['TransDesc']; ?>" />

<input type='text' name='Quantity' id='Quantity' /> <br />
Amount<br />
$<input type='text' name='Amount' id='Amount' />
<input type="submit" value="Next">
<br>
</form>

Edit:

Here is the function that won’t update. It is called if I use

<input type='text' name='Quantity' 
     id='Quantity' onchange="return retTotalAmt();" /> 

but the Amount field does not update. I am not able to update using a calc button either.

<script type="text/javascript" language="JavaScript1.2">    
    function retTotalAmt()
    {
        alert("Got here.");
        var total_amt 
            = (document.getElementById('Quantity').value * ticketCost) 
                + DonationAmount;    
        document.getElementById('Amount').value = total_amt;
    }    
</script>

Per request in comments:

 
<input type='text' name='Quantity' 
    id='Quantity' onchange="return retTotalAmt();" /> 

Edit — Show Problem

<script type="text/javascript" language="JavaScript1.2">
var ticketCost = 40.00;

function EnterPage()
{
var currentTotalAmount = DonationAmount + ticketCost;
//DonationAmount moved up to ticketCost's scope fixed problem.
var DonationAmount = <?php echo($_POST['DonationAmount']); ?>;

document.getElementById('DonationAmountField').value = DonationAmount.toFixed(2);
document.getElementById('Quantity').value=1;
document.getElementById('Amount').value = currentTotalAmount.toFixed(2);

return;
}

Answer 1

Without using jquery:

<input type='text' name='Amount' id='Amount' onfocus="amountOnFocus();" />

Javascript:

function amountOnFocus() {
    amountField = document.getElementById('Amount');
    //Do calculations
    amountField.value = resultOfCalculations;
}

If you wanted, you could also put a change event listener on the Quantity input so it will calculate when the value of that textbox changes.

EDIT: This onchange event works for me:

Markup:

<input type="text" id="txtChangeMe" onchange="txtChangeMeOnChange();" />

Javascript:

<script type="text/javascript">
    function txtChangeMeOnChange() {
        alert('changed');
    }
</script>