我能否在不重新加载页面的情况下重新计算表单字段？

Question

我能否在不重新加载页面的情况下重新计算表单字段？

3

当我的表单中的一个字段获得焦点时，我希望调用一个JavaScript函数来计算该字段的值，而无需放置特定的按钮执行此操作。

这是否可能而不导致表单重新加载？

我已经考虑过将金额字段设为只读，并通过其他方式进行操作，但我想知道更改数量字段是否可以使用数量字段中的onchange或金额字段中的onfocus来更改金额字段的值。

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>

根据评论中的要求：

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

- octopusgrabbus

是的，您可以使用 focus 事件。请参见此处以获取一种跨浏览器附加元素事件的方法。 - Shmiddty

6个回答

1

我不太确定您需要哪些额外信息，因为您似乎已经了解了实现此操作所需的所有要素：您知道您想要检测一个事件，您知道您需要调用一个函数，所以我希望我没有错过您所询问的任何内容。我假设您只需要知道如何将所有这些部分联系在一起。

最简单的例子可能是：

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

需要注意的是，这并不遵循最佳实践，最好单独绑定事件监听器。

如果你在意外输入“button”而不是“field”，我还要提醒一下，你也可以使用“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（）;””而不是将所有内容内联即可。

我知道您提到了“onchange”和“onfocus”，但个人倾向于使用“onkeyup”，这样用户输入时值会随之更改。

如果我完全没有理解您的问题，请谅解。

- Will Palmer

实际上，我没有输入按钮而是字段。我想触发金额字段以获取新值。 - octopusgrabbus

好的，抱歉猜错了 :) 上面的答案确实会导致Amount字段获得一个新值，不过Dave Zych表达得更好。 - Will Palmer

没问题。你的例子很有趣。 - octopusgrabbus

0

当然可以。使用类似下面这样的代码，当数量发生变化时会触发它：

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

这需要使用jQuery框架。

- Clay Garrett

0

你有使用jQuery的权限吗？如果没有，那么你需要绑定一个change事件到你的“quantity”输入元素上，以监听其输入的变化。然后你只需要修改“amount”输入框的内容即可。

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

- Chase

我正在使用HTML和JavaScript在一个PHP页面上进行操作。 - octopusgrabbus

0

function calcPrice()
{
 ....
}

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

- enhzflep

0

尝试这个解决方案 Html

 <div class="form-group row">
            <label for="inputQty" class="col-sm-4 col-form-label">Quantity</label>
            <div class="col-sm-8">
                <input onkeyup="CalculateItem();"  onkeydown="CalculateItem();" onchange="CalculateItem();" onfocus="CalculateItem();" value="1" type="number" step="1" min="1" max="9999999" class="form-control" id="inputQty" required>
            </div>
        </div>

        <div class="form-group row">
            <label for="inputPrice" class="col-sm-4 col-form-label">Price</label>
            <div class="col-sm-8">
                <input onkeyup="CalculateItem();"   onkeydown="CalculateItem();" onchange="CalculateItem();" onfocus="CalculateItem();" type="number" step="0.1" min="1" max="9999999"  class="form-control" id="inputPrice" required>
            </div>
        </div>
  <div class="form-group row">
            <label for="inputPriceNoVat" class="col-sm-4 col-form-label">Price (no VAT)</label>
            <div class="col-sm-8">
                <input readonly type="text" class="form-control" id="inputPriceNoVat">
            </div>
        </div>

JS

 <script type="text/javascript">
            function CalculateItem()
            {
                try {
                    let inputPriceNoVat = $('#inputPrice').val() * $('#inputQty').val();
                    $('#inputPriceNoVat').val(inputPriceNoVat);
                } catch (e) {
                    $('#inputPriceNoVat').val(0);
                }
            }
</script>

- NoWar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dave Zych · Accepted Answer

不使用jQuery：

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

Javascript：

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

如果你希望的话，你也可以在“数量”输入框上添加一个“change”事件监听器，这样它就会在该文本框值改变时进行计算。

编辑：对我来说，这个“onchange”事件是有效的：

标记：

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

Javascript：

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