2

Tengo el siguiente codigo HTML,Necesito sumar los 4 campos que se ven ahí, monto 1, monto2, monto3 , y monto4 y que se muestre la suma en el input valor total . Si se va borrando algun valor que se elimine del valor total .

<table class="table-form-mp">
  <tr>

    <td width="33%">
      <dx:ASPxLabelID="LbMonto1" runat="server" OnInit="Page_Load" ClientInstanceName="LbMonto1" CssClass="obligatorio_lbl_css" SkinID="default_lbl" Font-Bold="True" Font-Size="11px" ForeColor="#333333">
        </dx:ASPxLabel>
        <input type="text" class="default_tb_css amt" style="width: 223px" id="Monto_1" />
    </td>
    <td width="34%">
      <dx:ASPxLabel ID="LbMonto2" runat="server" OnInit="Page_Load" ClientInstanceName="LbMonto2" CssClass="obligatorio_lbl_css" SkinID="default_lbl" Font-Bold="True" Font-Size="11px" ForeColor="#333333">
      </dx:ASPxLabel>
      <input type="text" class="default_tb_css amt" style="width: 223px" id="Monto_2" />
    </td>
    <td width="33%">
      <dx:ASPxLabel ID="LbMonto3" runat="server" OnInit="Page_Load" ClientInstanceName="LbMonto3" CssClass="obligatorio_lbl_css" SkinID="default_lbl" Font-Bold="True" Font-Size="11px" ForeColor="#333333">
      </dx:ASPxLabel>
      <input type="text" class="default_tb_css amt" style="width: 223px" id="Monto_3" />
    </td>
  </tr>
  <tr>
    <td width="33%">
      <span class="obligatorio_lbl_css">Monto Otras Vigencias</span>
      <input type="text" class="default_tb_css amt" style="width: 223px" id="Monto_4" />
    </td>
    <td width="34%">
      <span class="default_lbl_css">Valor Total</span>

      <input type="text" class="default_tb_css amt" style="width: 223px" id="MontoTotal" />
    </td>

  </tr>
</table>

4
  • 2
    que has intentado hasta ahora? Commented el 29 jul. 2019 a las 17:11
  • ¿La suma se tiene que dar al instante? Commented el 29 jul. 2019 a las 17:12
  • saludos , Si debe dar al instante Commented el 29 jul. 2019 a las 17:59
  • function sumar(c){ var subtotal = 0; campo = c.form; if(!/^\d*$/.test(c.value)) return; for (var i = 0; i < campo.length-1; i++) { if (!/^\d+$/.test(campo[i].value)) continue; subtotal += parseInt(campo[i].value); } if (input.value < 0) { document.getElementById('res').value = subtotal; } Commented el 29 jul. 2019 a las 18:00

1 respuesta 1

1

Lo que podrías hacer es asignar un evento keyup a los input que se usaran para la suma de valores. Cada que se ejecute el evento debes capturar el valor de los 4 input y sumarlos para asignarlos al quinto.

Usando jQuery Sería así:

$("input").not("#MontoTotal").keyup(function(){
  var Monto_1 = Number($("#Monto_1").val());
  var Monto_2 = Number($("#Monto_2").val());
  var Monto_3 = Number($("#Monto_3").val());
  var Monto_4 = Number($("#Monto_4").val());
  
  var suma = Monto_1 + Monto_2 + Monto_3 + Monto_4;
  
  $("#MontoTotal").val(suma);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<table class="table-form-mp">
  <tr>

    <td width="33%">
      <dx:ASPxLabelID="LbMonto1" runat="server" OnInit="Page_Load" ClientInstanceName="LbMonto1" CssClass="obligatorio_lbl_css" SkinID="default_lbl" Font-Bold="True" Font-Size="11px" ForeColor="#333333">
        </dx:ASPxLabel>
        <input type="text" class="default_tb_css amt monto" style="width: 223px" id="Monto_1" />
    </td>
    <td width="34%">
      <dx:ASPxLabel ID="LbMonto2" runat="server" OnInit="Page_Load" ClientInstanceName="LbMonto2" CssClass="obligatorio_lbl_css" SkinID="default_lbl" Font-Bold="True" Font-Size="11px" ForeColor="#333333">
      </dx:ASPxLabel>
      <input type="text" class="default_tb_css amt monto" style="width: 223px" id="Monto_2" />
    </td>
    <td width="33%">
      <dx:ASPxLabel ID="LbMonto3" runat="server" OnInit="Page_Load" ClientInstanceName="LbMonto3" CssClass="obligatorio_lbl_css" SkinID="default_lbl" Font-Bold="True" Font-Size="11px" ForeColor="#333333">
      </dx:ASPxLabel>
      <input type="text" class="default_tb_css amt monto" style="width: 223px" id="Monto_3" />
    </td>
  </tr>
  <tr>
    <td width="33%">
      <span class="obligatorio_lbl_css">Monto Otras Vigencias</span>
      <input type="text" class="default_tb_css amt monto" style="width: 223px" id="Monto_4" />
    </td>
    <td width="34%">
      <span class="default_lbl_css">Valor Total</span>

      <input type="text" class="default_tb_css amt" style="width: 223px" id="MontoTotal" />
    </td>

  </tr>
</table>

7
  • Saludos veo que funciona bien , pero la aplicacion solo tiene jquery 1.7 Commented el 29 jul. 2019 a las 18:07
  • @KristianEspitia en este caso la versión no es problema debido a que los métodos que se están utilizando también hacen parte de la que mencionas, he editado mi respuesta y he bajado la versión de jQuery para que puedas apreciarlo. Commented el 29 jul. 2019 a las 18:09
  • Tengo una duda el .monto de donde lo llama en los input Commented el 29 jul. 2019 a las 18:12
  • @KristianEspitia es una clase que les agregué: class="default_tb_css amt monto" Commented el 29 jul. 2019 a las 18:13
  • 1
    GRACIAS!!! Eres un maquina Commented el 29 jul. 2019 a las 18:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.