Dynamic order form (works but bloated) Help me improve it please

l3msip

New member
Dec 18, 2009
453
8
0
So i need an order form that automatically calculates totals as its filled in.
I am useless with JavaScript so i googled for a tut and found one that was easy to follow and covered my needs (kind of). However it was for a form with 2 products with 2 options each.

I have scaled up the script to handle my needs, but its now bloated crap. I am sure this could be condensed into a few lines of code with some kind of loop / array, but i suck at javascript.

The js:

Code:
/*money formating*/ 
  function dm(amount)
{
string = "" + amount;
dec = string.length - string.indexOf('.');
if (string.indexOf('.') == -1)
return string + '.00';
if (dec == 1)
return string + '00';
if (dec == 2)
return string + '0';
if (dec > 3)
return string.substring(0,string.length-dec+3);
return string;
}
  
  
 /*calculator*/ 
  
  function calculate()
{

   QtyLounge = 0; QtyDinningroom = 0; QtyKitchen = 0; QtyUtility = 0; QtyConservatory = 0; QtyDoublebedroom = 0; QtySinglebedroom = 0; QtyEnsuite = 0; QtyBathroom = 0; QtyPorch = 0; QtyCloakroom = 0; QtyHall = 0; QtyStairs = 0; QtyLanding = 0;
   TotLounge = 0; TotDinningroom = 0; TotKitchen = 0; TotUtility = 0; TotConservatory = 0; TotDoublebedroom = 0; TotSinglebedroom = 0; TotEnsuite = 0; TotBathroom = 0; TotPorch = 0; TotCloakroom = 0; TotHall = 0; TotStairs = 0; TotLanding = 0;
   SizeLounge = 0; SizeDinningroom = 0; SizeKitchen = 0; SizeUtility = 0; SizeConservatory = 0; SizeDoublebedroom = 0; SizeSinglebedroom = 0; SizeEnsuite = 0; SizeBathroom = 0; SizePorch = 0; SizeCloakroom = 0; SizeHall = 0; SizeStairs = 0; SizeLanding = 0;
   CleanType = 0;

   



   
   
   /*get clean type choosen*/
      if (document.ofrm.cleanType.value > "")
      { CleanType = document.ofrm.cleanType.value };
   document.ofrm.cleanType.value = eval(CleanType);
   
      SelectedPrice = CleanType
   
   /*end clean type selection*/

   /*get size values*/
   if (document.ofrm.sizeLounge.value > "")
      { SizeLounge = document.ofrm.sizeLounge.value };
   document.ofrm.sizeLounge.value = eval(SizeLounge);
   
      if (document.ofrm.sizeDinningroom.value > "")
      { SizeDinningroom = document.ofrm.sizeDinningroom.value };
   document.ofrm.sizeDinningroom.value = eval(SizeDinningroom);
   
      if (document.ofrm.sizeKitchen.value > "")
      { SizeKitchen = document.ofrm.sizeKitchen.value };
   document.ofrm.sizeKitchen.value = eval(SizeKitchen);
   
         if (document.ofrm.sizeUtility.value > "")
      { SizeUtility = document.ofrm.sizeUtility.value };
   document.ofrm.sizeUtility.value = eval(SizeUtility);
   
         if (document.ofrm.sizeConservatory.value > "")
      { SizeConservatory = document.ofrm.sizeConservatory.value };
   document.ofrm.sizeConservatory.value = eval(SizeConservatory);
  
         if (document.ofrm.sizeDoublebedroom.value > "")
      { SizeDoublebedroom = document.ofrm.sizeDoublebedroom.value };
   document.ofrm.sizeDoublebedroom.value = eval(SizeDoublebedroom);
  
       if (document.ofrm.sizeSinglebedroom.value > "")
      { SizeSinglebedroom = document.ofrm.sizeSinglebedroom.value };
   document.ofrm.sizeSinglebedroom.value = eval(SizeSinglebedroom);
   
            if (document.ofrm.sizeEnsuite.value > "")
      { SizeEnsuite = document.ofrm.sizeEnsuite.value };
   document.ofrm.sizeEnsuite.value = eval(SizeEnsuite);
   
            if (document.ofrm.sizeBathroom.value > "")
      { SizeBathroom = document.ofrm.sizeBathroom.value };
   document.ofrm.sizeBathroom.value = eval(SizeBathroom);
   
            if (document.ofrm.sizePorch.value > "")
      { SizePorch = document.ofrm.sizePorch.value };
   document.ofrm.sizePorch.value = eval(SizePorch);
   
            if (document.ofrm.sizeCloakroom.value > "")
      { SizeCloakroom = document.ofrm.sizeCloakroom.value };
   document.ofrm.sizeCloakroom.value = eval(SizeCloakroom);
   
            if (document.ofrm.sizeHall.value > "")
      { SizeHall = document.ofrm.sizeHall.value };
   document.ofrm.sizeHall.value = eval(SizeHall);
   
            if (document.ofrm.sizeStairs.value > "")
      { SizeStairs = document.ofrm.sizeStairs.value };
   document.ofrm.sizeStairs.value = eval(SizeStairs);
   
            if (document.ofrm.sizeLanding.value > "")
      { SizeLanding = document.ofrm.sizeLanding.value };
   document.ofrm.sizeLanding.value = eval(SizeLanding);
   
   /*End size values*/


   /*Get quantity values*/

 if (document.ofrm.qtyLounge.value > "")
      { QtyLounge = document.ofrm.qtyLounge.value };
   document.ofrm.qtyLounge.value = eval(QtyLounge);
   
      if (document.ofrm.qtyDinningroom.value > "")
      { QtyDinningroom = document.ofrm.qtyDinningroom.value };
   document.ofrm.qtyDinningroom.value = eval(QtyDinningroom);
   
      if (document.ofrm.qtyKitchen.value > "")
      { QtyKitchen = document.ofrm.qtyKitchen.value };
   document.ofrm.qtyKitchen.value = eval(QtyKitchen);
   
         if (document.ofrm.qtyUtility.value > "")
      { QtyUtility = document.ofrm.qtyUtility.value };
   document.ofrm.qtyUtility.value = eval(QtyUtility);
   
         if (document.ofrm.qtyConservatory.value > "")
      { QtyConservatory = document.ofrm.qtyConservatory.value };
   document.ofrm.qtyConservatory.value = eval(QtyConservatory);
  
         if (document.ofrm.qtyDoublebedroom.value > "")
      { QtyDoublebedroom = document.ofrm.qtyDoublebedroom.value };
   document.ofrm.qtyDoublebedroom.value = eval(QtyDoublebedroom);
 
            if (document.ofrm.qtySinglebedroom.value > "")
      { QtySinglebedroom = document.ofrm.qtySinglebedroom.value };
   document.ofrm.qtySinglebedroom.value = eval(QtySinglebedroom);
   
            if (document.ofrm.qtyEnsuite.value > "")
      { QtyEnsuite = document.ofrm.qtyEnsuite.value };
   document.ofrm.qtyEnsuite.value = eval(QtyEnsuite);
   
            if (document.ofrm.qtyBathroom.value > "")
      { QtyBathroom = document.ofrm.qtyBathroom.value };
   document.ofrm.qtyBathroom.value = eval(QtyBathroom);
   
            if (document.ofrm.qtyPorch.value > "")
      { QtyPorch = document.ofrm.qtyPorch.value };
   document.ofrm.qtyPorch.value = eval(QtyPorch);
   
            if (document.ofrm.qtyCloakroom.value > "")
      { QtyCloakroom = document.ofrm.qtyCloakroom.value };
   document.ofrm.qtyCloakroom.value = eval(QtyCloakroom);
   
            if (document.ofrm.qtyHall.value > "")
      { QtyHall = document.ofrm.qtyHall.value };
   document.ofrm.qtyHall.value = eval(QtyHall);
   
            if (document.ofrm.qtyStairs.value > "")
      { QtyStairs = document.ofrm.qtyStairs.value };
   document.ofrm.qtyStairs.value = eval(QtyStairs);
   
            if (document.ofrm.qtyLanding.value > "")
      { QtyLanding = document.ofrm.qtyLanding.value };
   document.ofrm.qtyLanding.value = eval(QtyLanding);

   /*End quantity values*/
   
   /*Set row totals*/

   TotLounge = QtyLounge * SelectedPrice * SizeLounge;
   document.ofrm.totalLounge.value = dm(eval(TotLounge));

   TotDinningroom = QtyDinningroom * SelectedPrice * SizeDinningroom;
   document.ofrm.totalDinningroom.value = dm(eval(TotDinningroom));

   TotKitchen = QtyKitchen * SelectedPrice * SizeKitchen;
   document.ofrm.totalKitchen.value = dm(eval(TotKitchen));
   
        TotUtility = QtyUtility * SelectedPrice * SizeUtility;
   document.ofrm.totalUtility.value = dm(eval(TotUtility));
   
      TotConservatory = QtyConservatory * SelectedPrice * SizeConservatory;
   document.ofrm.totalConservatory.value = dm(eval(TotConservatory));

      TotDoublebedroom = QtyDoublebedroom * SelectedPrice * SizeDoublebedroom;
   document.ofrm.totalDoublebedroom.value = dm(eval(TotDoublebedroom));
 
     TotSinglebedroom = QtySinglebedroom * SelectedPrice * SizeSinglebedroom;
   document.ofrm.totalSinglebedroom.value = dm(eval(TotSinglebedroom));
   
      TotEnsuite = QtyEnsuite * SelectedPrice * SizeEnsuite;
   document.ofrm.totalEnsuite.value = dm(eval(TotEnsuite));
   
      TotBathroom = QtyBathroom * SelectedPrice * SizeBathroom;
   document.ofrm.totalBathroom.value = dm(eval(TotBathroom));
   
      TotPorch = QtyPorch * SelectedPrice * SizePorch;
   document.ofrm.totalPorch.value = dm(eval(TotPorch));
   
      TotCloakroom = QtyCloakroom * SelectedPrice * SizeCloakroom;
   document.ofrm.totalCloakroom.value = dm(eval(TotCloakroom));
   
      TotHall = QtyHall * SelectedPrice * SizeHall;
   document.ofrm.totalHall.value = dm(eval(TotHall));
   
      TotStairs = QtyStairs * SelectedPrice * SizeStairs;
   document.ofrm.totalStairs.value = dm(eval(TotStairs));
   
      TotLanding = QtyLanding * SelectedPrice * SizeLanding;
   document.ofrm.totalLanding.value = dm(eval(TotLanding));

   /*End row totals*/
   
   /*Set quote total (Totamt)*/

   Totamt = 
      eval(TotLounge) +
      eval(TotDinningroom) +
      eval(TotKitchen) +
      eval(TotUtility) + 
      eval(TotConservatory) + 
      eval(TotDoublebedroom) + 
      eval(TotSinglebedroom) + 
      eval(TotEnsuite) + 
      eval(TotBathroom) + 
      eval(TotPorch) + 
      eval(TotCloakroom) + 
      eval(TotHall) + 
      eval(TotStairs) + 
      eval(TotLanding) ;
      
    /*VAT calculation*/

    TotAll = Totamt * 1.175 ; 
   document.ofrm.GrandTotal.value = dm(eval(TotAll));
   
   /*End quote tatl*/
 


Basically what it does is get the values from all the changeable feilds in the form (get size values and get quantity values part) multiplies them together for each row and put the total into a total feild for each row.

Then adds up all row totals and puts the value into a grand total field.

This is the form html for reference (yeah its in a table, so what, its a form!)

Code:
<form method="POST" action="submit.php" name="ofrm">
                    <p>Your information:</p>
                    <table border="0" cellpadding="0" width="550" id="table1">
                         <tr>
                              <td width="340" align="right">Name</td>
                              <td width="10"> </td>
                              <td width="200"><input type="text" name="Name" size="30" tabindex="1"></td>
                         </tr>
                         <tr>
                              <td width="340" align="right">Email (Your confirmation will be sent here): </td>
                              <td width="10"> </td>
                              <td width="200"><input type="text" name="Email" size="30" tabindex="1"></td>
                         </tr>
                         <tr>
                              <td width="340" align="right">Postcode:</td>
                              <td width="10"> </td>
                              <td width="200"><input type="text" name="PostCode" size="30" tabindex="1"></td>
                         </tr>
                         <tr>
                              <td width="340" align="right">Cleaning method required</td>
                              <td width="10"> </td>
                              <td width="200"><select name="cleanType" tabindex="5" onchange="calculate()">
                                   <option value="2.25" selected="selected">Preventitive</option>
                                   <option value="3.5">Corrective</option>
                                   <option value="4.5">Salvage</option>
                              </select></td>
                         </tr>
                    </table>
                    <p>And tell us what you would like:</p>
                    <table border="0" cellpadding="0" width="812" id="table2">
                         <tr>
                              <td width="250">Room Size</td>
                              <td width="250" height="31">Room Type</td>
                              <td align="center" width="100" height="31">No. of rooms</td>
                              <td align="right" height="31" width="60"> </td>
                              <td align="right" height="31" width="140"><b>Total</b></td>
                         </tr>
                         <tr>
                              <td width="250"><select name="sizeLounge" tabindex="5" onchange="calculate()">
                                        <option value="13.5" selected="selected">Small</option>
                                        <option value="18">Medium</option>
                                        <option value="22">Large</option>
                                        </select></td>
                              <td width="250">Lounge</td>
                              <td align="center" width="100"><select name="qtyLounge" tabindex="5" onchange="calculate()">
                                        <OPTION value=0 selected>0</OPTION>
                                        <OPTION
        value=1>1</OPTION>
                                        <OPTION value=2>2</OPTION>
                                        <OPTION
        value=3>3</OPTION>
                                        <OPTION value=4>4</OPTION>
                                        <OPTION
        value=5>5</OPTION>
                                        <OPTION value=6>6</OPTION>
                                        <OPTION
        value=7>7</OPTION>
                                        <OPTION value=8>8</OPTION>
                                        <OPTION
        value=9>9</OPTION>
                                        <OPTION value=10>10</OPTION>
                                   </SELECT></td>
                              <td align="right" width="60"> </td>
                              <td align="right" width="140"><input type="text" name="totalLounge" size="12" tabindex="99" onchange="calculate()"></td>
                         </tr>
                         <tr>
                              <td width="250"><select name="sizeDinningroom" tabindex="5" onchange="calculate()">
                                        <option value="11.1" selected="selected">Medium</option>
                                        <option value="17.8">Large</option>
                                        </select></td>
                              <td width="250">Dinning room</td>
                              <td align="center" width="100"><select name="qtyDinningroom" tabindex="5" onchange="calculate()">
                                        <OPTION value=0 selected>0</OPTION>
                                        <OPTION
        value=1>1</OPTION>
                                        <OPTION value=2>2</OPTION>
                                        <OPTION
        value=3>3</OPTION>
                                        <OPTION value=4>4</OPTION>
                                        <OPTION
        value=5>5</OPTION>
                                        <OPTION value=6>6</OPTION>
                                        <OPTION
        value=7>7</OPTION>
                                        <OPTION value=8>8</OPTION>
                                        <OPTION
        value=9>9</OPTION>
                                        <OPTION value=10>10</OPTION>
                              </SELECT></td>
                              <td align="right" width="60"> </td>
                              <td align="right" width="140"><input type="text" name="totalDinningroom" size="12" tabindex="99" onchange="calculate()"></td>
                         </tr>
                         <tr>
                              <td width="250"><select name="sizeKitchen" tabindex="5" onchange="calculate()">
                                        <option value="13.5" selected="selected">small</option>
                                        <option value="18">Medium</option>
                                        <option value="22">Large</option>
                                   </select></td>
                              <td width="250">Kitchen</td>
                              <td align="center" width="100"><select name="qtyKitchen" tabindex="5" onchange="calculate()">
                                        <OPTION value=0 selected>0</OPTION>
                                        <OPTION
        value=1>1</OPTION>
                                        <OPTION value=2>2</OPTION>
                                        <OPTION
        value=3>3</OPTION>
                                        <OPTION value=4>4</OPTION>
                                        <OPTION
        value=5>5</OPTION>
                                        <OPTION value=6>6</OPTION>
                                        <OPTION
        value=7>7</OPTION>
                                        <OPTION value=8>8</OPTION>
                                        <OPTION
        value=9>9</OPTION>
                                        <OPTION value=10>10</OPTION>
                              </SELECT></td>
                              <td align="right" width="60"> </td>
                              <td align="right" width="140"><input type="text" name="totalKitchen" size="12" tabindex="99" onchange="calculate()"></td>
                         </tr>
                         <tr>
                              <td><select name="sizeUtility" tabindex="5" onchange="calculate()">
                                   <option value="13.5" selected="selected">small</option>
                                   <option value="18">Medium</option>
                                   <option value="22">Large</option>
                              </select></td>
----snip------
 
There is more to the form but it would have needed a few posts to fit in, and its a pretty standard form.

Hopefully somebody who understands Javascript beyond my 'copy > paste > fiddle' level will see how this could be improved.

Thanks alot.