javascript - 我可以在不重新加载的情况下重新计算表单字段吗？

Question

当我的表单中的一个字段获得焦点时，我希望调用一个 javascript 函数无需我输入特定按钮即可计算该字段的值。

这可能不会导致表单重新加载吗？

我考虑过将 Amount 字段设置为只读，以及其他一些方法，但我想看看更改 Quantity 字段是否会导致 Amount 字段发生变化，要么在 Quantity 字段中使用 onchange 要么在“金额”字段中聚焦。

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>

编辑:

这是不会更新的函数。如果我使用它会被调用

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

但是金额字段没有更新。我也无法使用计算按钮进行更新。

<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>

根据评论中的要求:

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

编辑 -- 显示问题

<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

不使用 jquery:

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

Javascript:

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

如果需要，您还可以在 Quantity 输入上放置一个 change 事件监听器，以便它计算该文本框的值何时更改。

编辑:这个 onchange 事件对我有用:

标记:

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

Javascript:

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