Auto change values in input fields

Posted on 2011-03-04
Last Modified: 2012-06-27

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)

Question by:savsofts
  • 3
  • 3

Expert Comment

ID: 35040369
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

LVL 20

Expert Comment

by:Mark Brady
ID: 35040994
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.

Author Comment

ID: 35042782
can you please write complete code.
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.


Author Comment

ID: 35046822
hello PrplHaz4,

your code not working..

LVL 20

Accepted Solution

Mark Brady earned 500 total points
ID: 35047643
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

Author Comment

ID: 35055223
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.
LVL 20

Assisted Solution

by:Mark Brady
Mark Brady earned 500 total points
ID: 35061411
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;

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
These days socially coordinated efforts have turned into a critical requirement for enterprises.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now