Solved

Adding Data from Text Boxes to add up to 100%

Posted on 2001-08-30
9
128 Views
Last Modified: 2008-03-17
I'm going to have a series of text boxes where the user will enter points - I want the user to be prompted if their answers do not add up to 100 - also I want the fields to only accept whole numbers - how does one do this.

What's tricky is that I'm likely to have 10 - 20 text boxes but all 10 to 20 don't have to be filled in as long as the points are equal to 100 - thus I could enter 50 in one text box and 50 in another which would give me 100
0
Comment
Question by:kpu8
  • 4
  • 4
9 Comments
 
LVL 3

Expert Comment

by:peteyhiggins
ID: 6442501
Just check the isNaN() on each before you add it

val = document.formname.textname.value
num += (val != "") ? (!isNaN(val)) ? parseInt(val) : 0 : 0

That'll check it and just add zero if it's blank or not a number.  Just go through each of your textboxes like that (easier with a loop).  Use the onBlur() of each textbox to make sure it's a whole number.

Then just check:

if (num != 100)
    alert('Error message')
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6442614
Is this what you are after?

<html>
<head>
<script language="javascript">
<!--

function checkData(formObj){
  var runningTotal = 0;

  for(var i = 1; i <= 10; i++){
    var textObj = eval("formObj.p" + i);

    if(isNaN(textObj.value)){
      alert("Numbers only please!");
      textObj.focus();
      textObj.select();
      return false;
    }
    else if(textObj.value.indexOf(".") != -1){
      alert("Whole numbers only please!");
      textObj.focus();
      textObj.select();
      return false;
    }

    if(textObj.value != ""){
      runningTotal += parseInt(textObj.value);
    }
  }

  if(runningTotal != 100){
    alert("All values must add up to 100%");
    return false;
  }

  return true;
}

//-->
</script>
</head>
<body>
<form onSubmit="return checkData(this);">
<table border="0">
<tr><td>1:</td><td><input type="text" name="p1" size="3" maxlength="3">%</td></tr>
<tr><td>2:</td><td><input type="text" name="p2" size="3" maxlength="3">%</td></tr>
<tr><td>3:</td><td><input type="text" name="p3" size="3" maxlength="3">%</td></tr>
<tr><td>4:</td><td><input type="text" name="p4" size="3" maxlength="3">%</td></tr>
<tr><td>5:</td><td><input type="text" name="p5" size="3" maxlength="3">%</td></tr>
<tr><td>6:</td><td><input type="text" name="p6" size="3" maxlength="3">%</td></tr>
<tr><td>7:</td><td><input type="text" name="p7" size="3" maxlength="3">%</td></tr>
<tr><td>8:</td><td><input type="text" name="p8" size="3" maxlength="3">%</td></tr>
<tr><td>9:</td><td><input type="text" name="p9" size="3" maxlength="3">%</td></tr>
<tr><td>10:</td><td><input type="text" name="p10" size="3" maxlength="3">%</td></tr>
<tr><td colspan="2"><input type="submit" value="check"></td></tr>
</table>
</form>
</body>
</html>


Ant
0
 
LVL 1

Author Comment

by:kpu8
ID: 6445080
a. marsh - your script is exactly what I want - but how can I make it so that it adds up only certain fields -

I modified the following like this with little success:

var r8num = form1.r8.value;
 var r20num = form1.r20.value;

 //for(var i = 1; i <= 10; i++)
     //{
   var textObj = ("formObj + r8num + r20num");

Thus I was trying only to add up the two text boxes

What's tricky is that my form is going to be processed by special survey software which names the field as r1,r2,r3,r4, etc etc - thus the loop

for(var i = 1; i <= 10; i++){
   var textObj = eval("formObj.p" + i);

which takes all the named fields of p - p1, p2, p3 etc
needs to be modified in some aspect (my attempts have been unsucessful - I'm not a javascript guru)so that it only process certain fields not all the fields - since I have other text boxes for name, firm etc that are my form
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 15

Expert Comment

by:a.marsh
ID: 6446735
mmmm....I "think" I understand what you are talking about.....do you know exactly what the textboxes are called, or might they change each time?

Ant
0
 
LVL 1

Author Comment

by:kpu8
ID: 6448372
The survey software numbers the text fields with an r then whatever number question in the survey it is: example
right now my surveys points questions are r8 and r18
thus I want to make sure that the text fields that are r8 and r18 add up to 100 points and are whole numbers -

Right now I'm in pre-lim stage so I only have 20 questions but eventually I'm likely to have 10-15 fields that I
want to add together and make sure the points are correct -if I could add up and do the eval on certain questions I would be in business - can that be done and if so how?

Thanks


 
 
0
 
LVL 1

Author Comment

by:kpu8
ID: 6448373
I will know exactly what the textboxes
are called, each time so thus - they won't change each time
0
 
LVL 15

Accepted Solution

by:
a.marsh earned 90 total points
ID: 6448590
Okay, here you go:


<html>
<head>
<script language="javascript">
<!--

var fieldArray = new Array("r2", "r3", "r5", "r9");

function checkData(formObj){
 var runningTotal = 0;

 for(var i = 0; i < fieldArray.length; i++){
   var textObj = eval("formObj." + fieldArray[i]);

   if(isNaN(textObj.value)){
     alert("Numbers only please!");
     textObj.focus();
     textObj.select();
     return false;
   }
   else if(textObj.value.indexOf(".") != -1){
     alert("Whole numbers only please!");
     textObj.focus();
     textObj.select();
     return false;
   }

   if(textObj.value != ""){
     runningTotal += parseInt(textObj.value);
   }
 }

 if(runningTotal != 100){
   alert("All values must add up to 100%");
   return false;
 }

 return true;
}

//-->
</script>
</head>
<body>
<form onSubmit="return checkData(this);">
<table border="0">
<tr><td>1:</td><td><input type="text" name="r1" size="3" maxlength="3"></td></tr>
<tr><td>2:</td><td><input type="text" name="r2" size="3" maxlength="3">%</td></tr>
<tr><td>3:</td><td><input type="text" name="r3" size="3" maxlength="3">%</td></tr>
<tr><td>4:</td><td><input type="text" name="r4" size="3" maxlength="3"></td></tr>
<tr><td>5:</td><td><input type="text" name="r5" size="3" maxlength="3">%</td></tr>
<tr><td>6:</td><td><input type="text" name="r6" size="3" maxlength="3"></td></tr>
<tr><td>7:</td><td><input type="text" name="r7" size="3" maxlength="3"></td></tr>
<tr><td>8:</td><td><input type="text" name="r8" size="3" maxlength="3"></td></tr>
<tr><td>9:</td><td><input type="text" name="r9" size="3" maxlength="3">%</td></tr>
<tr><td>10:</td><td><input type="text" name="r10" size="3" maxlength="3"></td></tr>
<tr><td colspan="2"><input type="submit" value="check"></td></tr>
</table>
</form>
</body>
</html>


Simply change the array to specify which fields you want to be checked:

var fieldArray = new Array("r2", "r3", "r5", "r9");


:o)

Ant
0
 
LVL 1

Author Comment

by:kpu8
ID: 6453164
That worked like a charm - I tried it last night (on labor day of all days) and it was excatly what I needed and never would've figured out on my own so thank you  
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6453294
My pleasure. :o)

Thanks for the A!

Ant
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
I want a tab to always be underlined when I open div then change 1 34
Html Table looping 4 25
Add or delete table rows 10 53
asp.net open new page without popup blocker 8 18
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question