Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #17360 > unrolled thread

New to javascript, please help

Back to article view | Back to comp.lang.javascript

Contents

  New to javascript, please help Christian van der Meij <chriscross1972@gmail.com> - 2012-11-27 05:14 -0800
    Re: New to javascript, please help Tim Streater <timstreater@greenbee.net> - 2012-11-27 13:30 +0000
      Re: New to javascript, please help Christian van der Meij <chriscross1972@gmail.com> - 2012-11-27 06:32 -0800
    Re: New to javascript, please help Stefan Weiss <krewecherl@gmail.com> - 2012-11-27 14:44 +0100
      Re: New to javascript, please help Christian van der Meij <chriscross1972@gmail.com> - 2012-11-27 06:40 -0800
        Re: New to javascript, please help "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2012-11-27 20:51 +0100

#17360 — New to javascript, please help

I am trying to learn javascript and in particular in conjunction with forms to make some calculations. I like browsing the web to find the information I need. However I am stuck right now.....can somebody point me in good direction to get this code working. 


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
	function CalcTas(){

	var ias = document.getElementById('iasinput').value;
	var alt = document.getElementById('altinput').value;
	
	tas = (ias * (1 + ((alt / 1000) *.02)));
		
	document.getElementById('txt1').innerHTML = tas + " kts";
	return;
	}	
	</script>
	
	</head>
	<body onload="CalcTas()">
		<form name="calculator" id="calculator" action="" onsubmit="CalcTas()">	
		<input type="number" name="iasinput" id="iasinput"></input>
		<input type="number" name="altinput" id="altinput"></input>
		<input type="submit" value="submit"></input>
		<input type="reset" value="reset"></input>
		</form>
		<p id="txt1"></p>
	</body>
</html>

[toc] | [next] | [standalone]

#17361

In article <ce72955e-bce6-4b90-bba1-7398e884f41a@googlegroups.com>,
 Christian van der Meij <chriscross1972@gmail.com> wrote:

> I am trying to learn javascript and in particular in conjunction with forms 
> to make some calculations. I like browsing the web to find the information I 
> need. However I am stuck right now.....can somebody point me in good 
> direction to get this code working. 
> 
> 
> <!DOCTYPE html>
> <html>
> 	<head>
> 		<meta charset="utf-8">
> 		<title></title>
> 		<script>
> 	function CalcTas(){
> 
> 	var ias = document.getElementById('iasinput').value;
> 	var alt = document.getElementById('altinput').value;
> 	
> 	tas = (ias * (1 + ((alt / 1000) *.02)));
> 		
> 	document.getElementById('txt1').innerHTML = tas + " kts";
> 	return;
> 	}	
> 	</script>
> 	
> 	</head>
> 	<body onload="CalcTas()">
> 		<form name="calculator" id="calculator" action="" onsubmit="CalcTas()">	
> 		<input type="number" name="iasinput" id="iasinput"></input>
> 		<input type="number" name="altinput" id="altinput"></input>
> 		<input type="submit" value="submit"></input>
> 		<input type="reset" value="reset"></input>
> 		</form>
> 		<p id="txt1"></p>
> 	</body>
> </html>

Why do you have:   <body onload="CalcTas()">   instead of just <body> ??

When you click submit, the form gets submitted. Since you specified "" 
as the action, that just reloads the form. So when the page reloads you 
overwrite anything you put into the txt1 <p> with nothing, and then you 
call CalcTas again to write out "0 kts".

So I'd say get rid of the onload and stop submitting the form. Remove 
the onsubmit and replace the <input type="submit" ... with:

<input type="button" value="Calculate" onclick="CalcTas()">

Then go and look all that up so you understand it.

-- 
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted"  --  Bill of Rights 1689

[toc] | [prev] | [next] | [standalone]

#17363

Tnkx Tim,

I used the body onLoad to see what the output was. Your input button did the trick. Thank you very much for help!! I see it much clearer now, clear explanation :)

Christian

[toc] | [prev] | [next] | [standalone]

#17362

On 2012-11-27 14:14, Christian van der Meij wrote:
> I am trying to learn javascript and in particular in conjunction
> with forms to make some calculations. I like browsing the web to
> find the information I need. However I am stuck right now.....
> can somebody point me in good direction to get this code working.

Next time, please tell us what you're trying to do and which part should
work differently.

The short answer in your case is that when you hit the submit button,
your form gets submitted. This will cause the page to be reloaded*. You
can prevent that by returning false in the onsubmit attribute:

  <form ... onsubmit="return false">

If you want your submit handler to execute as well, you can either use
something like this -

  <form ... onsubmit="CalcTas(); return false">

- or you can use the return value from the CalcTas() function:

      function CalcTas () {
          ...
          return false;
      }
  </script>
  <form ... onsubmit="return CalcTas()">

This will solve your immediate problem.
Now for some other things you should do:

*Always* validate your HTML before you go looking for JS errors. Your
document is not valid HTML 5; use http://validator.nu/ (for HTML 5) or
http://validator.w3.org/ (for all flavors) to check the document.

> 	tas = (ias * (1 + ((alt / 1000) *.02)));

You didn't declare the variable tas. This will make tas a global
variable. You can use tools like JsLint to find problems like this.

> 	return;
> 	}

This doesn't do anything, the function would return at that point anyway
(and the return value would be undefined, with or without the extra
'return' statement).


HTH,
stefan


*] Actually, a reload is just one of the things that could happen. Since
you left the action attribute of the form empty, the behavior is
unspecified. An empty action attribute is not valid in HTML.

[toc] | [prev] | [next] | [standalone]

#17364

Stefan,

Sorry about that I was not clear about my goal. I totally misunderstood the concept of the form onSubmit handler. I did not realise that it would actually reload my page.

Thanks for the validation websites.....I bookmarked them all.

...lessons learned ! thanks again for your help.

Christian

[toc] | [prev] | [next] | [standalone]

#17371

Christian van der Meij wrote on 27 nov 2012 in comp.lang.javascript:

> Sorry about that 

You cannot be sorry,
because there is no "that",
if you do not quote what that is.

Usenet is not email.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web