• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 665
  • Last Modified:

Auto change values in input fields

Hello,

i have many input fields
i want that if i fill value in one field then it will instantly fill or update values in another fields.

eg,
here are four coloms and two rows of input fields.

name       quantity       price      total_price
name1      1                 100        100
name2      2                 100        200

                              total amount 300

i want once i fill price after quantity script automatic fill the value of total amount by multipling quantity and price.
similarly in second rows and in last it also auto fill the total amount. (eg, 300)

Thanks
0
savsofts
Asked:
savsofts
  • 3
  • 3
2 Solutions
 
PrplHaz4Commented:
You will need to attach an "onChange" event handler to the "quantity" and "price" input fields so that when either is updated you call a function to calculate the "total_price" for that row.  Then you will want to also sum up each of the total_price values and calculate and fill the "total amount" input field.

<script type="text/javascript">
function updateTotalPrice {
this.myform.total_price.value = this.myform.quantity.value * this.myform.price.value;
}
</script>

<INPUT TYPE="text" NAME="quantity" onChange="updateTotalPrice()">
<INPUT TYPE="text" NAME="price" onChange="updateTotalPrice()">

Open in new window

0
 
Mark BradyCommented:
In order for javascript to get the correct values from the right input fields, make sure you have them named appropriately and give them all individual id's like

<input type="text" id="amount1" name="amount1" value="" />
<input type="text" id="amount2" name="amount2" value="" />

etc... You can also add class information if you want to style them all the same.

<input class="amountFields" type="text" id="amount1" name="amount1" value="" />
<input class="amountFields" type="text" id="amount2" name="amount2" value="" />

That was they have different id's but the same style. Now javascript like the functions that PrplHaz4 posted above can find the correct boxes to add up.
0
 
savsoftsAuthor Commented:
can you please write complete code.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
savsoftsAuthor Commented:
hello PrplHaz4,

your code not working..

0
 
Mark BradyCommented:
Ok here is an example. You can add to it or modify it to make it suit your needs. I will use 3 input boxes per row and create a global variable to hold the total amounts as they add up. Finally, I will display the answer/result in a div. The answer will change every time one of the boxes are changes.
Of course you should change the names and ID's of these elements to something that make sense to your project. I have attached the file with the code in it. Open it in your browser and start adding numbers into all the boxes and watch what happens. Now you can modify this to suit your needs but I think this will give you a good idea on HOW to build your page. If you get stuck with something, post what code you have done so far and ask us, we will be happy to help you sort it out. If you want a really good tutorial on how this all works, I wrote a javascript calculator tutorial a while back. you can view it here
http://www.bnsrecords.net/tutorials/java-calc/javacalculator.html

It has some good functions in it you can use in your projects and will give you a better understanding of javascript and math functions. math.html
0
 
savsoftsAuthor Commented:
hello elvin66,

thank you for answering. its start working and i have implemented in my project but i have small problem with it.

I don't know how many rows i need so i am trying to use for loop with php



<?php
for ($counter=1; $counter<=$pno; $counter++)
{
?>
<script type="text/javascript">
function addResults<?php echo $counter;?>(){
sTotal<?php echo $counter;?> = document.getElementById('quantity<?php echo $counter; ?>').value * document.getElementById('price<?php echo $counter;?>').value;
document.getElementById('totalamount<?php echo $counter;?>').value = sTotal<?php echo $counter;?>;
}
</script>

<?php
}
?>

where $pno is value GET through user
subtotal work alright
but how i can insert grand total field or there is any another method?

I will be very thankful to you, please give solution as soon as possible.


Thank you again.
0
 
Mark BradyCommented:
Probably the easiest way off the top of my head would be to create a global variable in javascript and with each loop you do, add the result to the global variable.

var GrandTotal = 0;


and in your function, add the result of each loop to the GrandTotal

GrandTotal = eval(GrandTotal + ' ' + sTotal);

Put that line in your loop before the closing bracket and it should add each loops sub total to the global variable "GrandTotal"

then, you can either use a <div> element to show the grand total like

<div id="grandTotal"></div>

and in your javascript after the loop has finished running, or from another function call do this

document.getElementById('grandTotal').innerHTML = GrandTotal;
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now