2

¡Hola! Tengo una tabla que se genera automáticamente a través de una consulta, y es del tipo:

<td>
              <div class="form-group">
              <input type="text" class="form-control" id="valor1" name="foodtubnumber[]" onChange="multiplicar();" />
              </div>
              </td>

              <td>
              <div class="form-group">
              <input type="text" class="form-control foodtubweight"  id="valor2"  name="foodtubweight[]" onChange="multiplicar();" />
              </div>
              </td>

              <td>
              <div class="form-group">
              <input type="text" class="form-control" id="resultado" name="foodkg[]" />
              </div>
              </td>

Lo que quiero es que el campo "valor1" se multiplique por el "valor2", y muestre el producto en "resultado", empleando este código javascript:

<script type="text/javascript">

function multiplicar(){
  m1 = document.getElementById("valor1").value;
  m2 = document.getElementById("valor2").value;
  r = m1*m2;
  document.getElementById("resultado").value = r;
}
</script>

Funciona bien, pero sólo trabaja con la primera fila de la tabla (es decir, que no funciona bien). Ayer me resolvieron una duda para generar bucles en la tabla, así que intenté esto:

function multiplicar(){
  m1 = document.getElementById("valor1").value;
  m2 = document.getElementById("valor2").value;
  r = m1*m2;

  for(var i = 0; i < resultado.length;i++)
  {
     resultado[i].value = r;
  }

  document.getElementById("resultado").value = r;
}

Pero evidentemente no es lo que necesito, ya que sólo consigo que me repita en la columna "resultado" el mismo valor que obtiene multiplicando el valor1 y el valor2 de la primera fila :( ¿Alguna idea? ¡Gracias! Alex.

2
  • 1
    El problema es el id valor1 y valor2, un id debe ser único, si lo repites en cada fila sólo uno, es este caso el que encuentra en la primera fila.
    – Carmen
    Commented el 2 ago. 2017 a las 15:31
  • En serio te recomiendo muchísimo usar jQuery. Commented el 2 ago. 2017 a las 15:41

3 respuestas 3

2

Con jquery podrías utilizar las funciones de manipulación dom una vez que finalice de cargar la tabla para realizar las operaciones por cada registro de la tabla

Te paso el manual para manipular el dom con jquery

https://www.w3schools.com/jquery/jquery_traversing.asp

Ejemplo

Document

<table>
<tr>
<td>
<div class="form-group">
<input type="text" class="form-control" id="valor1" name="foodtubnumber[]" onChange="multiplicar(this);" />
</div>
</td>

<td>
<div class="form-group">
<input type="text" class="form-control foodtubweight"  id="valor2"  name="foodtubweight[]" onChange="multiplicar(this);" />
</div>
</td>

<td>
<div class="form-group">
<input type="text" class="form-control" id="resultado" name="foodkg[]" />
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group">
<input type="text" class="form-control" id="valor1" name="foodtubnumber[]" onChange="multiplicar(this);" />
</div>
</td>

<td>
<div class="form-group">
<input type="text" class="form-control foodtubweight"  id="valor2"  name="foodtubweight[]" onChange="multiplicar(this);" />
</div>
</td>

<td>
<div class="form-group">
<input type="text" class="form-control" id="resultado" name="foodkg[]" />
</div>
</td>
</tr>
</table>
<script src="jquery.js"></script>
<script>
    function multiplicar(elem){         

        var inputs = $(elem).parents("tr").find("input");
        var valor1 = $(inputs[0]).val();
        var valor2 = $(inputs[1]).val();
        $(inputs[2]).val(parseInt(valor1) * parseInt(valor2));
    }
</script>

4
  • Quizás no me he explicado bien. La tabla se genera, y después le voy añadiendo a mano algunos valores. Cuando en la columna del valor1 añado un número, quiero que se multiplique con el valor2 y se muestre en "resultado". Todos ellos son campos que completo manualmente. Por otro lado, he utilizado algo de jQuery para la generación de gráficas, pero se me escapa cómo tendría que adaptar ese código. ¿Podrías ser más concreto? De todas formas le voy a echar un vistazo a la documentación.
    – Alex
    Commented el 2 ago. 2017 a las 18:14
  • Primero haz los ejercicios del link que te pase no te puede llevar mucho tiempo y es algo que vas a ocupar mucho. Pero te cambie la repuesta haber si la entiendes mejor Commented el 2 ago. 2017 a las 18:18
  • ¡Ahora lo entiendo! He hecho algunas pruebas ¡y es una solución muy elegante! Voy a revisar la documentación, porque me apaño más con jquery que con javascript. ¡Gracias!
    – Alex
    Commented el 2 ago. 2017 a las 20:02
  • Si, de hecho jquery fue creado para ahorrar lineas de código pero muchos no se familiarizan. Commented el 2 ago. 2017 a las 20:11
1

Añado una respuesta funcional, con Vainilla JS (sin librerías, ni otras historias) y código PHP para construir dinámicamente el formulario.

Fichero con el código para construir el formulario y realizar los cálculos mediante JS:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Formulario dinámico</title>
</head>
<body>
    <form method="POST" action="procesar.php" name="fm">
<?php

    $n_rows = 5;

    //Imprime rows
    for ( $i = 1; $i <= $n_rows; $i++ ) {
?>
        <div style="display: block; margin: 1% 0">

            <input type="text"
                id="row<?php echo $i; ?>_input1" 
                name="a[]" 
                onChange="multiplicar(<?php echo $i; ?> )">
            <input type="text" 
                class="form-control"  
                id="row<?php echo $i; ?>_input2"  
                name="b[]" 
                onChange="multiplicar(<?php echo $i; ?> )">
            <input type="text" 
                class="form-control" 
                id="row<?php echo $i; ?>_output" 
                name="resultado[]">
        </div>

<?php
    } //end for
?>

        <input type="button" value="Enviar" onclick="send()">
    </form>

    <script type="text/javascript">

        function $( id ) {
            console.log( "$() -> ID: " + id );

            return document.getElementById( id );
        }

        function multiplicar( row ) {
            console.log( "multiplicar()" );
            //console.log( document.readyState );

            var str_input  = "row" + row + "_input",
                str_output = "row" + row + "_output",
                temp,
                valor1, 
                valor2;

            /**
             * Opción 1 - Los inputs vacios toman un valor de 1 para 
             * los cálculos
             * 
             */
            //Assigns values
            /*temp = $( str_input + 1 ).value;
            valor1 = ( temp ) ? temp : 1;

            temp = $( str_input + 2 ).value;
            valor2 = ( temp ) ? temp : 1;


            //Sets results
            $( str_output ).value = valor1 * valor2;

            /**
             * Opción 2 - Los resultados solo se muestran cuando se 
             * rellenaron los dos campos de entrada
             * 
             */
             //Assigns values
            valor1 = $( str_input + 1 ).value;
            valor2 = $( str_input + 2 ).value;

            //Sets results
            if ( valor1 && valor2 )
                $( str_output ).value = valor1 * valor2;
        }

        function send() {
            console.log( "send()" );

            document.fm.submit();
        }
    </script>
</body>
</html>

Nota: dejo dos variaciones en el código JS para rellenar los imputs de resultados, se pueden comentar/descomentar alternativamente para probarlas.

Página PHP para procesar el formulario:

<?php

    echo "Resultados: <br><pre>";

    if ( $_POST ) {

        var_dump( $_POST );
        die();
    }
0

Recordá que sólo puede haber un elemento con una ID determinada dentro de un HTML. Tu idea del loop es correcta, pero le falta contemplar ese inconveniente. Necesitás algo como esto.

EDITADO

Modifiqué el código para que funcione sin IDs personalizadas, pero usa el QuerySelectorAll, que sólo es compatible con IE 9 ó superior (y todos los navegadores modernos).

function multiplicar(elemento) {
  // Cargamos la fila a la que pertenece el input
  var fila = elemento.parentElement.parentElement;
  
  // Cargamos todos los inputs de la fila
  var inputs = fila.querySelectorAll("input");
  
  // Calculamos el resultado
  var resultado = inputs[0].value * inputs[1].value;
  inputs[2].value = resultado;
}
<table id="mitabla">
  <tbody>
    <tr>
      <td>Fila 1</td>
      <td>
        <input onkeyup="multiplicar(this);" />
        <input onkeyup="multiplicar(this);" />
        <input />
      </td>
    </tr>
    <tr>
      <td>Fila 2</td>
      <td>
        <input onkeyup="multiplicar(this);" />
        <input onkeyup="multiplicar(this);" />
        <input />
      </td>
    </tr>
    <tr>
      <td>Fila 3</td>
      <td>
        <input onkeyup="multiplicar(this);" />
        <input onkeyup="multiplicar(this);" />
        <input />
      </td>
    </tr>
  </tbody>
</table>

2
  • Gracias Leandro! Pero esto no me serviría, ¿cierto? Quiero decir, yo parto con un listado de filas que se generan automáticamente, y no puedo controlar que se genere un ID diferente para cada una... o no sé cómo se haría.
    – Alex
    Commented el 2 ago. 2017 a las 18:11
  • Si no tenés control sobre el código que genera la tabla, no, la propuesta que te di no te sirve, y te pido disculpas. Pensé que podías modificar fácilmente el código PHP para agregar un par de variables. Ahora edito para ajustar eso.
    – Faust
    Commented el 4 ago. 2017 a las 16:53

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.