Auto change values in input fields


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.

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)

Who is Participating?
Mark BradyConnect With a Mentor Principal Data EngineerCommented:
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

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

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

Open in new window

Mark BradyPrincipal Data EngineerCommented:
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.
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

savsoftsAuthor Commented:
can you please write complete code.
savsoftsAuthor Commented:
hello PrplHaz4,

your code not working..

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

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


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.
Mark BradyConnect With a Mentor Principal Data EngineerCommented:
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;
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.