How can I compress the Javascript in my code?

Question

I need to compress my script from 5 functions down to 1 and have it still work and at the same time I need to add another var to output the final totals to the labor box. example: Right now my script will multiply the pay rate for row 1 by the hours of row 1 and populate that total in the subtotal of row 1 and the same for row 2 on down to row 5. Now I also need to populate the total of all the hours in a box called totalhours. Can I do this without making my script too complicated?

function rate1(){
var payrate1 = document.getElementById( 'payrate1' ).value;
var hours1 = document.getElementById( 'hours1' ).value;
var subtotal1 = ( payrate1 * 1 ) * ( hours1 * 1 );

document.getElementById( 'payrate1' ).value = payrate1; 
document.getElementById( 'hours1' ).value = hours1;
document.getElementById( 'subtotal1' ).value = subtotal1;

}
function rate2(){
var payrate2 = document.getElementById( 'payrate2' ).value;
var hours2 = document.getElementById( 'hours2' ).value;
var subtotal2 = ( payrate2 * 1 ) * ( hours2 * 1 );

document.getElementById( 'payrate2' ).value = payrate2; 
document.getElementById( 'hours2' ).value = hours2;
document.getElementById( 'subtotal2' ).value = subtotal2;

}
function rate3(){
var payrate3 = document.getElementById( 'payrate3' ).value;
var hours3 = document.getElementById( 'hours3' ).value;
var subtotal3 = ( payrate3 * 1 ) * ( hours3 * 1 );

document.getElementById( 'payrate3' ).value = payrate3; 
document.getElementById( 'hours3' ).value = hours3;
document.getElementById( 'subtotal3' ).value = subtotal3;

}
function rate4(){
var payrate4 = document.getElementById( 'payrate4' ).value;
var hours4 = document.getElementById( 'hours4' ).value;
var subtotal4 = ( payrate4 * 1 ) * ( hours4 * 1 );

document.getElementById( 'payrate4' ).value = payrate4; 
document.getElementById( 'hours4' ).value = hours4;
document.getElementById( 'subtotal4' ).value = subtotal4;

}
function rate5(){
var payrate5 = document.getElementById( 'payrate5' ).value;
var hours5 = document.getElementById( 'hours5' ).value;
var subtotal5 = ( payrate5 * 1 ) * ( hours5 * 1 );

document.getElementById( 'payrate5' ).value = payrate5; 
document.getElementById( 'hours5' ).value = hours5;
document.getElementById( 'subtotal5' ).value = subtotal5;

}

Here is the html:

    <!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">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>

<body>
<table style="width: 590px">
<td class="auto-style7" style="width: 110px">Date</td>
<td class="auto-style7" style="width: 165px">Technician</td>
<td class="auto-style7" style="width: 80px">Cost Code</td>
<td class="auto-style7" style="width: 70px">Rate</td>
<td class="auto-style7" style="width: 80px">Hours</td>
<td class="auto-style6" style="width: 80px">Sub Total</td>
</table>
</fieldset>

<table>
<td><input type="text"  name="work_date1"       style="width: 100px"    id="wkdate1" ></td> 
<td><input type="text"  name="tech_name1"       style="width: 165px"    id="tech1" ></td>
<td><select type="text" name="cost_code1"       style="width: 80px"     id="code1">
<option value=""></option>
<option value="200">200</option>
<option value="205">205</option>
</select></td>
<td><input type="text"  name="pay_rate1"        style="width: 70px"     id="payrate1" onKeyup="rate1()"></td>
<td><input type="text"  name="total_hours1"     style="width: 80px"     id="hours1" onkeyup="rate1()"></td>
<td><input type="text"  name="hours_subtotal1"  style="width: 80px"     id="subtotal1" onPropertychange="getlabor()"></td>
</table>

<table>
<td><input type="text"  name="work_date2"       style="width: 100px"    id="wkdate1" ></td>
<td><input type="text"  name="tech_name2"       style="width: 165px"    id="tech1" ></td>
<td><select type="text" name="cost_code2"       style="width: 80px"     id="code1" >
<option value=""></option>
<option value="200">200</option>
<option value="205">205</option>
</select></td>
<td><input type="text"  name="rate_2"           style="width: 70px"     id="payrate2" onKeyup="rate2()"></td>
<td><input type="text"  name="total_hours2"     style="width: 80px"     id="hours2" onkeyup="rate2()" ></td>
<td><input type="text"  name="hours_subtotal2"  style="width: 80px"     id="subtotal2" onPropertychange="getlabor()"></td>
</table>

<table>
<td><input type="text"  name="work_date3"       style="width: 100px"    id="wkdate3" ></td>
<td><input type="text"  name="tech_name3"       style="width: 165px"    id="tech3" ></td>
<td><select type="text" name="cost_code3"       style="width: 80px"     id="code3" >
<option value=""></option>
<option value="200">200</option>
<option value="205">205</option>
</select></td>
<td><input type="text"  name="pay_rate3"        style="width: 70px"     id="payrate3" onKeyup="rate3()"></td>
<td><input type="text"  name="total_hours3"     style="width: 80px"     id="hours3" onkeyup="rate3()"></td>
<td><input type="text"  name="hours_subtotal3"  style="width: 79px"     id="subtotal3" onPropertychange="getlabor()"></td>
</table>

<table>
<td><input type="text"  name="work_date4"       style="width: 100px"    id="wkdate4" ></td>
<td><input type="text"  name="tech_name4"       style="width: 165px"    id="tech4" ></td>
<td><select type="text" name="cost_code4"       style="width: 80px"     id="code4" >
<option value=""></option>
<option value="200">200</option>
<option value="205">205</option>
</select></td>
<td><input type="text"  name="pay_rate4"        style="width: 70px"     id="payrate4" onKeyup="rate4()"></td>
<td><input type="text"  name="total_hours4"     style="width: 80px"     id="hours4" onKeyup="rate4()"></td>
<td><input type="text"  name="hours_subtotal4"  style="width: 80px"     id="subtotal4" onPropertychange="getlabor()"></td>
</table>

<table>
<td><input type="text"  name="work_date5"       style="width: 100px"        id="wkdate5"></td>
<td><input type="text"  name="tech_name5"       style="width: 165px"        id="tech5"></td>
<td><select type="text" name="cost_code5"       style="width: 80px"         id="code5">
<option value=""></option>
<option value="200">200</option>
<option value="205">205</option>
</select></td>
<td><input type="text"  name="pay_rate5"        style="width: 70px"         id="payrate5"onKeyup="rate5()"></td>
<td><input type="text"  name="total_hours5"     style="width: 80px"         id="hours5" onkeyup="rate5()"></td>
<td><input type="text"  name="hours_subtotal5"  style="width: 80px"         id="subtotal5" onPropertychange="getlabor()"></td>
</table>

<table>
<td class="auto-style13" style="width: 425">ONE HOUR MINIMUM</td>
<td style="width: 80px" >Total Hours</td>
<td style="width: 70px">
<input type="text" name="total_hours" style="width: 80px" id="totalhours" ></td>
</table>

<table>
<td style="width: 423px; height: 22px;" class="auto-style7">
</td>
<td style="width: 80px; height: 22px;" class="auto-style6">Material</td>
<td style="height: 22px">
<input type="text" name="material_total" style="width: 80px" id="materialtotal" onpropertychange="" ></td>
</table>

<table>
<td style="width: 423px; height: 22px;"></td>
<td style="width: 80px; height: 22px;" class="auto-style6">Labor</td>
<td style="height: 22px">
<input type="text" name="labor_cost" id="labortotal" style="width: 80px"></td>
</table>

<table>
<td style="width: 423px; height: 22px;" class="auto-style7"><input type="submit" action="#" value="Get Signature">&nbsp; <input type="reset" action="reset" value="Reset Form"></td>
<td style="width: 80px; height: 22px;">Grand Total</td>
<td style="height: 22px"><input type="text" name="grand_total" id="total" style="width: 80px"></td>
</table>

</body>

</html>

What's the html you're using with this? On what basis do you call `rate5()` as opposed to `rate1()`? — David Thomas, May 27 '13 at 21:26

Filippos Karapetis · Answer 1 · 2013-05-30T02:02:30.277

7

How about this:

function rate(rateNumber){
    var payrate = document.getElementById( 'payrate' + rateNumber ).value;
    var hours = document.getElementById( 'hours' + rateNumber ).value;

    document.getElementById( 'subtotal'  + rateNumber ).value = payrate * hours;
}

Edit: As mentioned, you don't really need to set the values of the "payrate" and "hours" elements again, since they haven't been changed

Edit2: As mentioned, you don't need to multiply payrate and hours by 1. Simplified the function above

edited May 30 '13 at 02:02

answered May 27 '13 at 21:23

Filippos Karapetis

4,367
21
39

Where's `rateNumber` coming from? – David Thomas May 27 '13 at 21:25
@DavidThomas it's a parameter of the function – Benjamin Gruenbaum May 27 '13 at 21:26
Instead of having rate1(), rate2(),... rate5(), the OP can use rate(1), rate(2), ... rate(5) – Filippos Karapetis May 27 '13 at 21:26
Yes, I worked that part out: but what is being passed into the function, from where? And yes, I realise its a number, but where is the number coming from? – David Thomas May 27 '13 at 21:27
Yes as it would make it a lot cleaner and more compressed. rate(3) is better than have to repeat the code. Now if the OP doesn't assign it and it has it in the HTML I'm sure you can do the same thing just with a for loop conditional. No? – EasyBB May 27 '13 at 21:27
for(var i = 1 ; i < 6 ; i++){rate(i)} – georgealton May 27 '13 at 21:28
@DavidThomas: The OP didn't specify that. With the code given, this is the best thing that can be done to reduce code duplication. I assume that since the OP is already using rate1(),...rate5(), he can just put in the aforementioned simple function calls. And yeah, arrays would be great when calling the rate() function, as mentioned :) – Filippos Karapetis May 27 '13 at 21:28
1

About "compression"... Why `var subtotal = ( payrate * 1 ) * ( hours * 1 );` instead of `var subtotal = payrate * hours;`? – Maroshii May 27 '13 at 21:37
I tried this on my local machine and it doesn't work, it doesn't populate the subtotal field or the labor field either. It seems everybody is concentrating on making the code more simple and not noticing that I need to populate the labor field with the final total of the subtotal field. I appreciate your help guy's but my reason for wanting to keep it as simple as possible is I'm brand spanking new to JavaScript and until I get a grasp of things I need to keep my code as dumb as possible. Thanks! – Jason May 27 '13 at 23:39
How exactly did you try it? You need to provide a parameter to the function, mentioning which element will be modified, e.g. rate(1) – Filippos Karapetis May 28 '13 at 07:06
@FilipposKarapetis my bad I didn't change the rate as you show in your example. Thanks for your assistance every bit helps me learn. – Jason May 29 '13 at 02:00

isJustMe · Accepted Answer · 2013-05-29T02:12:01.393

This probably can be optimized further, but 12 am here and just got home, but a promise is a promise

Here is the working jsfiddle , it works on IE, Chrome and FF at least

Here is the Javascript, you can accomodate them accordingly with your previous file structure:

function multiplyRow(row) {

    var this_qty = row+"_value1"    
    var this_price = row+"_value2"
    var this_extend = "extend"+row; 
    document.getElementById(this_extend).value = 
     (parseInt(document.getElementById(this_qty).value) *
     parseInt(document.getElementById(this_price).value) )  || 0 ;
     summate();        

}

function rateRow(row){
  var this_payrate = "payrate"+row;
  var this_hours = "hours"+row;
  var this_subtot = "subtotal"+row;
   document.getElementById(this_subtot).value =
    (parseInt(document.getElementById(this_payrate).value) *
     parseInt(document.getElementById(this_hours).value) )  || 0 ;
    getlabor();

}

function summate() {
            var materialcost=0
            for (var i=1; i <= 5; i++) {
                var id = "extend"+i;
                var thisVal =  parseInt(document.getElementById(id).value,10) || 0;
                materialcost +=  thisVal ;
            }
            document.getElementById("materialcost").value = materialcost || 0;
            tax();
            grandTotal();
        }

function getlabor() {
            var labortotal=0
            var hourCounter=0
            for (var i=1; i <= 5; i++) {
                var id = "subtotal"+i;
                var idHours = "hours"+i;
                var thisVal =  parseInt(document.getElementById(id).value,10) || 0;
                var thisValHours =  parseInt(document.getElementById(idHours).value,10) || 0;
                labortotal +=  thisVal ;    
                hourCounter +=  thisValHours ;    

            }
            document.getElementById("labortotal").value = labortotal|| 0;
            document.getElementById("totalhours").value = hourCounter|| 0;
            grandTotal();

}

function tax(){
    var materialcost = document.getElementById( 'materialcost' ).value || 0;
    var shipping = document.getElementById( 'shipping' ).value || 0;
    var salestax = (Math.round(((materialcost / 100) * 8.1)*100)/100) || 0;
    var materialtotal = ( (materialcost * 1) + (salestax * 1) + (shipping * 1) ) || 0;

    document.getElementById( 'materialcost' ).value = materialcost; 
    document.getElementById( 'salestax' ).value = salestax;
    document.getElementById( 'shipping' ).value = shipping;
    document.getElementById( 'materialtotal' ).value = materialtotal;
    grandTotal();


}

    function grandTotal(){
        var labor = parseInt(document.getElementById("labortotal").value ,10)   || 0;
        var material = parseFloat(document.getElementById("materialtotal").value ,10)   || 0;
        document.getElementById( 'grandtotal' ).value =  (labor + material).toFixed(2);             
    }

And as per David request, here is the HTML that goes a long (I changed the function names and how are they called )

<body style="background-color: #EEEEEE">
<h1 class="auto-style12">Work Order</h1>
<p class="auto-style14">THIS FORM ONLY WORKS IN INTERNET EXPLORER AT THIS TIME!</p>

<form method="post" action="#">
<fieldset style="width: 588px" border="3">
<table style="width: 585px"><td style="width: 40px" class="auto-style7">Qty</td>
<td style="width: 100px"class="auto-style7">Manufacture</td>
<td style="width: 95px" class="auto-style7">Part Number</td>
<td style="width: 200px"class="auto-style7">Description</td>
<td style="width: 65px" class="auto-style7">Price</td>
<td style="width: 65px" class="auto-style7">Ext</td>
</table>
</fieldset>
<table>     
<td><input type="text" name="qty_1" style="width: 40px" id="1_value1" onkeyup="multiplyRow(1)">                         </td>
<td class="auto-style7"><input type="text" name="manuf_1"           style="width: 100px"            id="manuf1">                            </td>
<td><input type="text" name="part_number1"      style="width: 95px"             id="partnumber1">                       </td>
<td><input type="text" name="part_description1" style="width: 200px"            id="partdesc1">                         </td>
<td>
<input type="text" name="part_price1"       style="width: 65px"     id="1_value2" onKeyup="multiplyRow(1)"> </td>
<td>
<input type="text" name="total"             style="width: 65px"     id="extend1"  onKeyup="summate()">      </td>
</table>    

<table>
<td><input type="text" name="qty_1"             style="width: 40px"             id="2_value1" onkeyup="multiplyRow(2)">                         </td>
<td><input type="text" name="manuf_1"           style="width: 100px">                                                   </td>
<td><input type="text" name="part_number1"      style="width: 95px">                                                    </td>
<td><input type="text" name="part_description1" style="width: 200px">                                                   </td>
<td>
<input type="text" name="part_price1"       style="width: 65px"     id="2_value2" onKeyup="multiplyRow(2)"> </td>
<td>
<input type="text" name="total"             style="width: 65px"     id="extend2"  onKeyup="summate()">      </td>
</table>

<table>
<td><input type="text" name="qty_1"             style="width: 40px"             id="3_value1" onkeyup="multiplyRow(3)">                         </td>
<td><input type="text" name="manuf_1"           style="width: 100px">                                                   </td>
<td><input type="text" name="part_number1"      style="width: 95px">                                                    </td>
<td><input type="text" name="part_description1" style="width: 200px">                                                   </td>
<td>
<input type="text" name="part_price1"       style="width: 65px"     id="3_value2" onKeyup="multiplyRow(3)"> </td>
<td>
<input type="text" name="total"             style="width: 65px"     id="extend3"  onKeyup="summate()">      </td>
</table>

<table>
<td><input type="text" name="qty_1"             style="width: 40px"             id="4_value1" onkeyup="multiplyRow(4)">                         </td>
<td><input type="text" name="manuf_1"           style="width: 100px">                                                   </td>
<td><input type="text" name="part_number1"      style="width: 95px">                                                    </td>
<td><input type="text" name="part_description1" style="width: 200px">                                                   </td>
<td>
<input type="text" name="part_price1"       style="width: 65px"     id="4_value2" onKeyup="multiplyRow(4)"> </td>
<td>
<input type="text" name="total"             style="width: 65px"     id="extend4"  onKeyup="summate()">      </td>
</table>

<table>
<td><input type="text" name="qty_1"             style="width: 40px"             id="5_value1" onkeyup="multiplyRow(5)">                         </td>
<td><input type="text" name="manuf_1"           style="width: 100px">                                                   </td>
<td><input type="text" name="part_number1"      style="width: 95px">                                                    </td>
<td><input type="text" name="part_description1" style="width: 200px">                                                   </td>
<td>
<input type="text" name="part_price1"       style="width: 65px"     id="5_value2" onKeyup="multiplyRow(5)"> </td>
<td>
<input type="text" name="total"             style="width: 65px"     id="extend5"  onKeyup="summate()">      </td>
</table>

<table>
<td class="auto-style11" style="width: 410; height: 20"></td>
<td style="width: 100px; height: 20px;" class="auto-style6">Material Cost</td> <td><input type="text" name="material_cost"  style="width: 65px; height: 20px;"  id="materialcost" onpropertychange="tax()"></td>
</table>

<table>
<td class="auto-style11" style="width: 410; height: 22"></td>
<td style="width: 100px; height: 22px;" class="auto-style6">Sales Tax</td> <td style="height: 22px">
<input type="text" name="sales_tax"         style="width: 65px"     id="salestax" ></td>
</table>

<table>
<td class="auto-style11" style="width: 410; height: 22"></td>
<td style="width: 100px; height: 22px;" class="auto-style6">Shipping</td> <td style="height: 22px">
<input type="text" name="ship_cost"         style="width: 65px"     id="shipping" onkeyup="tax()"></td>
</table>

<table>
<td class="auto-style9" style="width: 250px"><strong>Description of Work Performed</strong></td>
</table>
<table style="width: 588px">
<textarea name="TextArea1" rows="2" style="width: 585px"></textarea>
</table>
<fieldset style="width: 598px">
<table style="width: 590px">
<td class="auto-style7" style="width: 110px">Date</td>
<td class="auto-style7" style="width: 165px">Technician</td>
<td class="auto-style7" style="width: 80px">Cost Code</td>
<td class="auto-style7" style="width: 70px">Rate</td>
<td class="auto-style7" style="width: 80px">Hours</td>
<td class="auto-style6" style="width: 80px">Sub Total</td>
</table>
</fieldset>

<table>
<td><input type="text"  name="work_date1"       style="width: 100px"    id="wkdate1" ></td> 
<td><input type="text"  name="tech_name1"       style="width: 165px"    id="tech1" ></td>
<td><select type="text" name="cost_code1"       style="width: 80px"     id="code1">
<option value=""></option>
<option value="200">200</option>
<option value="205">205</option>
<option value="210">210</option>
<option value="215">215</option>
<option value="220">220</option>
<option value="225">225</option>
<option value="230">230</option>
<option value="235">235</option>
<option value="240">240</option>
<option value="245">245</option>
<option value="250">250</option>
<option value="255">255</option>
<option value="260">260</option>
<option value="265">265</option>
<option value="270">270</option>
<option value="275">275</option>
<option value="280">280</option>
<option value="285">285</option>
<option value="290">290</option>
<option value="299">299</option>
<option value="400">400</option>
<option value="405">405</option>
<option value="410">410</option>
<option value="415">415</option>
<option value="420">420</option>
<option value="425">425</option>
<option value="499">499</option>
</select></td>
<td><input type="text"  name="pay_rate1"        style="width: 70px"     id="payrate1" onKeyup="rateRow(1)"></td>
<td><input type="text"  name="total_hours1"     style="width: 80px"     id="hours1" onkeyup="rateRow(1)"></td>
<td><input type="text"  name="hours_subtotal1"  style="width: 80px"     id="subtotal1" onPropertychange="getlabor()"></td>
</table>

<table>
<td><input type="text"  name="work_date2"       style="width: 100px"    id="wkdate1" ></td>
<td><input type="text"  name="tech_name2"       style="width: 165px"    id="tech1" ></td>
<td><select type="text" name="cost_code2"       style="width: 80px"     id="code1" >
<option value=""></option>
<option value="200">200</option>
<option value="205">205</option>
<option value="210">210</option>
<option value="215">215</option>
<option value="220">220</option>
<option value="225">225</option>
<option value="230">230</option>
<option value="235">235</option>
<option value="240">240</option>
<option value="245">245</option>
<option value="250">250</option>
<option value="255">255</option>
<option value="260">260</option>
<option value="265">265</option>
<option value="270">270</option>
<option value="275">275</option>
<option value="280">280</option>
<option value="285">285</option>
<option value="290">290</option>
<option value="299">299</option>
<option value="400">400</option>
<option value="405">405</option>
<option value="410">410</option>
<option value="415">415</option>
<option value="420">420</option>
<option value="425">425</option>
<option value="499">499</option>
</select></td>
<td><input type="text"  name="rate_2"           style="width: 70px"     id="payrate2" onKeyup="rateRow(2)"></td>
<td><input type="text"  name="total_hours2"     style="width: 80px"     id="hours2" onkeyup="rateRow(2)" ></td>
<td><input type="text"  name="hours_subtotal2"  style="width: 80px"     id="subtotal2" onPropertychange="getlabor()"></td>
</table>

<table>
<td><input type="text"  name="work_date3"       style="width: 100px"    id="wkdate3" ></td>
<td><input type="text"  name="tech_name3"       style="width: 165px"    id="tech3" ></td>
<td><select type="text" name="cost_code3"       style="width: 80px"     id="code3" >
<option value=""></option>
<option value="200">200</option>
<option value="205">205</option>
<option value="210">210</option>
<option value="215">215</option>
<option value="220">220</option>
<option value="225">225</option>
<option value="230">230</option>
<option value="235">235</option>
<option value="240">240</option>
<option value="245">245</option>
<option value="250">250</option>
<option value="255">255</option>
<option value="260">260</option>
<option value="265">265</option>
<option value="270">270</option>
<option value="275">275</option>
<option value="280">280</option>
<option value="285">285</option>
<option value="290">290</option>
<option value="299">299</option>
<option value="400">400</option>
<option value="405">405</option>
<option value="410">410</option>
<option value="415">415</option>
<option value="420">420</option>
<option value="425">425</option>
<option value="499">499</option>
</select></td>
<td><input type="text"  name="pay_rate3"        style="width: 70px"     id="payrate3" onKeyup="rateRow(3)"></td>
<td><input type="text"  name="total_hours3"     style="width: 80px"     id="hours3" onkeyup="rateRow(3)"></td>
<td><input type="text"  name="hours_subtotal3"  style="width: 79px"     id="subtotal3" onPropertychange="getlabor()"></td>
</table>

<table>
<td><input type="text"  name="work_date4"       style="width: 100px"    id="wkdate4" ></td>
<td><input type="text"  name="tech_name4"       style="width: 165px"    id="tech4" ></td>
<td><select type="text" name="cost_code4"       style="width: 80px"     id="code4" >
<option value=""></option>
<option value="200">200</option>
<option value="205">205</option>
<option value="210">210</option>
<option value="215">215</option>
<option value="220">220</option>
<option value="225">225</option>
<option value="230">230</option>
<option value="235">235</option>
<option value="240">240</option>
<option value="245">245</option>
<option value="250">250</option>
<option value="255">255</option>
<option value="260">260</option>
<option value="265">265</option>
<option value="270">270</option>
<option value="275">275</option>
<option value="280">280</option>
<option value="285">285</option>
<option value="290">290</option>
<option value="299">299</option>
<option value="400">400</option>
<option value="405">405</option>
<option value="410">410</option>
<option value="415">415</option>
<option value="420">420</option>
<option value="425">425</option>
<option value="499">499</option>
</select></td>
<td><input type="text"  name="pay_rate4"        style="width: 70px"     id="payrate4" onKeyup="rateRow(4)"></td>
<td><input type="text"  name="total_hours4"     style="width: 80px"     id="hours4" onKeyup="rateRow(4)"></td>
<td><input type="text"  name="hours_subtotal4"  style="width: 80px"     id="subtotal4" onPropertychange="getlabor()"></td>
</table>

<table>
<td><input type="text"  name="work_date5"       style="width: 100px"        id="wkdate5"></td>
<td><input type="text"  name="tech_name5"       style="width: 165px"        id="tech5"></td>
<td><select type="text" name="cost_code5"       style="width: 80px"         id="code5">
<option value=""></option>
<option value="200">200</option>
<option value="205">205</option>
<option value="210">210</option>
<option value="215">215</option>
<option value="220">220</option>
<option value="225">225</option>
<option value="230">230</option>
<option value="235">235</option>
<option value="240">240</option>
<option value="245">245</option>
<option value="250">250</option>
<option value="255">255</option>
<option value="260">260</option>
<option value="265">265</option>
<option value="270">270</option>
<option value="275">275</option>
<option value="280">280</option>
<option value="285">285</option>
<option value="290">290</option>
<option value="299">299</option>
<option value="400">400</option>
<option value="405">405</option>
<option value="410">410</option>
<option value="415">415</option>
<option value="420">420</option>
<option value="425">425</option>
<option value="499">499</option>
</select></td>
<td><input type="text"  name="pay_rate5"        style="width: 70px"         id="payrate5"onKeyup="rateRow(5)"></td>
<td><input type="text"  name="total_hours5"     style="width: 80px"         id="hours5" onkeyup="rateRow(5)"></td>
<td><input type="text"  name="hours_subtotal5"  style="width: 80px"         id="subtotal5" onPropertychange="getlabor()"></td>
</table>

<table>
<td class="auto-style13" style="width: 425">ONE HOUR MINIMUM</td>
<td style="width: 80px" >Total Hours</td>
<td style="width: 70px">
<input type="text" name="total_hours" style="width: 80px" id="totalhours" ></td>
</table>

<table>
<td style="width: 423px; height: 22px;" class="auto-style7">
</td>
<td style="width: 80px; height: 22px;" class="auto-style6">Material</td>
<td style="height: 22px">
<input type="text" name="material_total" style="width: 80px" id="materialtotal" onPropertychange="" ></td>
</table>

<table>
<td style="width: 423px; height: 22px;"></td>
<td style="width: 80px; height: 22px;" class="auto-style6">Labor</td>
<td style="height: 22px">
<input type="text" name="labor_cost" style="width: 80px" id="labortotal" onPropertychange=""></td>
</table>

<table>
<td style="width: 423px; height: 22px;" class="auto-style7"><input type="submit" action="#" value="Get Signature">&nbsp; <input type="reset" action="reset" value="Reset Form"></td>
<td style="width: 80px; height: 22px;">Grand Total</td>
<td style="height: 22px"><input type="text" name="grand_total" id="grandtotal" style="width: 80px"></td>
</table>
</form> 
</center>

</body>

Explanation

parseInt() gets the number from a string or a field, most likely not neccesary in this case but this will parse the numbers if for example you typed $50, it would extract 50 instead of throwing an error.

document.getElementById("totalhours").value = hourCounter|| 0;

What we do when use || 0 is that we are telling Javascript to return a number 0 if there is no a valid value , since we executed operations with empty fields (because there is a point where we have not fill the data yet ) it would return an error because it would try to add a number to an undefined value, so we convert the undefined value to a number 0 so we are able to execute a valid operation.

Unfortunately, the OP did not specify how he's calling the rateN() functions :( If all the rate calculation functions are called at the same time, then this code makes sense as well - however, we need the actual use case from the OP — Filippos Karapetis, May 27 '13 at 21:32
you can view the form this applies to at http://jemtechnv.com/beta/finish_ticket.php — Jason, May 27 '13 at 21:40
Please post your html in your question; that way the question remains useful for future visitors. — David Thomas, May 27 '13 at 21:44
@DavidThomas I'm working a jsfiddle which I will post later on today, good idea, thanks for the suggestion. — isJustMe, May 27 '13 at 21:48
maybe I'm doing something wrong but I can't get either of the two examples to work, nothing is populated in either the subtotal box or the labor box. — Jason, May 27 '13 at 23:46
@isJustMe Awesome that works great but the only problem I see is adding shipping cost doesn't total into the grand total. — Jason, May 29 '13 at 00:43
@isJustMe can you briefly explain this section to me var thisVal = parseInt(document.getElementById(id).value,10) || 0; — Jason, May 29 '13 at 01:55
@JasonMcAdams hello Jason, I fixed that little issue, it should autosum when you modify the shipping now, I updated both the answer and the jsfiddle, I also added the explanation. — isJustMe, May 29 '13 at 02:14
@isJustMe Fantastic you're a life saver! This helps me a great deal, seeing a working example teaches me far more than watching tutorials or reading books does. I've watched countless tutorials and read many books and learned more from this example than all of the others put together. Thank you very much, you have no idea how much grief you have relieved me of. — Jason, May 29 '13 at 02:24
@isJustMe I'd move this to chat but don't have enough reputation, so this fix now brings a new question if you don't mind? How can I add a static $ sign to each of my input fields that have a money value? I tried to add it in the value of the tag but it puts a NaN value in the box? or should I start a new topic? — Jason, May 29 '13 at 02:33
@JasonMcAdams I upvoted one of your other questions so you should have enough rep now just give it some time to update, please check this post http://stackoverflow.com/questions/2913236/html-text-input-field-with-currency-symbol it should help you, I need to go out for the day, if you are not able to do it we'll look at it tomorrow. — isJustMe, May 29 '13 at 02:38
@isJustMe Thanks I tried the examples in the link you gave but none suit my need, I thought the css method would work but after testing it out it doesn't. — Jason, May 29 '13 at 06:40

How can I compress the Javascript in my code?

2 Answers2