0

Estoy con un proyecto utilizando laravel y al momento de obtener los datos del controlador, en la vista utilizo un foreach para recuperar los datos enviados, pero también quisiera que cada dato enviado se almacene en un array en Javascript para poder operar con estos.

vista:

@foreach($producto as $prod)
    <tr>                          
       <td>
          <input type="text" min="1" max="100" id="precio" value="{{ $prod->precio }}" readonly="readonly">
       </td>
       <script>
           function calcular(){
               var precio = document.getElementById("precio");
               var total = precio.value;
               var array = [total]
               for ( i = 0; i < array.length; i++) {
                   var resultado = array[i];
                   console.log(resultado);   
               }
           }
      </script>
  </tr>
@endforeach 
<td>
    <button  onClick="calcular()" class="btn btn-info" id="calcular">Total</button>
</td>

Al momento de imprimir el array solo me guarda el primer dato que estaba en la lista cuando debería mostrar todos los datos que envié del controlador.

1
  • Creo que hay un par de errores importantes de concepción y es que se están generando N <input> con id="precio", lo cual es incorrecto por sintaxis de HTML, entre otras. Además, <script> está dentro del foreach, lo cual significa que la función calcular se está generando N veces también, algo innecesario y potencialmente incorrecto, puede llevar a otros errores.
    – Shaz
    Commented el 7 dic. 2018 a las 15:48

3 respuestas 3

1

Tu código como mencionaron tiene varios errores de lógica y de concepto

  1. Los id's de los elementos html deben tener un ID único, todos tus inputs de precio tienen el mismo id 'precio', puedes generar ids dinámicos o asignar una clase genérica para ellos y llamarlos por el nombre de la clase.
  2. El script donde defines tu función calcular no puede estar dentro de un ciclo, esto produce que se imprima y defina tantas veces en el código final en el browser como elementos estés recorriendo.
  3. document.getElementById retorna un sólo elemento, el primero que encuentre con el ID especificado.
  4. Corregir la lógica del cálculo

Por lo que tu código debería corregir esos tres puntos.

<script>
   function calcular(){
       var precios = document.getElementsByClassName("precio");
       var precios_array = [];
       var total = 0;
       for ( i=0; i<precios.length; i++){
           //totalizado de precios
           total+= parseFloat(precios[i].value);

           //guardar los valores en un array
           precios_array.push( parseFloat(precios[i].value) );
       }
       console.log(total);
   }
</script>

@foreach($producto as $prod)
    <tr>                          
       <td>
          <input type="text" class="precio" value="{{ $prod->precio }}" readonly="readonly">
       </td>
    </tr>
@endforeach 
<td>
    <button  onClick="calcular()" class="btn btn-info" id="calcular">Total</button>
</td>

Haz las correcciones, prueba y cuenta cómo te fue.

1
  • Gracias por la corrección fue muy precisa, me funciono a la perfección Commented el 7 dic. 2018 a las 19:46
1

el script no deberia estar dentro del foreach ya que cada vez que itere inicializará todas las variables de nuevo. Con esta funcion puedes añadir datos a un array:

<script>
    prod=[];
    var result=[];
    prod.forEach(function (item) {
         result.push(item.value);
    });
</script>
1

Si entendí bien solo quieres saber la suma de tus totales e imprimirlo, te recomiendo que lo hagas desde tu controlador, es mejor dejar todos los cálculos del lado del servidor para evitar posibles ataques y/o malfunciones por usuarios que modifican tu código JavaScript, enseguida solo mandas la variable a la ruta y la muestras y usas como desees:

En tu controlador, después de calcular la suma total:

return view('tuVista', [
    'prod'  => $prod,
    'total' => $total,
]);

En tu vista:

<td>
    <tr>Total: {{ $suma }}</tr>
</td>

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.