Topic: JS Function & Variable Storage (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=27926" title="Pages that link to Topic: JS Function &amp;amp; Variable Storage (Page 1 of 1)" rel="nofollow" >Topic: JS Function &amp; Variable Storage <span class="small">(Page 1 of 1)</span>\
 
Hutch
Neurotic (0) Inmate
Newly admitted

From:
Insane since: May 2006

 posted posted 05-14-2006 06:20

Hi,
I am trying to input a variable (hours) from the input text box and on clicking submit, execute the function, and display the result in a textbox. There is a calculated value current_charges and an accumulated value running_total.

Everytime a value is input and the person clicks calculate, I want the current_charges to be output to the textarea named "current" and running_total to be output to the textarea named "running_total".

I am having two problems:
a) The values are put into the textarea and then immediately removed because the page refreshes (reason unknown...the address extension then includes parameters)

b) the running_total variable is cleared everytime the person clicks calculate. I believe this is because the page gets refreshed on clicking calculate so the previous value is lost.

I have put in an alert in the function so there is time to see what happens.

code:
<html>
	<head>
		<title>Test</title>
	</head>
	<script language="javascript" type="text/javascript">
		var current_charges=0;
		var running_total=0;
		var hours;
		function calculateCharges(hours) {
			
			if ( hours <= 3 ) {
		
				current_charges = 2;
			}

			else if ( hours > 3 && hours <= 19) {

				current_charges = 2 + (0.50 * (hours - 3));
			}

			else {
	
				current_charges = 10;
			}
			
			
			document.parking.current.value=current_charges;
			running_total=running_total + current_charges;
			document.parking.running.value=running_total;
			[b]alert("current_charges:" + current_charges + " running_total: " + running_total);[/b]
			return false;
		}
	</script>
	<body>
		<form name="parking" method="get" onSubmit="calculateCharges(document.parking.hoursparked.value)">
			Please enter the number of hours parked for the current customer:
			<br>
			<input type="Integer" name="hoursparked" value="">
			<br>
			<input type="Submit" value="Calculate">
			<p>
			Charges for current customer:
			<textarea name="current" rows="5" cols="5" value="">
			</textarea>
			<p>
			Accumulated charges:
			<textarea name="running" rows="5" cols="5" value="">
			</textarea>
		</form>
	</body>
</html>



Any help would be greatly appreciated.
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 posted posted 05-14-2006 11:16

Normal, you don't return FALSE onSubmit to cancel the submission of the form, thus the values you see added in the GET parameters of the URL. Just change the FORM tag like that :

code:
<form name="parking" method="get" onSubmit="return calculateCharges(this.hoursparked.value)">

And voilà it works.

OTOH, I would not use a submit INPUT to do such thing, but a regular BUTTON with an onclick. You should either disable the TEXTAREAs or replace them by a simple SPAN element so the user can not change their value.


The SCRIPT tag should be either in the HEAD or in the BODY, preferably in the HEAD, or better : external.
And there is no such thing as an INPUT type="Integer"

According to the HTML 4.01 Specification - Forms - Control types created with INPUT, the type of an INPUT is either : text, password, checkbox, radio, submit, image, reset, button or file.

Hope that helps,



(Edited by poi on 05-14-2006 11:38)
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 posted posted 05-14-2006 11:44

Couldn't resist:

code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Test</title>
<script type="text/javascript">

var	running_total=0;

function calculateCharges( hoursArgument )
{
	var hours= parseFloat(hoursArgument);
	if( isNaN(hours) || hours<=0 )
	{
		alert( "** ERROR **" )
		return false;
	}


	var current_charges;
	if ( hours <= 3 )
		current_charges = 2;
	else if ( hours > 3 && hours <= 19)
		current_charges = 2 + (0.50 * (hours - 3));
	else
		current_charges = 10;


	running_total += current_charges;
	document.getElementById('currentWage').firstChild.nodeValue = current_charges;
	document.getElementById('runningWage').firstChild.nodeValue = running_total;
	return true;
}

</script>
</head>
<body>

	<form action="">
		<fieldset>
			<legend>Please enter the number of hours parked for the current customer:</legend>
			<input type="text" name="hoursparked" value="0" />
			<button  type='button' onclick='calculateCharges(this.form.hoursparked.value)' >Calculate charges</button>
		</fieldset>
	</form>

	<p>Charges for current customer: <span id='currentWage'>0</span></p>
	<p>Accumulated charges: <span id='runningWage'>0</span></p>

</body>
</html>





(Edited by poi on 05-14-2006 11:52)
Hutch
Obsessive-Compulsive (I) Inmate

From:
Insane since: May 2006

 posted posted 05-19-2006 21:45

Thanks for the help. I switched it up by using the button instead. I tried your example, but sometimes you would have to click twice for it to work.

Here is my new code, only thing I want to change is so "enter" key works to execute the function :

code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
	<head>
		<title>TME 2 Part 4</title>
	
	<script language="Javascript" type="text/javascript">
		var current_charges=0;
		var running_total=0;
		var hours;
		var hoursparked;
		function calculateCharges(hours) {
			
			if ( hours <= 3 ) {
		
				current_charges = 2;
			}

			else if ( hours > 3 && hours <= 19) {

				current_charges = 2 + (0.50 * (hours - 3));
			}

			else {
	
				current_charges = 10;
			}
			
			document.parking.current.value="$" + current_charges;
			running_total=running_total + current_charges;
			document.parking.running.value="$" + running_total;
			
			
		}
	</script>
	</head>
	<body>
		<form name="parking" onSubmit="return false;">
			Please enter the number of hours parked for the current customer:
			<br>
			<input type="text" name="hoursparked" value="">
			<br>
			<input type="button" onClick="calculateCharges(document.parking.hoursparked.value);" value="Calculate">
			<p>
			Charges for current customer:
			<input type="text" name="current" value="">
			<p>
			Yesterday's running total:
			<input type="text" name="running" value="">
			
		</form>
	</body>
</html>
HZR
Paranoid (IV) Inmate

From: Cold Sweden
Insane since: Jul 2002

 posted posted 05-19-2006 22:10
quote:

only thing I want to change is so "enter" key works to execute the function


Use the following form element instead of yours

code:
<form name="parking" onSubmit="calculateCharges(document.parking.hoursparked.value); return false;">
  Please enter the number of hours parked for the current customer:
  <br>
  <input type="text" name="hoursparked" value="">
  <br>
  <input type="submit" value="Calculate">
  <p>
  Charges for current customer:
  <input type="text" name="current" value="">
  <p>
  Yesterday's running total:
  <input type="text" name="running" value="">
</form>



(Edited by HZR on 05-19-2006 22:12)


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu