Get the result of two inupts into 3rd inut field

Question

ayesha789 7 Posting Pro in Training

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

php

Edited 14 Years Ago by ayesha789 because: n/a

6 Contributors
38 Replies
212 Views
1 Week Discussion Span
Latest Post 14 Years Ago Latest Post by ayesha789

potatoe 0 Newbie Poster

14 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

14 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

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

14 Years Ago

I see what you did there.

rajarajan2017 · 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?

rajarajan2017 · 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

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

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

Why you write this?

rajarajan2017 · 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.

rajarajan2017 · 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?

rajarajan2017 · Answer 11 · 2010-05-28T17:40:15+00:00

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

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

14 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

rajarajan2017 · 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

14 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.

rajarajan2017 · 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

14 Years Ago

Please reply, I am waiting

rajarajan2017 · 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

14 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