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.
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.


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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Decrypt string by php 7 48
Redirect 301 from one address  to another 5 27
Undefined Variable: loop_limit, Undefined Variable: number 3 20
PHP 5.6 and 7.x 4 23
Part of the Global Positioning System A geocode ( is the major subset of a GPS coordinate (, the other parts being the altitude and t…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
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…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

821 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