Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Webspace Calculator - First Script Help 1

Status
Not open for further replies.
FreeSiteTroy

FreeSiteTroy

Technical User
Jul 26, 2007
9
US
I'm very new to JavaScript and I am trying to write a program that allows people to calculate their webspace usage, but everything I try I just get undefined or NaN. Here's my code, any help is greatly appreciated!
Code: 
<HTML>
<HEAD>
<TITLE>Webspace Calculator</TITLE>

</HEAD>
<BODY>

<script type="text/javascript">
function calculate()
{

var pages=number(document.calculator.pages.value);
var blog=number(document.calculator.blog.value);
var forum=number(document.calculator.forum.value);
var album=number(document.calculator.album.value);
var files=number(document.calculator.files.value);
var video=number(document.calculator.video.value);
var audio=number(document.calculator.audio.value);
var years=number(document.calculator.years.value);

var fixed=pages+album+files+video+audio;
var varied=blog+forum;

var r= years * varied;
var res = fixed + r + 20;

document.result.result.value=res;
}
</script>

<form name="calculator" onsubmit="calculate(); return false;">
<div>
Static Webpages: <br>
<input type="radio" value="0" name="pages" checked> No static pages
<br>
<input type="radio" value="10" name="pages"> 10 or fewer static pages
<br>
<input type="radio"  value="50" name="pages"> 11-50 static pages
<br>
<input type="radio"  value="100" name="pages"> 50 or more static pages
</div>
<br>
<br>
<div>
Blog:  <br>
<input type="radio"  value="0" name="blog" checked> No blog
<br>
<input type="radio"  value="5" name="blog"> 7 or fewer posts per week
<br>
<input type="radio"  value="15" name="blog"> 7-20 posts per week
<br>
<input type="radio"  value="30" name="blog"> More than 20 posts per week
</div>
<br>
<br>
<div>
Forum:  <br>
<input type="radio" value="0" name="forum" checked> No forum
<br>
<input type="radio" value="15" name="forum"> 10 or fewer posts per day
<br>
<input type="radio" value="30" name="forum"> 11-50 posts per day
<br>
<input type="radio" value="100" name="forum"> 50 or more posts per day
</div>
<br>
<br>
<div>
Photo album:  <br>
<input type="radio" value="0" name="album" checked> No photo album
<br>
<input type="radio" value="50" name="album"> 20 or fewer photos
<br>
<input type="radio" value="100" name="album"> 20-50 photos
<br>
<input type="radio" value="250" name="album"> 50 or more photos
</div>
<br>
<br>
<div>
File Database:  <br>
<input type="radio" value="0" name="files" checked> No file database
<br>
<input type="radio" value="100" name="files"> 20 or fewer files
<br>
<input type="radio" value="250" name="files"> 20-100 files
<br>
<input type="radio" value="500" name="files"> 100 or more files
</div>
<br>
<br>
<div>
Video (not including embedded YouTube content):  <br>
<input type="radio" value="0" name="video" checked> No video
<br>
<input type="radio" value="150" name="video"> Less than 30 minutes of video
<br>
<input type="radio" value="500" name="video"> 30-120 minutes of video
<br>
<input type="radio" value="1024" name="video"> 120 or more minutes of video
</div>
<br>
<br>
<div>
Audio (mp3 format):  <br>
<input type="radio" value="0" name="audio" checked> No audio
<br>
<input type="radio" value="40" name="audio"> Less than 30 minutes of audio
<br>
<input type="radio" value="80" name="audio"> 30-120 minutes of audio
<br>
<input type="radio" value="300" name="audio"> More than 120 minutes of audio
</div>
<br>
<br>
<div>
Project for:  <br>
<input type="radio" value="1" name="years" checked> 1 Year
<br>
<input type="radio" value="2" name="years"> 2 Years
<br>
<input type="radio" value="3" name="years"> 3 Years
<br>
<input type="radio" value="4" name="years"> 4 Years
<br>
<input type="radio" value="5" name="years"> 5 Years
</div>
<br>
<br>
<input type="submit" value="Calculate!">
</form>
<form name="result">
<input type="text" name="result">megabytes
</form>
</BODY>
</HTML>
 
Sort by date Sort by votes
And incidentally, this calculation will be nothing other than a very rough estimate. The best way to do this would be server-side, when you would be more able to accurately calculate the disk-space usage.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
I don't mind it being a rough estimate, I just want it to work without giving me NaN in the result box. I changed the code to parseInt but still no luck. Any ideas?
 
Upvote 0 Downvote
The "value" of a radio button group is not the current checked button's value.

It just creates an array and you will have to loop and check for the checked buttons.

[monkey][snake] <.
 
Upvote 0 Downvote
So how do you check to see if a button is checked? (don't give me too much code here, I want to do the loop and stuff myself :) )
 
Upvote 0 Downvote
This is what I came up with:
Code: 
<script type="text/javascript">
function calculate()
{

var buttonArray = document.getElementsByTagName("input");
var buttonArrayLength = buttonArray.length;
var fixed = 0;
var varied = 0;
var years = 0;
for (a = 0; a < buttonArrayLength; a++) {
   if (buttonArray[a].checked && buttonArray[a].name != "blog" && buttonArray[a].name != "forum" && buttonArray[a].name != "years") {
      fixed += parseInt(buttonArray[a].value, 10);
   }
   else if (buttonArray[a].checked && buttonArray[a].name == "blog" || buttonArray[a].name == "forum") {
      varied += parseInt(buttonArray[a].value, 10);
   }
   else if (buttonArray[a].checked && buttonArray[a].name == "years") {
      years = parseInt(buttonArray[a].value, 10);
   }
}

var r = years * varied;
var res = fixed + r + 20;
document.getElementById("result").value = res;
}
</script>

And I removed the second form.
Code: 
<br>
<input type="submit" value="Calculate!">
</form>
<input id="result" type="text">megabytes


[monkey][snake] <.
 
Upvote 0 Downvote
Whoops, sorry, I didn't see the post above mine.
(don't give me too much code here, I want to do the loop and stuff myself :)
Click to expand...
You can reference my code. My code isn't totally efficient, so see what you can do to make your code work for any situation of radio buttons.

[monkey][snake] <.
 
Upvote 0 Downvote
Thanks a lot! I'll read through the code and try to understand it before I paste it in. I didn't know that form elements could be outside of form tags, interesting. I had been wondering how to use getElementById and now I know :)
 
Upvote 0 Downvote
Well, i now know the != operator is like <> :), would save me a lot of time trying to do it myself (id've checked for each one that wasn't blog or forum :)). But now when I hit submit the whole page refreshes so I don't get anything in the result box, despite the return false; in my onsubmit call. Any ideas why this is happening?
 
Upvote 0 Downvote
I couldn't tell you because when I use the code I posted, it doesn't refresh. I'd have to see exactly what you are doing.

[monkey][snake] <.
 
Upvote 0 Downvote
Upvote 0 Downvote
Figured it out. I had a typo in the <input id="result" type="text"> line
 
Upvote 0 Downvote
Finally figured out that this line:
Code: 
  else if (buttonArray[a].checked && buttonArray[a].name == "blog" || buttonArray[a].name == "forum") {
needs to be:
Code: 
  else if (buttonArray[a].checked && buttonArray[a].name == "blog" || buttonArray[a].checked &&buttonArray[a].name == "forum") {
It was adding up all the values forum section, checked or not, and giving me a weird number :)

====================
Troy Deck -
The Free Website Project
Join today at: FreeSite.iBlogger.org
 
Upvote 0 Downvote
Oh man, good catch, you can also get the same result with ()

Code: 
 else if (buttonArray[a].checked && [!]([/!]buttonArray[a].name == "blog" || buttonArray[a].name == "forum"[!])[/!]) {


[monkey][snake] <.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

MDGarcia
  • Locked
  • Question
Java script blocked due to MIME type error
Replies
2
Views
940
MDGarcia
MDGarcia
markronz
  • Locked
  • Question
Javascript to edit all script tags 1
Replies
2
Views
189
feherke
feherke
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
386
waubain
waubain
JPSeo
  • Locked
  • Question
How to pass var to the shell script
Replies
1
Views
129
JPSeo
JPSeo
jimbospain
  • Locked
  • Question
script to read in files, parse and add to another file
Replies
1
Views
148
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top