www.webdeveloper.com
Results 1 to 5 of 5

Thread: Simple Form Addition Calculation

  1. #1
    Join Date
    Jan 2005
    Location
    Los Angeles
    Posts
    8

    Simple Form Addition Calculation

    Ok. I give up. I can't do this one by myself. Can someone please help?

    All I want to do is have what ever fields the user inputs a number into added up and show the quantity totaled. Then in another place show the result of that quantity x 25.

    Here is the page: http://www.rosofoto.com/price.html The first two calculators work. Its the third one, "Pricing by Number of Shoot Areas" that is giving me problems.

    Here is my code with alot of it commented out because I was trying to eliminate what was causing problems. Thanks in advance for your help:

    Code:
    <script language="javascript" type="text/javascript">
    var btn = document.getElementById('calculateRooms');
    	btn.onclick = function() {
    // get the input values
    var ui1 = parseFloat('0'+document.getElementById('textfield1').value);
    var ui2 = parseFloat('0'+document.getElementById('textfield2').value);
    var ui3 = parseFloat('0'+document.getElementById('textfield3').value);
    var ui4 = parseFloat('0'+document.getElementById('textfield4').value);
    var ui5 = parseFloat('0'+document.getElementById('textfield5').value);
    var ui6 = parseFloat('0'+document.getElementById('textfield6').value);
    var ui7 = parseFloat('0'+document.getElementById('textfield7').value);
    var ui8 = parseFloat('0'+document.getElementById('textfield8').value);
    var ui9 = parseFloat('0'+document.getElementById('textfield9').value);
    var ui10 = parseFloat('0'+document.getElementById('textfield10').value);
    var ui11 = parseFloat('0'+document.getElementById('textfield11').value);
    var ui12 = parseFloat('0'+document.getElementById('textfield12').value);
    var ui13 = parseFloat('0'+document.getElementById('textfield13').value);
    var ui14 = parseFloat('0'+document.getElementById('textfield14').value);
    var ui15 = parseFloat('0'+document.getElementById('textfield15').value);
    var ui16 = parseFloat('0'+document.getElementById('textfield16').value);
    var ui17 = parseFloat('0'+document.getElementById('textfield17').value);
    var ui18 = parseFloat('0'+document.getElementById('textfield18').value);
    
    // get the elements to hold the results
    var RoomsTotal = document.getElementById('RoomsTotal');
    // create an empty array to hold error messages
    //	    var msg = [];
    // check each input value, and add an error message to the array if it's not a number
    //	    if (isNaN(textfield1)) {
    //	        msg.push('X is not a number');
    //	    }
    //	    if (isNaN(textfield2)) {
    //	        msg.push('Y is not a number');
    //	    }
    //	    if (isNaN(textfield3)) {
    //	        msg.push('Z is not a number');
    //	    }
    // if the array contains any values, display the error message(s) as a comma-separated string in the first <span> element
    //	    if (msg.length > 0) {
    //	        RoomsTotal.innerHTML = msg.join(', ');
    //	    } else {
    RoomsTotal.innerHTML = 'Total quantity of Rooms are: ' + (ui1 * 1) + (ui2 * 1) + (ui3 * 1) + (ui4 * 1) + (ui5 * 1) + (ui6 * 1) + (ui7 * 1) + (ui8 * 1) + (ui9 * 1) + (ui10 * 1) + (ui11 * 1) + (ui12 * 1) + (ui13 * 1) + (ui14 * 1) + (ui15 * 1) + (ui16 * 1) + (ui17 * 1) + (ui18 * 1) ;
    //		}
    	};
    </script>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <form name="formRooms" method="post" action="">
    <fieldset>
          <legend><font face="Georgia, Times New Roman, Times, serif"><strong> Price
          by Number of Shoot Areas:</strong></font> </legend>
          <p align="left"><font face="Georgia, Times New Roman, Times, serif">This
            might be a better option if both the home price and the square footage
            are very high.</font></p>
          <p align="left"><font face="Georgia, Times New Roman, Times, serif">Please
            type quantity of rooms/shoot areas next to the corresponding room for
            each area that you would like to have photographed and click on the Calculate
            Button.</font></p>
          <table width="600">
            <tr>
              <td width="165" align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Bedrooms:
                </font>
              <td width="46" valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield1" type="text" size="5">
                  </font></div></td>
              <td width="224" align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">&nbsp;
                </font><font face="Georgia, Times New Roman, Times, serif">Pool/Jacuzzis:
                </font>
              <td width="46" valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield10" type="text" size="5">
                  </font></div></td>
            </tr>
            <tr>
              <td height="21" align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">&nbsp;
                </font><font face="Georgia, Times New Roman, Times, serif">Bathrooms:
                </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield2" type="text" size="5">
                  </font></div></td>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">&nbsp;
                </font><font face="Georgia, Times New Roman, Times, serif">Gym/Exercise
                Rooms: </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield11" type="text" size="5">
                  </font></div></td>
            </tr>
            <tr>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Living
                Rooms: </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield3" type="text" size="5">
                  </font></div></td>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Library:</font><font face="Georgia, Times New Roman, Times, serif">&nbsp;</font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield12" type="text" size="5">
                  </font></div></td>
            </tr>
            <tr>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Dining
                Rooms: </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield4" type="text" size="5">
                  </font></div></td>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Recreation
                Rooms: </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield13" type="text" size="5">
                  </font></div></td>
            </tr>
            <tr>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Kitchens:</font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield5" type="text" size="5">
                  </font></div></td>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Patios:
                </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield14" type="text" size="5">
                  </font></div></td>
            </tr>
            <tr>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Hallways:</font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield6" type="text" size="5">
                  </font></div></td>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Den:
                </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield15" type="text" size="5">
                  </font></div></td>
            </tr>
            <tr>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Foyers:</font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield7" type="text" size="5">
                  </font></div></td>
              <td height="21" align="right" valign="top"> <font face="Georgia, Times New Roman, Times, serif">Offices:
                </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield16" type="text" size="5">
                  </font></div></td>
            </tr>
            <tr>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">&nbsp;
                </font><font face="Georgia, Times New Roman, Times, serif">Front of
                Home:</font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield8" type="text" size="5">
                  </font></div></td>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Garages:
                </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield17" type="text" size="5">
                  </font></div></td>
            </tr>
            <tr>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Yards:
                </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield9" type="text" size="5">
                  </font></div></td>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Rooftop
                areas: </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield18" type="text" size="5">
                  </font></div></td>
            </tr>
            <tr>
              <td align="right" valign="top">&nbsp;
              <td valign="top">&nbsp;</td>
              <td align="right" valign="top">&nbsp;
              <td valign="top">&nbsp;</td>
            </tr>
            <tr>
              <td colspan="3" align="right" valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">Total
                  quantity of shoot areas:</font> <font face="Georgia, Times New Roman, Times, serif">
                  <input name="RoomsTotal" type="text" id="RoomsTotal2" size="7">
                  </font></div>
              <td valign="top">&nbsp;</td>
            </tr>
            <tr>
              <td height="26" colspan="4" valign="top">
                <p align="center">
                  <input name="calculate" type="button" id="CalcRooms" value="Calculate" onmouseup="Calculate(this.form,'textfield','RoomsTotal');">
                  <input type="reset" name="Reset" value="Clear">
                  <br>
                  <span id="result3"></span> </p></tr>
          </table>
          </fieldset>
        </form>
    <script type="text/javascript">
    
    function  Calculate(frm,nme,op){
     for (var nu=0,v,z0=1;frm[nme+z0];z0++){
      v=frm[nme+z0].value.replace(/\D/g,'');
      if (v){
       nu+=v*1;
       frm[nme+z0].value;
      }
     }
     frm[op].value=nu;
    
    }
    
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jan 2005
    Location
    Los Angeles
    Posts
    8
    Hi,

    Thank you so much for the code! It works perfect! I can't believe its such a small piece of code and looks nothing like the code I have been working on.

    I have donated $15 to your link. That is truly noble of you to chose the donations to be sent to such a wonderful cause rather than to benefit yourself.

    In my original post I was seeking code to sum the quantity of all the user input fields (as you have done) then to multiply that sum by $25 and display: "Price by Number of Shoot Areas is: $[product of quantity x 25]"

    Will you provide that additional piece of code please?

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <form name="formRooms" method="post" action="">
    <fieldset>
          <legend><font face="Georgia, Times New Roman, Times, serif"><strong> Price
          by Number of Shoot Areas:</strong></font> </legend>
          <p align="left"><font face="Georgia, Times New Roman, Times, serif">This
            might be a better option if both the home price and the square footage
            are very high.</font></p>
          <p align="left"><font face="Georgia, Times New Roman, Times, serif">Please
            type quantity of rooms/shoot areas next to the corresponding room for
            each area that you would like to have photographed and click on the Calculate
            Button.</font></p>
          <table width="600">
            <tr>
              <td width="165" align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Bedrooms:
                </font>
              <td width="46" valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield1" type="text" size="5">
                  </font></div></td>
              <td width="224" align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">&nbsp;
                </font><font face="Georgia, Times New Roman, Times, serif">Pool/Jacuzzis:
                </font>
              <td width="46" valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield10" type="text" size="5">
                  </font></div></td>
            </tr>
            <tr>
              <td height="21" align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">&nbsp;
                </font><font face="Georgia, Times New Roman, Times, serif">Bathrooms:
                </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield2" type="text" size="5">
                  </font></div></td>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">&nbsp;
                </font><font face="Georgia, Times New Roman, Times, serif">Gym/Exercise
                Rooms: </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield11" type="text" size="5">
                  </font></div></td>
            </tr>
            <tr>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Living
                Rooms: </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield3" type="text" size="5">
                  </font></div></td>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Library:</font><font face="Georgia, Times New Roman, Times, serif">&nbsp;</font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield12" type="text" size="5">
                  </font></div></td>
            </tr>
            <tr>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Dining
                Rooms: </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield4" type="text" size="5">
                  </font></div></td>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Recreation
                Rooms: </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield13" type="text" size="5">
                  </font></div></td>
            </tr>
            <tr>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Kitchens:</font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield5" type="text" size="5">
                  </font></div></td>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Patios:
                </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield14" type="text" size="5">
                  </font></div></td>
            </tr>
            <tr>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Hallways:</font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield6" type="text" size="5">
                  </font></div></td>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Den:
                </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield15" type="text" size="5">
                  </font></div></td>
            </tr>
            <tr>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Foyers:</font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield7" type="text" size="5">
                  </font></div></td>
              <td height="21" align="right" valign="top"> <font face="Georgia, Times New Roman, Times, serif">Offices:
                </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield16" type="text" size="5">
                  </font></div></td>
            </tr>
            <tr>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">&nbsp;
                </font><font face="Georgia, Times New Roman, Times, serif">Front of
                Home:</font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield8" type="text" size="5">
                  </font></div></td>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Garages:
                </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield17" type="text" size="5">
                  </font></div></td>
            </tr>
            <tr>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Yards:
                </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield9" type="text" size="5">
                  </font></div></td>
              <td align="right" valign="top"><font face="Georgia, Times New Roman, Times, serif">Rooftop
                areas: </font>
              <td valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">
                  <input name="textfield18" type="text" size="5">
                  </font></div></td>
            </tr>
            <tr>
              <td align="right" valign="top">&nbsp;
              <td valign="top">&nbsp;</td>
              <td align="right" valign="top">&nbsp;
              <td valign="top">&nbsp;</td>
            </tr>
            <tr>
              <td colspan="3" align="right" valign="top"><div align="center"><font face="Georgia, Times New Roman, Times, serif">Total
                  quantity of shoot areas:</font> <font face="Georgia, Times New Roman, Times, serif">
                  $ <input name="RoomsTotal" type="text" id="RoomsTotal2" size="7">
                  </font></div>
              <td valign="top">&nbsp;</td>
            </tr>
            <tr>
              <td height="26" colspan="4" valign="top">
                <p align="center">
                  <input name="calculate" type="button" id="CalcRooms" value="Calculate" onmouseup="Calculate(this.form,'textfield','RoomsTotal',25);">
                  <input type="reset" name="Reset" value="Clear">
                  <br>
                  <span id="result3"></span> </p></tr>
          </table>
          </fieldset>
        </form>
    <script type="text/javascript">
    
    function  Calculate(frm,nme,op,by){
     by=typeof(by)=='number'?by:1;
     for (var nu=0,v,z0=1;frm[nme+z0];z0++){
      v=frm[nme+z0].value.replace(/\D/g,'')||0;
      if (v){
       nu+=v*by;
      }
       frm[nme+z0].value=v;
     }
     frm[op].value=nu;
    
    }
    
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Jan 2005
    Location
    Los Angeles
    Posts
    8
    Thank you so much for providing the additional calculation!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles