agregar porcentaje a la forma calculada

Espero que alguien aquí pueda ayudar. Necesito un formulario javascript que calcule automáticamente los totales. Estuve jugando con un script de formulario que descargué (felicitaciones a Paul McFedries). Los totales funcionan bien, pero también lo necesito para calcular el impuesto (al 10 %) y agregarlo a un subtotal. Tengo la forma básica trabajando aquí: http://www.onsiite.com/html/onsiite_calc.html

Soy un completo principiante de javascript y no tengo ni idea de por dónde empezar. ¿Alguien puede ayudarme o mostrarme el camino?

preguntado el 02 de julio de 12 a las 12:07

2 Respuestas

use algo como esto cuando complete el valor final ... no hay nada especial en él ... solo use javascript simple para hacer la actualización final del valor

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

Respondido 02 Jul 12, 12:07

ah bien pero donde coloco exactamente eso? - Arena

simplemente reemplace la última línea de CalculateTotal función en su archivo con las 2 líneas anteriores - swapnilsarwe

Espero que el javascript esté escrito por usted ... para que pueda ubicar dónde está: swapnilsarwe

No, no fue escrito por mí. Paul McFedries lo escribió en [enlace]mcfedries.com - Arena

Reemplacé 'code'frm.TOTAL.value = round_decimals(order_total, 2)'code' - Arena

Como dijiste, copiaste tu código de "Paul McFedries", así que visité tu URL y jst incrusté dos líneas en tu código, así que simplemente reemplazá el código de tu página por este código. Publico el código completo para tu página, básicamente es tu código pero "swapnilsarwe". informarle sobre la colocación de dos líneas de javascript, pero son nuevos para JS, así que solo muestro el código completo, espero que ayude a ver lo que coloco en el último de CalculateTotal(frm) función y también cambio la última fila de su cuerpo de formulario

MONTO TOTAL : MONTO TOTAL[10% Impuesto sobre Ventas]

espero que te ayude a ti también

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

Respondido 06 Jul 12, 07:07

Muchas, muchas gracias M_A_K. pero todavía parece haber un problema. Usando tu código. Si agrego '1' en la columna de $10 dólares, la cantidad total es correcta, pero la columna CANTIDAD TOTAL [10% DE IMPUESTO SOBRE LA VENTA] muestra $110 (debería ser $11). Si agrego '1' a la columna de $20, la CANTIDAD TOTAL muestra $20 correctamente, pero la columna CANTIDAD TOTAL [10% DE IMPUESTO SOBRE LA VENTA] muestra $70 (debería ser $22). No estoy seguro de lo que está pasando allí - Arena

Creo que sus fórmulas se confunden con el 10% de impuestos, solo cambia la función CalcularTotal. Las fórmulas de la última línea funcionarán bien, cambie este round_decimals((parseFloat(total) + parseFloat(((10/total)*100))),2); into round_decimals((parseFloat(total) + parseFloat(((10/100)*total))),2); - M_A_K

¡Eres un genio! Ahora funciona perfectamente. No puedo agradecerles lo suficiente. - Arena

Grrr. Justo cuando pensaba que había terminado, me doy cuenta de que tengo que agregar una lectura del 10 % de impuestos únicamente, así como el total y el total + impuestos. Me he estado engañando pero sin suerte. Creo que tengo que agregarlo a esta línea: round_decimals((parseFloat(total) + parseFloat(((10/100)*total))),2); - pero no funciona. Gracias de antemano por cualquier ayuda brindada. - Arena

Lo siento, debería agregar que esta es la página tal como está ahora: aquí - Arena

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.