Adding Data from Text Boxes to add up to 100%

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
LVL 1
kpu8Asked:
Who is Participating?
 
a.marshCommented:
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
 
peteyhigginsCommented:
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
 
a.marshCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
kpu8Author Commented:
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
 
a.marshCommented:
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
 
kpu8Author Commented:
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
 
kpu8Author Commented:
I will know exactly what the textboxes
are called, each time so thus - they won't change each time
0
 
kpu8Author Commented:
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
 
a.marshCommented:
My pleasure. :o)

Thanks for the A!

Ant
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.