0

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>

Edited by ayesha789: n/a

6
Contributors
38
Replies
39
Views
7 Years
Discussion Span
Last Post by ayesha789
Featured Replies
  • Add following javascript code before html body tag. [code] <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 … Read More

  • some code was not required given in my previous post. following is the final one. Add following javascript code before html body tag. [code] <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 … Read More

0

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.

1

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();' />
1

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 by urtrivedi: n/a

0

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

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?

0

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?

0

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

Edited by urtrivedi: n/a

0

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.

Edited by rajarajan07: n/a

0

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!

0

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

0

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

0

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

0

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;?>);

.
.
.
}
0

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

Edited by ayesha789: n/a

0

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.

Edited by rajarajan07: n/a

0

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.

0

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.

Edited by rajarajan07: n/a

0

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

0

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

Attachments mfquestion.png 94.22 KB
0

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

Edited by rajarajan07: n/a

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.