Solved

Adding Data from Text Boxes to add up to 100%

Posted on 2001-08-30
9
126 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 15

Expert Comment

by:a.marsh
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 1

Author Comment

by:kpu8
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
My pleasure. :o)

Thanks for the A!

Ant
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now