Can I recalculate a form field without a reload?

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>

Answer 2

I'm not quite sure what additional information you need, as you seem to be aware of all the ingredients for making this happen: You know that you want to detect an event, you know that you need to call a function, so I'm hoping I haven't missed something about what you're asking. I'm going to assume that you just need to know how to tie all these parts together.

The simplest example might be:

<input type="text" id="Quantity" value="10" onchange="document.getElementById('Amount').value = parseInt(document.getElementById('Quantity').value,10) * 10.0;" />
$<input type="text" id="Amount" value="100" />

though it's worth noting that this does not follow best-practices, which would involve binding an event listener separately.

On the off-chance that you accidentally typed "button" when you meant "field", I will also mention that you can update any other element's innner HTML with the ''innerHTML'' attribute, eg:

<input type="text" id="Quantity" value="10" onchange="document.getElementById('Amount').innerHTML = parseInt(document.getElementById('Quantity').value,10) * 10.0;" />
$<span id="Amount">100</span>

Of course, you can define the actual logic elsewhere, and just use ''onchange="yourFunction();"'' instead of putting everything inline, as well.

I know you mentioned "onchange" and "onfocus", though personally I tend to prefer "onkeyup", so that values will change as the user is typing.

Apologies if I've completely missed the point in your question.