Easy Form Help

@KDLAApr 18.2005

Hi –

I’m in a bit of a rush, and am too incompetant to come up with this quickly. Could someone please provide the coding that would total up three input values into a total text field while the user is filling out the form? This needs to work in all browsers.

<label for=”childrenparticipating”>Children</label>
<input type=”text” name=”childrenparticipating” id=”childrenparticipating”>

<label for=”teensparticipating”>Teens</label>
<input type=”text” name=”teensparticipating” id=”teensparticipating”>

<label for=”adultsparticipating”>Adults</label>
<input type=”text” name=”adultsparticipating” id=”adultsparticipating”>

<label for=”totalparticipating”>Total Number of Participants</label>
<input type=”text” name=”totalparticipating” id=”totalparticipating”>

Thanks!

By the way, it has been a while since I visited and things have changed… is it me, or is it quite confusing and disjointed looking? (800×600 screen res.)

to post a comment

JavaScript

6 Comments(s) _↴

@CharlesApr 18.2005 — #JavaScript is itself will not work in all browsers, for that you'll need a server side method. BUt:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;meta name="Content-Script-Type" content="text/javascript"&gt;
 &lt;meta name="Content-Style-Type" content="text/css"&gt;
 &lt;title&gt;Example&lt;/title&gt;
 
 &lt;script type="text/javascript"&gt;
 &lt;!--
 onload = function () {
 for (var i = 0; i &lt;= 3; i++) {document.forms[0].elements[i].onchange = function () {this.form.totalparticipating.value = (Number (this.form.childrenparticipating.value) || 0) + (Number (this.form.teensparticipating.value) || 0) + (Number (this.form.adultsparticipating.value) || 0)}}
 }
 // --&gt;
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 &lt;!-- 
 fieldset {padding:1ex; width:10em}
 label {display:block; margin:1em 0}
 input {display:block}
 button {display:block; margin:auto} 
 --&gt;
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form action="some-script.pl"&gt;
 &lt;fieldset&gt;
 &lt;legend&gt;Example&lt;/legend&gt;
 
 &lt;label&gt;Children&lt;input type="text" name="childrenparticipating"&gt;&lt;/label&gt;
 
 &lt;label&gt;Teens&lt;input type="text" name="teensparticipating"&gt;&lt;/label&gt;
 
 &lt;label&gt;Adults&lt;input type="text" name="adultsparticipating"&gt;&lt;/label&gt;
 
 &lt;label&gt;Total Number of Participants&lt;input type="text" name="totalparticipating"&gt;&lt;/label&gt;
 
 &lt;button type="submit"&gt;Submit&lt;/button&gt;
 &lt;/fieldset&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@Warren86Apr 18.2005 — #<HTML>

<Head>

<Script Language=JavaScript>

nParticipants = new Array();
 
  function calcTotal(isForm){
 
   nParticipants.length = 0;
   n = 0;
   for (i=0; i<3; i++)
   {
   isVal = isForm[i].value;
   if (isNaN(isVal) || isVal == "" || isVal == " "){isForm[i].value = ""}
   else 	{
   nParticipants[n++] = isForm[i].value;
   }
   }
   nTotal = 0;
   for (i=0; i<nParticipants.length; i++)
   {
   nTotal += parseInt(nParticipants[i])
   isForm.totalparticipating.value = nTotal;
   }
  }
 
  function resetTotal(isField){
 
   isField.value = "";
   calcTotal(document.forms.Form1);
  }

</Script>

</Head>

<Body>

<Form name='Form1'>

<label for="childrenparticipating">Children</label>

<input type="text" size="5" name="childrenparticipating" onkeyup="calcTotal(this.form)" onclick="resetTotal(this)"><br>

<label for="teensparticipating">Teens</label>

<input type="text" size="5" name="teensparticipating" onkeyup="calcTotal(this.form)" onclick="resetTotal(this)"><br>

<label for="adultsparticipating">Adults</label>

<input type="text" size="5" name="adultsparticipating" onkeyup="calcTotal(this.form)" onclick="resetTotal(this)"><br>

<label for="totalparticipating">Total Number of Participants</label>

<input type="text" size="5" name="totalparticipating" readonly>

</Form>

</Body>

</HTML>

@KDLAauthorApr 19.2005 — #Thanks so much for the prompt responses. However, I can't seem to get the coding of either of the posts to work. Could someone please look at my form to see what within it might be causing the problem? (FYI - I have not completed the ASP file yet.)

http://kdla.ky.gov/libsupport/children/srp05evaluation.htm

Thanks!

@Warren86Apr 19.2005 — #My code assumed those were the first three fields in the form. They are actually the 11th, 12th and 13th. Try it this way.

<HTML>

<Head>

<Script Language=JavaScript>

nParticipants = new Array();
 
  function calcTotal(isForm){
 
   nParticipants.length = 0;
   n = 0;
   for (i=11; i<14; i++)
   {
   isVal = isForm[i].value;
   if (isNaN(isVal) || isVal == "" || isVal == " "){isForm[i].value = ""}
   else 	{
   nParticipants[n++] = isForm[i].value;
   }
   }
   nTotal = 0;
   for (i=0; i<nParticipants.length; i++)
   {
   nTotal += parseInt(nParticipants[i])
   isForm.totalparticipating.value = nTotal;
   }
  }
 
  function resetTotal(isField){
 
   isField.value = "";
   calcTotal(document.forms.FrontPage_Form1);
  }

</Script>

</Head>

<Body>

<Form name='FrontPage_Form1'>

<label for="childrenparticipating">Children</label>

<input type="text" size="5" name="childrenparticipating" onkeyup="calcTotal(this.form)" onclick="resetTotal(this)"><br>

<label for="teensparticipating">Teens</label>

<input type="text" size="5" name="teensparticipating" onkeyup="calcTotal(this.form)" onclick="resetTotal(this)"><br>

<label for="adultsparticipating">Adults</label>

<input type="text" size="5" name="adultsparticipating" onkeyup="calcTotal(this.form)" onclick="resetTotal(this)"><br>

<label for="totalparticipating">Total Number of Participants</label>

<input type="text" size="5" name="totalparticipating" readonly>

</Form>

</Body>

</HTML>

@KDLAauthorApr 19.2005 — #Thanks, Warren86 -

It worked wonderfully! I appreciate your assistance. If you ever need web design advice, feel free to contact me.

@Warren86Apr 19.2005 — #You're welcome. Take care.

Also in #JavaScript _↴

Expanding script usage Enabling/Disabling <table> via JS function?[RESOLVED] Best RegExp for matching explicitly to numbers 1-99

Success!

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

Tweet This

Easy Form Help

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Easy Form Help

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

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

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴