Question

当我的表单中的字段获得焦点时，我想要调用一个javascript函数计算该字段的值，而不是我放入一个特定的按钮来做到这一点。

这是否可以在不导致表单重新加载的情况下进行？

我已经考虑过将Amount字段设置为只读，以及其他一些方法，但是我想看看更改Quantity字段是否可能导致Amount字段在Quantity字段中使用onchange更改或在Amount字段中进行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();" />

但Amount字段不会更新。我也无法使用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>

评论中的每个请求：

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

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

我不太确定你需要什么附加信息，因为你似乎意识到实现这一目标的所有要素：你知道你想要检测一个事件，你知道你需要调用一个函数，所以我希望我没有错过任何关于你所要求的东西。我将假设您只需知道如何将所有这些部分组合在一起。

最简单的例子可能是：

<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”，因此值会随着用户的输入而改变。

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

Answer 3

你有权访问jQuery吗？如果没有，那么您必须将change事件绑定到“quantity”输入元素以侦听其输入的更改。那么你只需要修改“金额”输入的内容。

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

尝试此解决方案

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>

Answer 6

不确定。使用类似的东西会在数量变化时触发：

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

这需要jQuery框架。

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

6 个答案: