[RESOLVED] adding amounts in form fields

@KDLAMay 08.2006

HI –
I know this is an easy one — I’m under a deadline and lack just enough sleep to figure it out quickly. I have this section in my form:

[code]<div class=”text”>How many participants were registered for your program?</div> <div class=”row”> <label for=”childrenparticipatingbk” class=”form”>Birth through Kindergarten</label> <input type=”text” size=”5″ name=”Birth_through_Kindergarten” id=”childrenparticipatingbk” class=”input-box”/></div> <div class=”row”> <label for=”childrenparticipating123″ class=”form”>Entering 1st, 2nd, or 3rd grades</label> <input type=”text” size=”5″ name=”Entering_1st,_2nd,_or_3rd_grades” id=”childrenparticipating123″ class=”input-box”/></div> <div class=”row”> <label for=”childrenparticipating45″ class=”form”>Entering 4th or 5th grades</label> <input type=”text” size=”5″ name=”Entering_4th_or_5th_grades” id=”childrenparticipating45″ class=”input-box”/></div> <div class=”row”> <label for=”childrenparticipating678″ class=”form”>Entering 6th, 7th, or 8th grades</label> <input type=”text” size=”5″ name=”Entering_6th,_7th,_or_8th_grades” id=”childrenparticipating678″ class=”input-box”/></div> <div class=”row”> <label for=”teensparticipating” class=”form”>Entering 9th grade and older</label> <input type=”text” size=”5″ name=”Entering_9th_grade_and_older” id=”teensparticipating” class=”input-box”/></div> <div class=”row” style=”border-top: 1px solid black; padding-top: 5px; width: 40%;”> <label for=”totalparticipating” class=”form”>Total Participants</label> <input type=”text” size=”5″ name=”total_participating” id=”totalparticipating” class=”input-box”/></div>[/code]

I need a script which adds each box into the total section. So, each time someone types a number in the form field box, the total is increased that number.

Not too brain dead to express deep thanks,
KDLA 😮

to post a comment

JavaScript

5 Comments(s) _↴

@KDLAauthorMay 08.2006 — #OK - here's the script (originally from http://javascript.internet.com/forms/auto-sum-form-boxes.html) that I've come up with so far:

<i>
 </i>&lt;script type="text/javascript"&gt;
 &lt;!-- Begin
 function startCalc(){
 interval = setInterval("calc()",1);
 }
 function calc(){
 one = document.Birth_through_Kindergarten.value;
 two = document.Entering_1st_2nd_or_3rd_grades.value; 
 three = document.Entering_4th_or_5th_grades.value;
 four = document.Entering_6th_7th_or_8th_grades.value;
 five = document.Entering_9th_grade_and_older.value;
 document.Total_Participating.value = (one * 1) + (two * 1) + (three * 1) + (four * 1) + (five * 1) ;
 }
 function stopCalc(){
 clearInterval(interval);
 }
 //  End --&gt;
 &lt;/script&gt;

Problem is, it's not working. Is there something missing?

Document: http://kdla.ky.gov/libsupport/children/srp06evaluation.htm

KDLA

@KDLAauthorMay 08.2006 — #The problem is these stupid Front Page extensions. The form script will not run if I use this script. (If I add the form name after "document.", the script works, but then the form does not submit the results.

Can someone show me how to modify it so that the calculation either occurs in a form within a form, or dependent upon element id?

Thanks,

KDLA

@KDLAauthorMay 08.2006 — #Fixed.

@James_GatkaMay 08.2006 — #KDLA:

I gave the following to you awhile ago. The for loop uses the form field ordinal number, and assumes that the fields you posted above are at the start of the form, meaning the first field is 0.

[CODE]<html>
 <head>
 <script type="text/javascript">
 
  var nParticipants = [];
 
  function calcTotal(isForm){
 
   nParticipants.length = 0;
   var n = 0;
   for (i=0; i<5; i++)  // 0 is the first form field
   {
   var isVal = isForm[i].value;
   if (!/d$/.test(isVal)|/^0{2}/.test(isVal)){isForm[i].value = ""}
   else 	{
   if (/^0d+$/.test(isVal)){isForm[i].value = isVal.replace(/^0/,"")}
   nParticipants[n++] = isForm[i].value;
   }
   }
   var nTotal = 0;
   for (i=0; i<nParticipants.length; i++)
   {
   nTotal += parseInt(nParticipants[i])
   isForm.totalparticipating.value = nTotal;
   }
   if (nParticipants.length == 0){isForm.totalparticipating.value = ""}
  }
 
  function resetTotal(isField){
 
   isField.value = "";
   calcTotal(document.forms[0]);
  }
 
 </script>
 </head>
 <body>
 
 <form>
 <div class="text">How many participants were registered for your program?</div>
 <div class="row">
 <label for="childrenparticipatingbk" class="form">Birth through Kindergarten</label>
 <input type="text" size="5" name="Birth_through_Kindergarten" id="childrenparticipatingbk" class="input-box" onkeyup="calcTotal(this.form)" onclick="resetTotal(this)"/></div>
 <div class="row">
 <label for="childrenparticipating123" class="form">Entering 1st, 2nd, or 3rd grades</label>
 <input type="text" size="5" name="Entering_1st,_2nd,_or_3rd_grades" id="childrenparticipating123" class="input-box" onkeyup="calcTotal(this.form)" onclick="resetTotal(this)"/></div>
 <div class="row">
 <label for="childrenparticipating45" class="form">Entering 4th or 5th grades</label>
 <input type="text" size="5" name="Entering_4th_or_5th_grades" id="childrenparticipating45" class="input-box" onkeyup="calcTotal(this.form)" onclick="resetTotal(this)"/></div>
 <div class="row">
 <label for="childrenparticipating678" class="form">Entering 6th, 7th, or 8th grades</label>
 <input type="text" size="5" name="Entering_6th,_7th,_or_8th_grades" id="childrenparticipating678" class="input-box" onkeyup="calcTotal(this.form)" onclick="resetTotal(this)"/></div>
 <div class="row">
 <label for="teensparticipating" class="form">Entering 9th grade and older</label>
 <input type="text" size="5" name="Entering_9th_grade_and_older" id="teensparticipating" class="input-box" onkeyup="calcTotal(this.form)" onclick="resetTotal(this)"/></div>
 <div class="row" style="border-top: 1px solid black; padding-top: 5px; width: 40%;">
 <label for="totalparticipating" class="form">Total Participants</label>
 <input type="text" size="5"  name="total_participating" id="totalparticipating" class="input-box" onkeyup="calcTotal(this.form)" onclick="resetTotal(this)"/></div>
 </form>
 
 </body>
 </html>
 [/CODE]

@KDLAauthorMay 08.2006 — #Thanks, James.

I had forgotten about that -- I used it last time, but then had problems with the form later on, and had to delete various scripting in order to get basic functions to work.

I'll bookmark this post for later usage! Thanks!!!

Also in #JavaScript _↴

newbie need help about popup exit!!Scrolling stars not working on php pages Searching for bot

Success!

Help @KDLA spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] adding amounts in form fields

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] adding amounts in form fields

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴