2

Este script lo que hace es evaluar un dato de la bbdd y lo retorna a un input. El problema es que lo estoy ocupado en una tabla dinámica y al momento de ir agrando fila se va modificando solo la primera fila. no se van agregando según la fila correspondiente. Por ejemplo en la primera linea selecciono una patente xxxx00 y 100 km al agregar la segunda fila selecciono otra patente y su km es de 200km pero no se guarda en la misma fila y pasa la primera. Dado que la primera tiene 100km lo cambia a 200km. Cómo puedo solucionar ese problema.

<script>
    $(document).on('change', '#id_tracto', function(event) {
        var valor= $(this).val();

        console.log(valor);

        $.ajax({   
              data : { valor : valor },
              url : 'Cargar_Datos_Kilometraje/Cargar_Valor_Kilometraje.php',   
              dataType : 'json',
              type:  'POST',
              success : function(json) {
                $("#kilometraje_actual").val(json.kilometraje_actual);           
              },            
              error : function(xhr, status) {
                  alert('Disculpe, existió un problema');
                  }
              });
          
        });

</script>

#Este script me ayuda agregar una nueva fila. Cada vez que presiono un botón se va cargado una nueva fila

<script>
   $(document).ready(function(){
    $("#AgregarFila").click(function(){
        var TablaKilometraje = document.getElementById("tablaprueba");
        $("#tablaprueba").append("<tr>"+TablaKilometraje.rows[0].innerHTML+"</tr>");//1
        $('.borrar').off().click(function(e) {
            $(this).parent('td').parent('tr').remove();//2

        });

    });
    
});  

</script>

#Este script es el que llena el select

       <script>
            $(document).ready(function () {
           const select = document.getElementById('id_tracto');
           function CargarPatente() {
        $.ajax({
            url: 'Cargar_Datos_Kilometraje/Datos_Tracto_Kilometraje.php',
            type: 'GET',
            success: function(response) {
                const patente=(response)
                const options= document.createElement("option");
                  patente.forEach(departamento => {
                  const option = new Option(departamento.patentes , departamento.idtracto)
                  select.append(option)

                })
            }
        })
    }
    CargarPatente() 

    })
</script>

#aqui estamos en el html

  <tbody id="tablaprueba">
    <tr>
      <td class="col-sm-3"><select class="form-select" id="id_tracto" name="id_tracto[]"><option value="">SELECCIONAR PATENTE</option></select></td>
      <td class="col-sm-3"><input type="text" class="form-control" name="kilometraje_actual[]" id="kilometraje_actual" value="" readonly/></td>
      <td class="col-sm-3"><input type="" class="form-control" id="kmactual" name="kmactual" ></td>
      <td class="col-sm-3"><button type="button" class="btn btn-outline-danger borrar" id="borrar" >ELIMINAR</button></td>
    </tr>
        </tbody>
4
  • @Marcos gracias por comentar. Para identificar tendría que ser en el tr de la tabla! y si fuera así como lo podría hacer. La lógica estoy un poco confundido.
    – keane1991
    el 17 mar. 2022 a las 19:45
  • Hola @keane1991, para hacerte entender mejor, considera añadir más contexto, por ejemplo, la estructura en el html y a ser posible el código php. Lo único que vemos aquí es que tras la respuesta escribes un valor en algo con id kilometraje_actual.
    – UXK
    el 17 mar. 2022 a las 19:49
  • @Marcos te quiero agradecer por tu tiempo. De verdad me falta aun por seguir aprendiendo un poco más. Pero lo que tu me enviaste quedo muy bien. Estoy muy agradecido y que Dios te bendiga.
    – keane1991
    el 17 mar. 2022 a las 23:30
  • @keane1991, acabo de actualizar mi respuesta.
    – Marcos
    el 17 mar. 2022 a las 23:33

2 respuestas 2

4

Tu problema se debe a que estas usando siempre los mismos id y por eso siempre se escribe el valor en el mismo campo.

Deberías usar class y delegación de eventos.

Ejemplo:

Detectar el cambio en los select

$("#tablaprueba").on('change', 'select.id_tracto', function() {
  var $select = $(this), // Obtenemos el select modificado
    $tr = $select.closest('tr'), // Buscamos el tr del select
    valor = $select.val();
    
  console.log(valor);

  $.ajax({
    data: {valor: valor},
    url: 'Cargar_Datos_Kilometraje/Cargar_Valor_Kilometraje.php',
    dataType: 'json',
    type: 'POST',
    success: function(json) {
      // Buscamos en los hijos del tr
      $tr.find("input.kilometraje_actual").val(json.kilometraje_actual);
    },
    error: function(xhr, status) {
      alert('Disculpe, existió un problema');
    }
  });
});

En la primer fila sacamos los id y utilizamos class

    <tbody id="tablaprueba">
      <tr>
        <td class="col-sm-3">
          <select class="form-select id_tracto" name="id_tracto[]">
            <option value="">SELECCIONAR PATENTE</option>
          </select>
        </td>
        <td class="col-sm-3">
          <input type="text" class="form-control kilometraje_actual" name="kilometraje_actual[]" value="" readonly/>
        </td>
        <td class="col-sm-3">
          <input type="" class="form-control kmactual" name="kmactual[]">
        </td>
        <td class="col-sm-3">
          <button type="button" class="btn btn-outline-danger borrar">ELIMINAR</button>
        </td>
      </tr>
    </tbody>

Bonus! Borrar fila

$("#AgregarFila").click(function() {
  var TablaKilometraje = document.getElementById("tablaprueba");
  $("#tablaprueba").append("<tr>" + TablaKilometraje.rows[0].innerHTML + "</tr>");
});

$("#tablaprueba").on('click', 'button.borrar', function() {
  $(this).closest('tr').remove();
});

Actualización

Para solucionar el problema con el select solo tenes que cambiar el selector.

Ejemplo:

// Actualizamos el selector
const select = document.querySelector('select.id_tracto');

function CargarPatente() {
  $.ajax({
    url: 'Cargar_Datos_Kilometraje/Datos_Tracto_Kilometraje.php',
    type: 'GET',
    success: function(response) {
      const patente = (response)
      const options = document.createElement("option");
      patente.forEach(departamento => {
        const option = new Option(departamento.patentes, departamento.idtracto)
        select.append(option)

      })
    }
  })
}
CargarPatente();
1
  • Muchas gracias lo voy a probar y gracias por tu tiempo y conocimiento.
    – keane1991
    el 17 mar. 2022 a las 20:46
3

Intuyo que el problema es que tienes varios elementos con la id kilometraje_actual. Recuerda que las ids no pueden repetirse. Al seleccionar por id, te está encontrando el primer elemento (en este caso en la 1º fila). Añade más contexto y podremos ayudarte mejor.

EDITO para futuros lectores: La respuesta de Marcos es mucho más completa y llegó antes de que yo terminase de elaborar la mía, debería ser marcada como la aceptada. Considera darle votos positivos.

Consejos adicionales relacionados

Esto es una mera opinión, pero creo que ya en 2022 es hora de dejar jQuery de lado. Recuerda que casi todo lo que aporta jQuery ya está integrado en JavaScript de forma nativa desde hace una buena cantidad de años y hoy día tiene soporte completo (casi del 98%). Por ejemplo document.querySelector para selección de elementos con sintaxis de selectores de CSS y fetch en lugar de $.ajax.

1
  • 1
    Gracias por el consejo estimado @Alex VJ. hay cosas que se pueden hacer mucho mejor y de a poco me he ido integrando nuevamente a la programación :) bendiciones
    – keane1991
    el 17 mar. 2022 a las 23:11

Tu Respuesta

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

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