Auto change values in input fields

Posted on 2011-03-04
Medium Priority
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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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.
WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.


Author Comment

ID: 35046822
hello PrplHaz4,

your code not working..

LVL 20

Accepted Solution

Mark Brady earned 2000 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 2000 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

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them.

Question has a verified solution.

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

Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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.
Suggested Courses

765 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