別の値が別の入力テキストに与えられたときに入力テキストに値を自動的に挿入します

フォームでは、レートの値（別のテキスト入力）を入力するときにamount（テキスト入力）の値を挿入します。金額に挿入される金額は金利と金額の掛け算です。数量の値はデータベースから取得されます。ここで、レートの値はユーザーによって挿入されます。金額の挿入後、値を変更することはできません。これどうやってするの？別の値が別の入力テキストに与えられたときに入力テキストに値を自動的に挿入します

私はコードの下に試してみましたが、結果はゼロを毎回表示されます。

ビュー

<div class="form-group"> 
    <label for="exampleInputPassword1">Rate</label> 
    <input type="text" class="form-control" name="rate" placeholder="Rate" required> 
</div> 
<div class="form-group"> 
    <label>Quantity</label> 
    <input type="text" class="form-control" name="quantity" placeholder="quantity" value="<?php echo $object['sheet']; ?> " required readonly> 
</div> 
<div class="form-group"> 
    <label for="exampleInputPassword2">Amount</label> 
    <?php 
    $sheet = $object['sheet']; 
    $rate = $this->input->post('rate'); 
    $amount = $sheet*$rate; 
    echo $amount; 
    } 
    ?> 
    <input type="text" class="form-control" name="amount" value="<?php echo $amount;?>" placeholder="Amount" required> 
</div>

出典

2016-07-23 Dhara Vihol

レートの値が変わるたびに入力量をrate * quantityの値に変更したいと思っていますか？ – Martijn

はい、あなたは書き込みであり、値のiofレートが挿入されたときに額の値を表示する必要があります。 –

をあなたはそれを行うにはjQueryを使用することができます。

$(document).ready(function() { 
$('input[name="rate"]').on('change',function() { 
    var amount = $(this).val()*$('input[name="quantity"]').val(); 
    $('input[name="amount"]').val(amount); 
}) 
});

は忘れてはいけませんjQuery APIをインクルードします。また、ユーザーが入力の値を簡単に操作できるため、フォームの送信後に金額を確認することを忘れないでください。

出典

2016-07-23 09:57:15 Martijn

このコードを入力型の 'value'属性の中に書くことができますか？ –

いいえ、の

あなたはこれを使用することができます：

は

まず計算のために、トップ

// use correct path to jQuery file 
<script src="<?php echo base_url().'js/jquery.min.js'; ?>"></script> 

// Or just use this 
<script src="https://code.jquery.com/jquery-2.2.4.js"; ?>"></script> 

// after jQuery 
<script> 
$(document).ready(function() { 
    $('input[name="rate"]').on('change',function() { 
     var quantity = $('input[name="quantity"]').val(); 

     if (quantity) { 
       var amount = $(this).val() * quantity; 
       $('input[name="amount"]').val(amount); 
       $('input[name="amount"]').prop('readonly', true); 
     } 
    }) 
}); 
</script>

出典

2016-07-23 10:27:30 Dhaniram

JavaScriptを使用でのjQueryを追加します。

要件に合わせてコードを変更しました。あなたは、データベースからレート値を動的に設定するだけです。あなたのコードは次のとおりです：

<div class="form-group"> 
    <label for="exampleInputPassword1">Rate</label> 
    <input type="text" class="form-control" name="rate" placeholder="Enter Rate" id="rate" required> 
</div> 
<div class="form-group"> 
    <label>Quantity</label> 
    <input type="text" class="form-control" name="quantity" placeholder="quantity" value="2" id="qnty" required readonly> 
</div> 
<div class="form-group"> 
    <label for="exampleInputPassword2">Amount</label> 
    <input type="text" class="form-control" name="amount" value="" id="amt" placeholder="Amount" required> 
</div> 
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script> 
<script> 
    $('#rate').keyup(function(){ 
    var rate = parseInt($('#rate').val()); 
    var qnty = parseInt($('#qnty').val()); 
    var amt = parseInt(rate*qnty); 
    if(isNaN(amt)){ 
     $('#amt').val('Enter valid rate'); 
    } else { 
     $('#amt').val(amt); 
    } 

    }); 

</script>

出典

2016-07-23 13:05:49

別の値が別の入力テキストに与えられたときに入力テキストに値を自動的に挿入します

答えて

関連する問題