insert the value automatically in input text when another value is given to another input text

Question

In form, I want to insert the value of amount(text input) when value of rate(another text input) . The value which will be inserted in amount is the multiplication of rate and quantity. The value of quantity is taken from database. Here, the value of rate will be inserted by user. After insertion of amount, the value can not be changed. How can i do this?

I have tried below code but result is showing zero every time:

View

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

Am I correct that you want to change the input amount to the value of rate*quantity whenever the value of rate changes? — Martijn
– Martijn, Commented Jul 23, 2016 at 9:43
Yes, you are write and value of amount must be shown when the value iof rate is inserted. — Dhara Vihol
– Dhara Vihol, Commented Jul 23, 2016 at 9:46

Martijn · Accepted Answer · 2016-07-23 09:57:15Z

1

You can use jQuery to do that:

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

Don't forget to include the jQuery api. Also, don't forget to validate the amount after the form is submitted, as users can easily manipulate the value of the input.

answered Jul 23, 2016 at 9:57

Martijn

5146 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dhara Vihol Over a year ago

can i write this code inside 'value' attribute of input type?

Martijn Over a year ago

No, just put them into <script> tags in the <head>.

Dhara Vihol Over a year ago

okay. its working. but when i insert the value in rate it shows the value on blank page other than in the text box of amount. So, how can i write the value in value attribute of amount.

Martijn Over a year ago

Did you include the jQuery API? And dit you get an error message?

Dhara Vihol Over a year ago

k, That was my mistake. You solved it. Thank you, so much.

Ravi Roshan · Accepted Answer · 2016-07-23 13:05:49Z

Use Javascript for calculation.

I modified your code for your requirement. Your just need to set rate value dynamically from database. Here is your code :

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

Collectives™ on Stack Overflow

insert the value automatically in input text when another value is given to another input text

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related