我可以重新计算没有重新加载的表单域吗？

Question

当我的表单中的某个字段获得焦点时，我想要调用一个javascript函数，即 可以计算该字段的值，而不需要将其放入特定的按钮即可。

这可能不会导致窗体重新加载？

我想过如何使Amount字段为只读，以及其他一些方法，但是我正在查看是否更改Quantity字段可能会导致Amount字段在数量字段中使用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();" /> 

但金额字段不更新。我无法使用calc按钮进行更新。

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

如果你愿意，你也可以把一个change事件监听器上Quantity输入，所以它将计算该文本框的值时变化。

编辑：这onchange事件对我的作品：

标记：

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

的Javascript：

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

Answer 2

肯定。使用类似这样的数量变化时将触发的东西：

$("#Quantity").change(function(){ 
    // perform your calculations here 
}; 

这需要jQuery框架。

Answer 3

你有权限访问jQuery吗？如果不是，那么您将不得不将一个change事件绑定到“数量”输入元素以侦听其输入的更改。那么你只需要修改“金额”输入的内容。

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

var el = document.getElementById("Amount"); 
el.addEventListener("change", changeAmount); 

function changeAmount(){ 
    var quantity = document.getElementById("Quantity"); 
    quantity.value = "SET YOUR VALUE"; 
} 

Answer 4

function calcPrice() 
{ 
.... 
} 

<input type='text' name='Quantity' id='Quantity' onchange='calcPrice();'/> 
<input type='text' name='Amount' id='Amount' onfocus='calcPrice();'/> 

Answer 5

我不太清楚你所需要的其他信息，因为你似乎意识到了实现这一目标的所有要素：你知道你想要检测一个事件，你知道你需要调用一个函数，所以我希望我没有错过你所问的东西。我会假设你只需要知道如何将所有这些部分结合在一起。

最简单的例子可能是：

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

但值得注意的是，这并不遵循最佳实践，这将涉及单独绑定事件侦听器。

就当你的意思是“场”，你不小心输入“按钮的”关机会，我还会提到，你可以更新'的innerHTML'属性的任何其他元素的肠子HTML，例如：

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

当然，你也可以在别处定义实际的逻辑，只要使用“”的onchange =“yourFunction中（）;”“”，而不是把一切在线，以及。

我知道你提到的“平变化”和“聚焦状态”，但我个人倾向于选择“的onkeyup”，使值会随着用户打字。

道歉，如果我完全错过了你的问题的观点。