8

Estoy haciendo una tabla donde obtengo unos datos desde la bdd utilizando fetch,

lo que hace la tabla es un select que escoge un tipo de usuario por así decirlo, y obtiene un valor en la misma fila (sueldo mensual imagen), que luego quiero multiplicar por la cantidad que yo ingrese.

introducir la descripción de la imagen aquí

La multiplicación la hace correctamente siempre y cuando:

  • primero escojas una de las opciones del select y luego ingreses el valor cantidad

el problema es que si en un caso, el cliente quiera cambiar la opción del select deberá ingresar nuevamente el valor a multiplicar (cantidad) para que se actualice los valores.

donde el problema crece por que mínimo se ingresan entre 5 a 20 filas.


Este es mi código con lo que estoy trabajando para obtener datos con fetch

Tabla:

<tbody>
   <tr>
      <td>
         <select id="select_opcion_{{$cant}}" onchange="OpcionChange('select_opcion_{{$cant}}', 'select_escoger_{{$cant}}')" onkeyup="Total_manobra();">
          <option value="">Seleccionar...</option>
           //aquí va un foreach con los identificador para solicitar el valor
         </select>
      </td>
      <td>
         <input type="number" class="cantidad_obra" onkeyup="Total_manobra();">
      </td>
      <td class="p-d" id="select_escoger_{{$cant}}">
         <input type="number" class="valor_obra" onkeyup="Total_manobra();">                
      </td>
      <td>
         <input type="number" class="total_obra" onkeyup="Total_manobra();">
      </td>
   </tr>
</tbody>

Imagen de como es realmente:

introducir la descripción de la imagen aquí

el código con el que obtengo el dato que solicito a la bdd :

function OpcionChange(identidad, receptor){
   var valor = document.getElementById(identidad).value;
  fetch('/consulta'+valor+'/opcion').then((response) => response.json()).then((response)=>{   
        document.getElementById(receptor).innerHTML=`<input type="number class="valor_obra" onkeyup="Total_manobra" value="${response.RMU}">`  
  })
}

lo que trate de hacer fue utilizar los event de javascript (que yo conozco y su función), pero los utilizados me daban estos problemas:

onchange="Total_manobra(); = me calcula el valor anterior, no el solicitado.

onclick="Total_manobra();" = pues funcionaba pero solo si le volvía a dar clik al select, bueno aveces en todo caso, No es lo recomendable por que el usuario no siempre es el mismo, y el cliente (el jefe) no quiere eso.

onkeyup="Total_manobra();" = simplemente no funciona.

entonces estoy solicitando ayuda para ver si existe alguna forma para poder hacer eso sin problema.


no agrego el código de la multiplicación por que creo que ese no es el problema. en caso de que sea necesario lo agregare.

6
  • Tu explicación es confusa. Es un problema muy frecuente aquí: cuando intentas resolver un problema hay un qué (el problema a resolver) y un cómo (la forma de resolver ese problema mediante un código). El qué es algo muy concreto, es necesario que quienes leemos la pregunta lo entendamos bien y para eso debes explicarlo lo más claro posible, aislandolo del cómo. Muchos usuarios aquí en sus explicaciones mezclan el qué con el cómo, ese es su dilema que se convierte en un rompe cabezas porque no aplican algo tan sencillo como separar el problema de su supuesta solución ....
    – A. Cedano
    Commented el 15 ago. 2020 a las 15:03
  • ... ¿Por qué es importante separar el qué (el problema) del cómo (la supuesta solución)? Porque el cómo puede ser erróneo, confuso, mal enfocado. Esa mezcla es lo que te lleva a veces a un callejón sin salida, porque sigues pensando que ese es el camino, ¿y si no lo es? En definitiva, cuando tengas un problema, explica primero el problema y luego explica la supuesta solución, y por qué crees que debe resolverse así. De ese modo te ayudarás a ti y a quienes pueden ayudarte. Si muchos hicieran eso encontrarían antes una solución al problema.
    – A. Cedano
    Commented el 15 ago. 2020 a las 15:07
  • @A.Cedano, Ok muchas gracias por tu sugerencia, voy a tratar de editar para que sea lo mas clara posible, aunque en realidad trate de explicar a lo que pude.
    – DAD
    Commented el 15 ago. 2020 a las 18:02
  • ¿Por qué regeneras el input completo? ¿Por qué no muestras el código de la función que estás llamando? ¿Por qué no llamas a la función directamente cuando obtienes la respuesta de la llamada AJAX? Creo que la solución es sencilla, pero completar un puzzle al que le faltan piezas es muy complicado Commented el 28 ago. 2020 a las 10:14
  • el input lo "genero" nuevamente por que estoy usando clases para los cálculos, y el código con el que genero las filas y cálculos, me marcaba error por que no encontraba esa clase y cuando quería guardar igual, la única función que no muestro es la de generar los cálculos por como dije solo es sumar filas y columnas según la clase. y el de agregar las filas pues es muy largo.
    – DAD
    Commented el 28 ago. 2020 a las 10:19

2 respuestas 2

5

Para evitar peticiones AJAX cada que se hagan cambios en los select te recomiendo usar atributos de datos (dataset) que puedes aplicar a cada option y queda solo la función Total_manobra() para escuchar y aplicar cambios.

El evento siempre será enviado a las funciones, aunque no lo especifiques. Aprovechado eso:

  • event.target es el elemento que disparó el evento
  • Con event.target.closest('tr') accedes al contenedor padre
  • Desde el padre tr.querySelector('.clase_de_elemento') puedes seleccionar los hijos por su clase
  • Cuando es un select el disparador del evento, actualizas el valor mensual
  • Solo queda realizar los cálculos necesarios

function Total_manobra() {
  // Todo parte desde TR padre
  let tr = event.target.closest('tr');
  // Si el evento se disparó por cambio en select:
  if(event.target.tagName.toLowerCase() == 'select') {
    // Solo se actualiza valor_obra
    tr.querySelector('.valor_obra').value = event.target.options[event.target.selectedIndex].dataset.sueldo || 0;
  }
  // Calcular
  let cant = parseInt(tr.querySelector('.cantidad_obra').value) || 0;
  let sueldo = parseInt(tr.querySelector('.valor_obra').value) || 0;
  tr.querySelector('.total_obra').value = cant * sueldo;
}
<table>
<thead>
  <tr>
    <th>Tipo</th>
    <th>Denominación</th>
    <th>Cant.</th>
    <th>Sueldo mensual</th>
    <th>Total anual</th>
  </tr>
</thead>
<tbody>
   <tr>
      <td>
         <select id="select_opcion_{{$cant}}" onchange="Total_manobra();">
          <option value="">Seleccionar...</option>
          <option value="1" data-sueldo="123">SV1</option>
          <option value="2" data-sueldo="456">SV2</option>
          <option value="3" data-sueldo="789">SV3</option>
         </select>
      </td>
      <td>Denominación</td>
      <td>
         <input type="number" class="cantidad_obra" onkeyup="Total_manobra();">
      </td>
      <td class="p-d" id="select_escoger_{{$cant}}">
         <input type="number" class="valor_obra" disabled>                
      </td>
      <td>
         <input type="number" class="total_obra" disabled>
      </td>
   </tr>
   <tr>
      <td>
         <select id="select_opcion_{{$cant}}" onchange="Total_manobra();">
          <option value="">Seleccionar...</option>
          <option value="1" data-sueldo="123">SV1</option>
          <option value="2" data-sueldo="456">SV2</option>
          <option value="3" data-sueldo="789">SV3</option>
         </select>
      </td>
      <td>Denominación</td>
      <td>
         <input type="number" class="cantidad_obra" onkeyup="Total_manobra();">
      </td>
      <td class="p-d" id="select_escoger_{{$cant}}">
         <input type="number" class="valor_obra" disabled>                
      </td>
      <td>
         <input type="number" class="total_obra" disabled>
      </td>
   </tr>
</tbody>
</table>

3
  • 1
    Me sirve tu respuesta, igual que la primera respuesta, las dos las puedo complementar, así que dejare que se reparta la reputación, hago esto por que aprendí algo nuevo de ambas partes, espero comprendas, Gracias!
    – DAD
    Commented el 3 sept. 2020 a las 5:24
  • 1
    No hay problema, como dijo Pablo, lo importante es que haya un aprendizaje.
    – Triby
    Commented el 3 sept. 2020 a las 5:33
  • Muchas gracias!
    – DAD
    Commented el 3 sept. 2020 a las 6:30
5
+25

Si buscas por el id receptor puedes hacer algo como

function OpcionChange(identidad, receptor){
  let valor = document.getElementById(identidad).value;
  fetch('/consulta'+valor+'/opcion')
    .then((response) => response.json())
    .then((response)=> {
        const input = document.querySelector(`#${receptor} input`)
        input.value = response.RMU;
        Total_manobra.call(input);
  });
}

Una vez se ha modificado asíncronamente el valor, puedes llamar a la función Total_manobra y tendrás el valor actualizado, en lugar del cálculo con el valor anterior.

7
  • recién hago la prueba, me mandaba un error por el nombre de Total_Manobra lo corregí, y aparentemente funciona, tengo que hacer mas pruebas con validaciones para ver si no da problema y quiero esperar ver si alguien mas publica con otra forma, etc. En todo caso si nadie mas publica acepto la tuya como solución, Gracias.
    – DAD
    Commented el 30 ago. 2020 a las 1:34
  • 1
    Lo importante es que entiendas por qué funciona: se ejecuta el cálculo después de obtener una respuesta a la petición AJAX Commented el 30 ago. 2020 a las 6:20
  • Dejare que se reparta la reputación, la otra respuesta también es muy buena y las puedo complementar. hago esto por que los dos me enseñaron algo nuevo, espero entiendas. Gracias!.
    – DAD
    Commented el 3 sept. 2020 a las 5:27
  • Aquí estamos para aprender y ayudar, si consideras que la respuesta de Triby te ha ayudado más, entonces dale la recompensa porque se la merecerá Commented el 3 sept. 2020 a las 7:14
  • 1
    Ambas tienen los mismos votos ahora ;-)
    – Triby
    Commented el 3 sept. 2020 a las 16:30

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.