我可以重新計算沒有重新加載的表單域嗎？

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」，使值會隨着用戶打字。

道歉，如果我完全錯過了你的問題的觀點。