-1

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

我是一个完整的 javascript 初学者，不知道从哪里开始。任何人都可以帮助或指导我吗？

4

2 回答 2

0

正如你所说，你从“Paul McFedries”复制了你的代码，所以我访问你的 url & jst 在你的代码中嵌入两行，所以只需用这段代码替换你的页面代码我发布你的页面的整个代码基本上是你的代码，但是“swapnilsarwe”告诉你关于放置两行 javascript 但 ypu 对 JS 来说是新的所以我只显示整个代码希望它会帮助 jst 查看我在CalculateTotal(frm)函数的最后一个位置以及我更改表单正文的最后一行

总金额：总金额[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>
于 2012-07-02T14:00:03.803 回答
0

当你填充最终值时使用这样的东西......它没有什么特别的......只需使用简单的javascript来进行值的最终更新

var total = round_decimals(order_total, 2);
frm.TOTAL.value = total + ((10/100)*total);
于 2012-07-02T11:54:47.627 回答