www.webdeveloper.com
+ Reply to Thread
Results 1 to 5 of 5
  1. 02-16-2013 08:58 PM #1
    dubmecrazy
    dubmecrazy is offline Registered User
    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>
    Reply With Quote Reply With Quote
  2. 02-17-2013 10:43 AM #2
    vwphillips
    vwphillips is offline Super Moderator
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,550
    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.uk
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
  3. 02-18-2013 03:00 AM #3
    dubmecrazy
    dubmecrazy is offline Registered User
    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?
    Reply With Quote Reply With Quote
  4. 02-18-2013 09:15 AM #4
    vwphillips
    vwphillips is offline Super Moderator
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,550
    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.uk
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
  5. 02-20-2013 03:21 AM #5
    dubmecrazy
    dubmecrazy is offline Registered User
    Join Date
    Jan 2005
    Location
    Los Angeles
    Posts
    8
    Thank you so much for providing the additional calculation!
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

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

     

Tags for this Thread

Bookmarks

Posting Permissions

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

Forum Rules

 HTML5 Development Center



Recent Articles