Question

希望有人可以提供帮助。我需要一个自动计算总计的表单javascript。我一直在搞乱我下载的表格脚本（帽子给Paul McFedries）。总计工作正常，但我还需要它来计算税收（10％）并将其添加到子总计中。我有基本形式在这里工作： http://www.onsiite.com/html/onsiite_calc.html

我是一个完整的javascript初学者，并且没有线索从哪里开始。任何人都可以帮助或指示我吗？

Answer 1

当你填充最终值时使用这样的东西...没有什么特别之处... jus使用简单的javascript来做最后的值更新

var total = round_decimals(order_total, 2);
frm.TOTAL.value = total + ((10/100)*total);

Answer 2

正如你所说，你从“Paul McFedries”复制了你的代码，所以我访问了你的网址＆amp; jst在你的代码中嵌入两行，所以只需用你的代码替换你的页面代码我发布你的页面的整个代码基本上就是你的代码，但是“swapnilsarwe”告诉你关于放置两行javascript但ypu是JS的新内容所以我jst显示整个代码希望它能帮助我看到CalculateTotal(frm)函数＆amp;的最后一个内容。我也改变了表单正文的最后一行

总金额：总金额[10％销售税]

希望它也会帮助你

   <!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>

<script language="JavaScript" type="text/javascript">
<!--

/* This script is Copyright (c) Paul McFedries and 
Logophilia Limited (http://www.mcfedries.com/).
Permission is granted to use this script as long as 
this Copyright notice remains in place.*/

function CalculateTotal(frm) {
    var order_total = 0

    // Run through all the form fields
    for (var i=0; i < frm.elements.length; ++i) {

        // Get the current field
        form_field = frm.elements[i]

        // Get the field's name
        form_name = form_field.name

        // Is it a "product" field?
        if (form_name.substring(0,4) == "PROD") {

            // If so, extract the price from the name
            item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))

            // Get the quantity
            item_quantity = parseInt(form_field.value)

            // Update the order total
            if (item_quantity >= 0) {
                order_total += item_quantity * item_price
            }
        }
    }

    // Display the total rounded to two decimal places
    frm.TOTAL.value = round_decimals(order_total, 2)
    var total = round_decimals(order_total, 2);

    document.getElementById('tax_amount').value =round_decimals(parseFloat(((10/100)*total)),2);
    document.getElementById('total_amount').value =round_decimals((parseFloat(total) + parseFloat(((10/100)*total))),2);

}

function round_decimals(original_number, decimals) {
    var result1 = original_number * Math.pow(10, decimals)
    var result2 = Math.round(result1)
    var result3 = result2 / Math.pow(10, decimals)
    return pad_with_zeros(result3, decimals)
}

function pad_with_zeros(rounded_value, decimal_places) {

    // Convert the number to a string
    var value_string = rounded_value.toString()

    // Locate the decimal point
    var decimal_location = value_string.indexOf(".")

    // Is there a decimal point?
    if (decimal_location == -1) {

        // If no, then all decimal places will be padded with 0s
        decimal_part_length = 0

        // If decimal_places is greater than zero, tack on a decimal point
        value_string += decimal_places > 0 ? "." : ""
    }
    else {

        // If yes, then only the extra decimal places will be padded with 0s
        decimal_part_length = value_string.length - decimal_location - 1
    }

    // Calculate the number of decimal places that need to be padded with 0s
    var pad_total = decimal_places - decimal_part_length

    if (pad_total > 0) {

        // Pad the string with 0s
        for (var counter = 1; counter <= pad_total; counter++) 
            value_string += "0"
        }
    return value_string
}

//-->
</script>

<style type="text/css">
.calculator {
    width: 730px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;
    color: #000;
}
.calc_top {
    background-image: url(www/images/calc_top.gif);
    background-repeat: no-repeat;
    height: 35px;
    width: 730px;
    padding: 0px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}
.calc_footer {
    background-image: url(www/images/calc_bot.gif);
    background-repeat: no-repeat;
    height: 35px;
    width: 730px;
}
.calc_head {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #FFF;
    margin-left: 12px;
    padding-top: 12px;
}
.calc_footer_text {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #FFF;
    margin-left: 12px;
    padding-top: 3px;
}
.calc_body {
    width: 730px;
    height: 20px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin-top: 5px;
}
.calc_body2 {
    width: 730px;
    height: 26px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    background-color: #ddf1f1;
    margin-top: 5px;
}
.calc_body_header {
    width: 730px;
    height: 20px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #3fa8a9;
    background-color: #b2dede;
    padding-top: 4px;
}.calc_totals {
    width: 730px;
    padding-bottom: 10px;
    padding-top: 10px;
}
.calc_product {
    width: 400px;
    float: left;
    margin-left: 10px;
}
.calc_units {
    float: right;
    width: 100px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
}
.calc_cost {
    float: right;
    width: 100px;
}
.calc_cost_per_unit {
    float: right;
    width: 100px;
    vertical-align: middle;
}


.clearfloat { 
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;

}

.calc_total_label {
    text-align: right;
    width: 624px;
    float: left;
}
.calc_rule {
    width: 730px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #FF9933;
    margin-top: 10px;
    margin-bottom: 10px;
}
input    {
    width:30px;
    display:block;
    border: 1px solid #999;
    height: 12px;
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
input.total    {
    width:60px;
    display:block;
    border: 1px solid #999;
    height: 12px;
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
.calc_totals_panel_green {
    background-color: #b2dede;
    height: 64px;
}
.calc_body_background {
    background-color: #ddf1f1;
    width: 730px;
}
</style>
</head>

<body>
<div class="calculator">
  <div class="calc_top">
    <div class="calc_head">recruitment project - pricing calculator</div>

  </div>
  <div class="calc_body_header">
    <div class="calc_product"><strong><em>Process</em></strong></div>
    <div class="calc_cost_per_unit"><em><strong>Cost per unit</strong></em></div>
    <div class="calc_units"><strong><em>Units</em></strong></div>
  </div>
  <div class="calc_body_background">
  <br class="clearfloat" />
  <div class="calc_body">
    <div class="calc_product"><strong>Service Charges</strong></div>
    <div class="calc_units"></div>
    <div class="calc_cost_per_unit"></div>
  </div>
  <span class="clearfloat" /></span>


  <form>  
    <div class="calc_body">
      <div class="calc_product">Advertising - drafting and posting</div>
      <div class="calc_units">$100</div>
      <div class="calc_cost_per_unit"><span class="calc_units"><INPUT TYPE=TEXT NAME="PROD_ad_100.00" SIZE=3 MAXLENGTH=3 onChange="CalculateTotal(this.form)"></span></div>
      </div>
    <span class="clearfloat" /></span>
    <div class="calc_body">
      <div class="calc_product">Resume review: Salary Package &lt; $60K</div>
      <div class="calc_units">$10</div>
      <div class="calc_cost_per_unit"><span class="calc_units"><INPUT TYPE=TEXT NAME="PROD_SPMG_10.00" SIZE=3 MAXLENGTH=3 onChange="CalculateTotal(this.form)"></span></div>
      </div>
    <span class="clearfloat" /></span>

    <div class="calc_body">
      <div class="calc_product">Resume review: Salary Package $60K - $100K</div>
      <div class="calc_units">$15</div>
      <div class="calc_cost_per_unit"><span class="calc_units"><INPUT TYPE=TEXT NAME="PROD_SPCR_15.00" SIZE=3 MAXLENGTH=3 onChange="CalculateTotal(this.form)"></span></div>
      </div>
    <span class="clearfloat" /></span>

    <div class="calc_body">
      <div class="calc_product">Resume review: Salary Package &gt; $100K Package</div>
      <div class="calc_units">$20</div>
      <div class="calc_cost_per_unit"><span class="calc_units"><INPUT TYPE=TEXT NAME="PROD_SPCR_20.00" SIZE=3 MAXLENGTH=3 onChange="CalculateTotal(this.form)"></span></div>
      </div>
    <span class="clearfloat" /></span>

    <div class="calc_body">
      <div class="calc_product">Phone Screening: Salary Package &lt; $60K</div>
      <div class="calc_units">$35</div>
      <div class="calc_cost_per_unit"><span class="calc_units"><INPUT TYPE=TEXT NAME="PROD_SWMG_35.00" SIZE=3 MAXLENGTH=3 onChange="CalculateTotal(this.form)"></span></div>
      </div>
    <span class="clearfloat" /></span>

    <div class="calc_body">
      <div class="calc_product">Phone Screening: Salary Package $60K - $100K</div>
      <div class="calc_units">$45</div>
      <div class="calc_cost_per_unit"><span class="calc_units"><INPUT TYPE=TEXT NAME="PROD_RY_45.00" SIZE=3 MAXLENGTH=3 onChange="CalculateTotal(this.form)"></span></div>
      </div>
    <span class="clearfloat" /></span>

    <div class="calc_body">
      <div class="calc_product">Phone Screening: &gt; $100K Package</div>
      <div class="calc_units">$55</div>
      <div class="calc_cost_per_unit"><span class="calc_units"><INPUT TYPE=TEXT NAME="PROD_KT_55.00" SIZE=3 MAXLENGTH=3 onChange="CalculateTotal(this.form)"></span></div>
      </div>
    <span class="clearfloat" /></span>

    <div class="calc_body">
      <div class="calc_product">Video Interviews</div>
      <div class="calc_units">$50</div>
      <div class="calc_cost_per_unit"><span class="calc_units"><INPUT TYPE=TEXT NAME="PROD_VID_50.00" SIZE=3 MAXLENGTH=3 onChange="CalculateTotal(this.form)"></span></div>
      </div>
    <span class="clearfloat" /></span>

    <div class="calc_body">
      <div class="calc_product">Coordinating Interviews</div>
      <div class="calc_units">$30</div>
      <div class="calc_cost_per_unit"><span class="calc_units"><INPUT TYPE=TEXT NAME="PROD_COORD_INT_30.00" SIZE=3 MAXLENGTH=3 onChange="CalculateTotal(this.form)"></span></div>
      </div>
    <span class="clearfloat" /></span>

    <div class="calc_body">
      <div class="calc_product">Coordinating Psychometric Testing</div>
      <div class="calc_units">$40</div>
      <div class="calc_cost_per_unit"><span class="calc_units"><INPUT TYPE=TEXT NAME="PROD_COORD_PSYCH_40.00" SIZE=3 MAXLENGTH=3 onChange="CalculateTotal(this.form)"></span></div>
      </div>
    <span class="clearfloat" /></span>

    <div class="calc_body">
      <div class="calc_product">Coordinating Pre-employment Medical</div>
      <div class="calc_units">$40</div>
      <div class="calc_cost_per_unit"><span class="calc_units"><INPUT TYPE=TEXT NAME="PROD_COORD_PREEMP_MED_40.00" SIZE=3 MAXLENGTH=3 onChange="CalculateTotal(this.form)"></span></div>
      </div>
    <span class="clearfloat" /></span>

    <div class="calc_body">
      <div class="calc_product">Coordinating Background Check</div>
      <div class="calc_units">$40</div>
      <div class="calc_cost_per_unit"><span class="calc_units"><INPUT TYPE=TEXT NAME="PROD_COORD_BACK_CHECK_40.00" SIZE=3 MAXLENGTH=3 onChange="CalculateTotal(this.form)"></span></div>
      </div>
    <span class="clearfloat" /></span>

    <div class="calc_body">
      <div class="calc_product">Reference Checks</div>
      <div class="calc_units">$50</div>
      <div class="calc_cost_per_unit"><span class="calc_units"><INPUT TYPE=TEXT NAME="PROD_REFS_CHECK_50.00" SIZE=3 MAXLENGTH=3 onChange="CalculateTotal(this.form)"></span></div>
      </div>
    <span class="clearfloat" /></span>

    <div class="calc_body">
      <div class="calc_product">Verbal Feedback (Unsuccessful)</div>
      <div class="calc_units">$10</div>
      <div class="calc_cost_per_unit"><span class="calc_units"><INPUT TYPE=TEXT NAME="PROD_VERBAL_FEEDBACK_10.00" SIZE=3 MAXLENGTH=3 onChange="CalculateTotal(this.form)"></span></div>
      </div>
    <span class="clearfloat" /></span>

    <div class="calc_body">
      <div class="calc_product">Administration</div>
      <div class="calc_units">$350</div>
      <div class="calc_cost_per_unit"><span class="calc_units"><INPUT TYPE=TEXT NAME="PROD_ADMIN_350.00" SIZE=3 MAXLENGTH=3 onChange="CalculateTotal(this.form)"></span></div>
      </div>
    <span class="clearfloat" /></span>

    <div class="calc_body">
      <div class="calc_product"><strong>External Oncharges</strong></div>
      <div class="calc_units"></div>
      <div class="calc_cost_per_unit"></div>
      </div>
    <span class="clearfloat" /></span>


    <div class="calc_body">
      <div class="calc_product">Advertising</div>
      <div class="calc_units">$100</div>
      <div class="calc_cost_per_unit"><span class="calc_adv"><INPUT TYPE=TEXT NAME="PROD_ADVERTSING_100.00" SIZE=3 MAXLENGTH=3 onChange="CalculateTotal(this.form)"></span></div>
      </div>
    <span class="clearfloat" /></span>

    <div class="calc_body">
      <div class="calc_product">Psychometric Testing</div>
      <div class="calc_units">0</div>
      <div class="calc_cost_per_unit"></div>
      </div>
    <span class="clearfloat" /></span>

    <div class="calc_body">
      <div class="calc_product">Background Checks</div>
      <div class="calc_units">0</div>
      <div class="calc_cost_per_unit"></div>
      </div>
    <span class="clearfloat" /></span>

    <div class="calc_totals_panel_green">
      <div class="calc_totals">
        <div class="calc_total_label">TOTAL (excluding GST) $</div>
        <div class="calc_cost_per_unit"><INPUT NAME=TOTAL TYPE=TEXT class="total" onFocus="this.form.elements[0].focus()" SIZE=10 /></div>
        </div>
         <span class="clearfloat" /></span>

      <div class="calc_totals">
        <div class="calc_total_label">10 % Tax</div>
        <div class="calc_cost_per_unit"><INPUT NAME="tax_amount" TYPE=TEXT class="total" id="tax_amount" SIZE=10 ></div>
        </div>
      <span class="clearfloat" /></span>

      <div class="calc_totals">
        <div class="calc_total_label">TOTAL $</div>
        <div class="calc_cost_per_unit"><INPUT NAME="total_amnt" TYPE=TEXT class="total" id="total_amount" SIZE=10 ></div>
        </div>

    <span class="clearfloat" /></span></div></form>
  </div>
<div class="calc_footer">
  <div class="calc_footer_text">Change the values in the Units column to calculate the charge rate based on expected volumes.</div></div>
</div>
</body>
</html>

添加百分比到计算表格

2 个答案: