Get the result of two inupts into 3rd inut field

Question

ayesha789 7 Posting Pro in Training

16 Years Ago

This is my form: I want to calculate Units Billed when user enter present and previous reading before submission.

<form action="EIMS_North_Inserted.php" method="post">

<table class="mytable" align="center">
<tr>
<td><label>Site ID
<span class="small">Example N-WAH-8620</span>
</label></td>
<td>
<input type="text" name="a" id="course"  value=""  class="input"/> </td>

<td>
<label>Previous Reading
<span class="small">Regular bills</span>
</label></td>
<td>
<input type="text" name="e" id="e" value="<?php echo $e; ?>"  class="input"/> </td>

<td><label>Present Reading
<span class="small">Regular bills</span>
</label></td>
<td>
<input type="text" name="f" id="f" value=""  class="input"/> </td></tr>
<tr>
<td><label>Units Billed
<span class="small">Regular bills</span>
</label></td>
<td>
<input type="text" name="g" id="g" value=""  class="input"/> </td>

<tr>
<td colspan="2">
<input type="submit" name="submit" style="width: 200px;
	height: 20px;
	cursor: pointer;
	border: none;
	margin-left:100px;
	background: transparent url(/images/sims_update_button.jpg) no-repeat 0 0;" value=""/>
</td>
</tr>
 </form>
</table>

html-css php

Edited 16 Years Ago by ayesha789 because: n/a

6 Contributors
38 Replies
256 Views
1 Week Discussion Span
Latest Post 16 Years Ago Latest Post by ayesha789

Dani AI

Generated 8 Months Ago

Short summary and recommended approach

Compute Units on the client so users see g = (f - e) * MF before submitting. There are two practical ways shown in the thread: preload a small code→MF mapping into JavaScript (as suggests) or fetch MF on demand with an AJAX call (better for large or frequently changing tables). Make the computed g field read-only (not disabled) so it remains visible and is included in the form submission.

Practical tips and common pitfalls

Validate and coerce inputs before calculating: trim whitespace, strip thousands separators (commas), convert to a Number and check with isFinite (or a strict numeric regex). Browsers differ in how parseFloat/isNaN behave, so test edge cases.
Handle present < previous deliberately — treat as a validation error, prompt the user, or apply a meter-rollover rule (if applicable). The simple curr >= previous check in the thread is fine as a guard.
Use readonly for computed inputs (disabled inputs aren’t submitted). Avoid inline typos like javascritp; prefer addEventListener('input', ...) for live updates instead of only onblur.
If you preload MF values, escape server output correctly and don’t dump large tables into the page. If you use AJAX, debounce the lookup (200–500 ms) and only request when the code looks valid.

Security, reliability and testing

Always re-calculate and validate the final units on the server before inserting into the database — never trust client-sent computed values. Sanitize and validate the site code on the server, use prepared statements (mysqli/PDO) for DB access, and return MF via a JSON endpoint for AJAX. Test for non-numeric inputs, rounding/precision, and keyboard/screen-reader accessibility (use an aria-live region for dynamic updates).

Quick checklist before you ship

g updates responsively when e or f change. 2) a (MF) is populated correctly by lookup or map. 3) invalid input shows a clear inline message. 4) server re-computes and stores the authoritative value. 5) the UX works with keyboard and assistive tech.

The thread posts from , and offer the core patterns; use the checklist above to harden the implementation for production.

All 38 Replies

potatoe 0 Newbie Poster

16 Years Ago

Seems to me that you want the values calculated on the fly. You can do this on a simple Javascript, IMO this cannot be done by php without parsing the form values first.

urtrivedi 276 Nearly a Posting Virtuoso

16 Years Ago

Add following javascript code before html body tag.

<script lang='javascript'>
function calculate()
{
 //e is previous
 //f is current
 //g is new is f-e
 	previous=parseFloat(document.getElementById("e").value);
 	curr=parseFloat(document.getElementById("f").value);
	if(!isNaN(previous) && !isNaN(curr) )
	{
	 	if(curr>=previous)
			document.getElementById("g").value=curr-previous;
		else
			document.getElementById("g").value="";
	}
	else
	{
		document.getElementById("g").value="";
	}
	var total = 0;      
	for (i = 1 ;i <= 15; i++)      
	{        
		if (i<10)
			labelname='amount_0'+i;
		else
			labelname='amount_'+i;
	
	
		if (!isNaN(parseFloat(document.getElementById(labelname).innerHTML)))
			total += parseFloat(document.getElementById(labelname).innerHTML);      
	}      
	
	document.getElementById(label2).innerHTML = total;
}
<script>

in your html part add onblur events as shown below in your text box elements

<input type="text" name="e" id="e" value="<?php echo $e; ?>"  class="input" onblur='javascritp:calculate();' /> 
<input type="text" name="f" id="f" value=""  class="input"  onblur='javascritp:calculate();' />

urtrivedi 276 Nearly a Posting Virtuoso

16 Years Ago

some code was not required given in my previous post. following is the final one.
Add following javascript code before html body tag.

<script lang='javascript'>
function calculate()
{
 //e is previous
 //f is current
 //g is new is f-e
 	previous=parseFloat(document.getElementById("e").value);
 	curr=parseFloat(document.getElementById("f").value);
	if(!isNaN(previous) && !isNaN(curr) )
	{
	 	if(curr>=previous)
			document.getElementById("g").value=curr-previous;
		else
			document.getElementById("g").value="";
	}
	else
	{
		document.getElementById("g").value="";
	}
}
<script>

in your html part add onblur events as shown below in your text box elements

<input type="text" name="e" id="e" value="<?php echo $e; ?>"  class="input" onblur='javascritp:calculate();' /> 
<input type="text" name="f" id="f" value=""  class="input"  onblur='javascritp:calculate();' />

Edited 16 Years Ago by urtrivedi because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

potatoe 0 Newbie Poster · Answer 1 · 2010-05-28T13:38:33+00:00

potatoe 0 Newbie Poster

16 Years Ago

I see what you did there.

Member #334542 · Answer 2 · 2010-05-28T15:28:46+00:00

Utrivedi, the below code is also working for me without the validation then why we should check for that? browser compatability?

You mistakently ommited the g value textbox and added here

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script lang='javascript'>
function calculate()
{
 	previous=parseFloat(document.getElementById("e").value);
 	curr=parseFloat(document.getElementById("f").value);
	 	if(curr>=previous)
			document.getElementById("g").value=curr-previous;
		else
			document.getElementById("g").value="";
}
</script>
</head>
<body>
<input type="text" name="e" id="e" value="10"  onblur='javascritp:calculate();' /> 
<input type="text" name="f" id="f" value="20"  class="input"  onblur='javascritp:calculate();' />
<input type="text" name="f" id="g" value=""  class="input"  onblur='javascritp:calculate();' />
</body>
</html>

urtrivedi 276 Nearly a Posting Virtuoso · Answer 3 · 2010-05-28T16:24:47+00:00

g field is calculated field, user may not change it so onblur='javascritp:calculate();' is not required for g field. User is not going to type there anything.

I am not checking for browser compatibility anywhere, why do you feel so?

Member #334542 · Answer 4 · 2010-05-28T16:33:21+00:00

Okay, but without using the tag you retrieved in the javascript. I want to know in which scenario we must need isNAN to check because without that itself working for me?

ayesha789 7 Posting Pro in Training · Answer 5 · 2010-05-28T17:22:39+00:00

ayesha789 7 Posting Pro in Training

16 Years Ago

But I require the result in input feild where id is g

urtrivedi 276 Nearly a Posting Virtuoso · Answer 6 · 2010-05-28T17:22:56+00:00

Dear Raja
Some time if you parse string to float it my give Nan (NOT a number) error, to avoid such error I have used isNaN function.

Dear Ayesha
Dont worry, this code will give you result in g field

ayesha789 7 Posting Pro in Training · Answer 7 · 2010-05-28T17:27:15+00:00

ayesha789 7 Posting Pro in Training

16 Years Ago

if(!isNaN(previous) && !isNaN(curr) )

Why you write this?

Member #334542 · Answer 8 · 2010-05-28T17:28:52+00:00

Ayeshya,

Please add the one more input code

<input type="text" name="g" id="g" value=""  class="input"/>

Then you can see the result.

Dont be scared for that isNAN code, that is fine as utrivedi said. Sometimes the given input show an error as NAN (Not a number) means then given input is not a number. To identified and avoid that utrivedit used that. When u give strings then you can't get display in inputbox.

Member #334542 · Answer 9 · 2010-05-28T17:38:55+00:00

Here is the complete code

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script lang='javascript'>
function calculate()
{
 	previous=parseFloat(document.getElementById("e").value);
 	curr=parseFloat(document.getElementById("f").value);
	if(!isNaN(previous) && !isNaN(curr) )
	{
	 	if(curr>=previous)
			document.getElementById("g").value=curr-previous;
		else
			document.getElementById("g").value="Not curr>=previous";
	}
	else
	{
		document.getElementById("g").value="Not a Number";
	}
}
</script>
</head>
<body>
<input type="text" name="e" id="e" value="10"  onblur='javascritp:calculate();' /> 
<input type="text" name="f" id="f" value="20"  class="input"  onblur='javascritp:calculate();' />
<input type="text" name="g" id="g" value=""  class="input" />
</body>
</html>

Test it in two ways:

Method I: Give your name in first text box. (and check the third box output)
Method II: Give a number greater than second text box (and check the third box output)

I hope u understand now!

ayesha789 7 Posting Pro in Training · Answer 10 · 2010-05-28T17:38:56+00:00

I have g feild in my code thats why utrivedi did not write.
Now one more qustion I want to ask...
Can I?

Member #334542 · Answer 11 · 2010-05-28T17:40:15+00:00

Member #334542

16 Years Ago

Okay, I did not noticed. Ayesha, did you gone thru the above code?

Edited 16 Years Ago by Member #334542 because: n/a

ayesha789 7 Posting Pro in Training · Answer 12 · 2010-05-28T17:41:32+00:00

Yea its working perfectly for me.
can I ask next question related to this?

urtrivedi 276 Nearly a Posting Virtuoso · Answer 13 · 2010-05-28T17:42:18+00:00

urtrivedi 276 Nearly a Posting Virtuoso

16 Years Ago

Ya ayesha you may ask.

ayesha789 7 Posting Pro in Training · Answer 14 · 2010-05-28T17:48:07+00:00

e feild is Previous reading
f feild is Present Reading
g is Caclulated by f-e
now I have another feild name a which is code of bill
and in DB I store code and there MF(Multiplying Factor)
Now I want my result g=(f-e)*MF
if Site id 8620 and mf 2 in DB Table
when user write 8620 in feild a it gets value of MF from DB and calculate g=(f-e)*MF

urtrivedi 276 Nearly a Posting Virtuoso · Answer 15 · 2010-05-28T17:53:22+00:00

you need to change as code given below

<?php
// find multiplier here 
$mfvalue=9;
?>
<script lang='javascript'>
function calcualte()
{
.
.
.
.
if(curr>=previous)
	document.getElementById("g").value=(curr-previous)*(<?php echo $mfvalue;?>);

.
.
.
}

ayesha789 7 Posting Pro in Training · Answer 16 · 2010-05-28T17:59:43+00:00

for Example
When I write value in field a can it search value from DB table and store in hidden feild for calculation use?
Table name: MFCode

Code MF
8620 2
8621 1
8645 5

Member #334542 · Answer 17 · 2010-05-28T18:02:08+00:00

i) Create a new field with an id="a"
ii) Connect database retrieve the value of mf for relevant site.
iii) Do the calculation as before.

I suggested only the logic. for the above work you should use both the php and javascript elements within the document.

ayesha789 7 Posting Pro in Training · Answer 18 · 2010-05-28T18:05:29+00:00

ayesha789 7 Posting Pro in Training

16 Years Ago

but I want mf on the basis of input of feild a.

urtrivedi 276 Nearly a Posting Virtuoso · Answer 19 · 2010-05-28T18:11:14+00:00

no need to keep it in hidden field.
You may query database before script tag and find value in variable $mfvalue.
then echo value of $mfvalue in your javascript as i have shown in abouve post.

Member #334542 · Answer 20 · 2010-05-28T18:11:44+00:00

Then come out of playing with html and javascript.

i) create a form with your input fields and a button.
<form name="frm" method="post" action="process.php">
ii) On submit it will the process the seperate php file, pass your a field value
$siteno=$_POST;
iii) Then connect your database and retrieve the specific value
iv) Then do the calculation.

ayesha789 7 Posting Pro in Training · Answer 21 · 2010-05-28T18:24:47+00:00

But my requirement is to show units calculated on client side before submit so they can verify. I can share image of scenario in next post

ayesha789 7 Posting Pro in Training · Answer 22 · 2010-05-28T18:34:30+00:00

But my requirement is to show units calculated on client side before submit so they can verify. I can share image of scenario in next post

Please check image . I want g=(f-e)*mf

ayesha789 7 Posting Pro in Training · Answer 23 · 2010-05-28T18:49:10+00:00

ayesha789 7 Posting Pro in Training

16 Years Ago

Please reply, I am waiting

Member #334542 · Answer 24 · 2010-05-28T18:52:31+00:00

Its critical to pass javascript value to php script without using the post or get.

ayesha789 7 Posting Pro in Training · Answer 25 · 2010-05-28T19:05:37+00:00

ayesha789 7 Posting Pro in Training

16 Years Ago

is it impossible?

ayesha789 7 Posting Pro in Training · Answer 26 · 2010-05-28T19:06:16+00:00

Please check image . I want g=(f-e)*mf

Please check my image

Get the result of two inupts into 3rd inut field

Dani AI

Recommended Answers Collapse Answers

All 38 Replies

Recommended Answers