javascript - 計算されたフォームにパーセンテージを追加する

Question

ここの誰かが助けてくれることを願っています。合計を自動計算するフォーム JavaScript が必要です。ダウンロードしたフォームスクリプトをいじっています (Paul McFedries に脱帽です)。合計は正常に機能していますが、税金 (10%) を計算し、それを小計に追加する必要があります。ここで基本的なフォームが機能しています: http://www.onsiite.com/html/onsiite_calc.html

私は JavaScript の完全な初心者であり、どこから始めればよいかわかりません。誰か助けてくれたり、道を教えてくれませんか?

score 0 · Accepted Answer

最終値を入力するときにこのようなものを使用します...それに特別なことは何もありません...単純なjavascriptを使用して値の最終更新を行うだけです

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

score 0 · Accepted Answer

あなたが言ったように、「Paul McFedries」からコードをコピーしたので、あなたのURLにアクセスして、コードに2行を埋め込むだけで、ページコードをこのコードに置き換えて、ページのコード全体を投稿します基本的にはあなたのコードですが、「swapnilsarwe」 2行のjavascriptを配置することについて教えてくださいが、ypuはJSにとって新しいので、コード全体を表示して、CalculateTotal(frm)関数の最後に何を配置するかを確認し、フォームボディの最後の行を変更するのに役立つことを願っています

TOTAL AMOUNT : TOTAL AMOUNT[消費税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>

javascript - 計算されたフォームにパーセンテージを追加する

2 に答える 2

Related

Reference