3

フォームのフィールドにフォーカスが移ったら、特定のボタンを入力せずにそのフィールドの値を計算するjavascript関数を呼び出したいと思います。

フォームをリロードせずにこれは可能ですか？

Amountフィールドを読み取り専用にすること、およびこれを行う他のいくつかの方法を考えましたが、Quantityフィールドを変更すると、Quantityフィールドのonchangeまたはonfocusのいずれかを使用してAmountフィールドが変更される可能性があるかどうかを確認しています。金額フィールド。

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

ただし、これは、イベントリスナーを個別にバインドする必要があるベストプラクティスに準拠していないことに注意してください。

「フィールド」を意味するときに誤って「ボタン」と入力した可能性がありますが、他の要素の内部HTMLを「innerHTML」属性で更新できることにも言及します。例：

<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 に答える