Add the value of an input number and the value of N number of checkboxes, javascript

Question

Add the value of an input number and the value of N number of checkboxes, javascript

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I want to add the values of a input with name monto_pagar and the value of multiple checkboxes (the generated checkbox number goes from 1 to N) and display them in input with name total_id .

My problem occurs when the number of checkbox is greater than 1, only adds the last checkbox generated. I guess the problem is in the way I get the value of the changing ID.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?php
    $precio=100000;
    $i = 1;
    $cuotas_pendientes=4; //Si el valor es a 1 me funciona correctamente, pero cuando es mayor de 1 es donde comienza el problema
?>
<form name="formulario">
     <label>Abono</label>
     <input type="number" name="monto_pagar" placeholder="Monto a abonar" onKeyUp="operacion()">
     <br>
     <?php while ($i <= $cuotas_pendientes) { 
        $id = "id_cuota".$i; ?>
        <!--EN CADA ITERACION CAMBIO EL NOMBRE DEL CHECKBOX Y DEL ID-->
        <input name="checkbox<?php echo $i; ?>" type="checkbox" onClick="operacion()" id="<?php echo $id; ?>">
        <label for="<?php echo $id; ?>"><?php echo "Cuota ".$i.": ".$precio?></label>
        <br>  
        <!--He colocado la funcion dentro del WHILE ya que el ID va cambiando en cada iteracion-->
        <!--Lo intente poner despues de la funcion y obtengo el mismo resultado no deseado-->
        <script type="text/javascript">
        function operacion() {
            caja = document.forms["formulario"].elements;
            var numero1 = Number(caja["monto_pagar"].value);

            $("#<?php echo $id; ?>").on('change', function(){
                this.value = this.checked ? <?php echo $precio; ?> : 0;
            }).change();
            var numero2  = Number(caja["checkbox<?php echo $i; ?>"].value);

            caja["total_id"].value = parseInt(numero1)+parseInt(numero2);
        }
    </script>
    <?php  $i++; } ?>

    <label>TOTAL</label>
    <input type="text" name="total_id" placeholder="0">
</form>

javascript jquery php

asked by Raul Escalona 03.03.2018 в 05:03

source

2 answers

startActivityForResult from an adapter and receive the data in the fragment concatenation of a view, json en laravel full calendar

score 0 · Answer 1

but it still does not work for me. Here I leave the code as I am following your instructions ... now I do not add any data.

It is not too much to say that I want to add the input name="amount" and the checkbox ... and then reflect the result in the input name="total_id"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?php
$precio=100000;
$i = 1;
$cuotas_pendientes=4;
?>
<form name="formulario">
<label>Abono</label>
<input id="montoTotal" type="number" name="monto_pagar" placeholder="Monto a abonar">
 <br>
  <?php while ($i <= $cuotas_pendientes) { 
    $id = "id_cuota".$i; ?>
    <input name="checkbox<?php echo $i; ?>" type="checkbox" class="checkbox" id="<?php echo $id; ?>" value="<?php echo $id; ?>">
    <label for="<?php echo $id; ?>"><?php echo "Cuota ".$i.": ".$precio?></label>
    <br>
    <?php  $i++; } ?>
    <!--Probe colocanco el script antes del formulario y tampoco funciona-->
    <script type="text/javascript">
        $(".checkbox").on('change', function(){
            var suma_checkSeleccionados = 0;
            $.each($("input.checkbox:checked"), function(key, val){
                suma_checkSeleccionados += parseInt($(val).val());
            });
            $("#montoTotal").val(suma_checkSeleccionados);
        });
    </script>
    <label>TOTAL</label>
    <input type="text" name="total_id" placeholder="0" onchange="suma_final()">
</form>

score 0 · Answer 2

It would be easier for you to do the following, the input of the total amount, you can leave it like this

<input id="montoTotal" type="number" name="monto_pagar" placeholder="Monto a abonar">

print the checkboxes as follows

<input name="checkbox<?php echo $i; ?>" type="checkbox" class="checkbox" id="<?php echo $id; ?>" value="<?php echo $id; ?>">

remove the script inside the while, and place this code outside of the while

<script type="text/javascript">
    $(".checkbox").on('change', function(){
        var suma_checkSeleccionados = 0;
        $.each($("input.checkbox:checked"), function(key, val){
            suma_checkSeleccionados += parseInt($(val).val());
        });
        $("#montoTotal").val(suma_checkSeleccionados);
    });
</script>

this is the modified version, I pass the input of the subscription

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?php
$precio=100000;
$i = 1;
$cuotas_pendientes=4;
?>
<form name="formulario">
<label>Abono</label>
<input id="abono" type="number" name="monto_pagar" placeholder="Monto a abonar">
 <br>
  <?php while ($i <= $cuotas_pendientes) { 
    $id = "id_cuota".$i; ?>
    <input name="checkbox<?php echo $i; ?>" type="checkbox" class="checkbox" id="<?php echo $id; ?>" value="<?php echo $i; ?>">
    <label for="<?php echo $id; ?>"><?php echo "Cuota ".$i.": ".$precio?></label>
    <br>
    <?php  $i++; } ?>
    <!--Probe colocanco el script antes del formulario y tampoco funciona-->
    <script type="text/javascript">
    function sumChecks() {
        var suma_checkSeleccionados = 0;
            $.each($("input.checkbox:checked"), function(key, val){
                suma_checkSeleccionados += parseInt($(val).val());
            });
        return suma_checkSeleccionados;
    }
        $(".checkbox").on('change', function(){
            $("#montoTotal").val(parseInt($("#abono").val()) + sumChecks());
        });
    $("#abono").on('change',function(){
        $("#montoTotal").val(parseInt($(this).val()) + sumChecks());
    });
    </script>
    <label>TOTAL</label>
    <input id="montoTotal" type="text" name="total_id" placeholder="0" onchange="suma_final()">
</form>