3

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

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

我曾考虑过将 Amount 字段设置为只读，以及其他一些方法，但我想看看更改 Quantity 字段是否会导致 Amount 字段更改，或者使用 Quantity 字段中的 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;
}

4

6 回答 6

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>
于 2012-09-12T16:51:45.130 回答
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" />

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

如果您在意为“字段”时不小心输入了“按钮”，我还会提到您可以使用 ''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”，所以值会随着用户输入而改变。

抱歉，如果我完全错过了您问题的重点。

于 2012-09-12T16:59:20.457 回答
0 
function calcPrice()
{
 ....
}

<input type='text' name='Quantity' id='Quantity' onchange='calcPrice();'/>
<input type='text' name='Amount' id='Amount' onfocus='calcPrice();'/>
于 2012-09-12T16:51:49.590 回答
0

当然。使用这样的东西，当数量变化时会触发：

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

这需要 jQuery 框架。

于 2012-09-12T16:47:39.743 回答
0

您可以访问 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";
}
于 2012-09-12T16:47:50.103 回答
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>
于 2020-04-29T04:49:59.313 回答