0

Esta es la primera vez que realizo una pregunta. Tengo un problema al intentar hacer que se me autollenen algunos inputs mediante JS, ocupando datos que traje con json desde mi base de datos.

Al elejir algun dato del select, deberia de consultar y llenar, sin embargo no se si la manera en la que lo estoy haciendo sea la correcta, soy muy nuevo en lo que es php, js, ajax, etc.

crear-in.php

<form method="post" name="crear-in" id="crear_in" action="modelo-in.php">

                      <?php
                      for ($i = 1; $i <= $n; $i++) { ?>
                        <tr class="fila-fija">

                          <input type="hidden" style="width : 140px;" id="customer<?php echo ($i); ?>" required name="customer[]" placeholder="customer" />
                          <input type="hidden" id="folio<?php echo ($i); ?>" name="folio[]" value="<?php echo $f; ?>">
                          <td>
                            <select class="fotm-control" type="text" style="width : 90px;" id="skmx_pn<?php echo ($i); ?>" required name="skmx_pn[]" placeholder="SKMX PN" onchange="cambioOpciones();" />
                            <option >- SKMX PN -</option>

                            <?php
                            try {
                              $sql = "SELECT * FROM tbl_customer_pn ";
                              $resultado = $conn->query($sql);
                              while ($tbl_customer_pn = $resultado->fetch_assoc()) { ?>
                                <option value="<?php echo $tbl_customer_pn['id_cpn']; ?>"><?php echo $tbl_customer_pn['skmx_pn']; ?></option>
                                <!--  -->
                            <?php }
                            } catch (Exception $e) {
                              echo "Error: " . $e->getMessage();
                            } ?>
                            </select>
                          </td>
                          <td><input type="text" style="width : 180px;" id="description<?php echo ($i); ?>" required name="description[]" placeholder="Description" disabled /></td>
                          <td><input type="text" style="width : 90px;" id="customer_pn<?php echo ($i); ?>" required name="customer_pn[]" placeholder="Customer PN" disabled /></td>
                          <td><input type="text" style="width : 120px;" id="shop_order<?php echo ($i); ?>" required name="shop_order[]" placeholder="# Shop Order" /></td>
                          <td><input type="text" style="width : 70px;" id="po<?php echo ($i); ?>" required name="po[]" placeholder="# P.O." /></td>
                          <td><input type="text" style="width : 100px;" id="lote<?php echo ($i); ?>" required name="lote[]" placeholder="Lote" /></td>
                          <td><input type="text" style="width : 60px;" id="quantity<?php echo ($i); ?>" required name="quantity[]" placeholder="Quantity" /></td>
                          <td><input type="text" style="width : 60px;" id="location<?php echo ($i); ?>" required name="location[]" placeholder="Location" /></td>
                          <td><input type="text" style="width : 60px;" id="incoming<?php echo ($i); ?>" required name="incoming[]" placeholder="" readonly /></td>

                        </tr>
                      <?php } ?>

                      <!-- </table> -->
                      <div class="box-footer">
                        <br>
                        <input type="hidden" name="registro" value="nuevo">
                        <button type="submit" id="btn-in-out" class="btn btn-primary btn-block btn-flat">Crear</button>

                      </div>

Aqui pongo mi script

<script>

                  function consult() {
                    $.ajax({
                      url: "consulta.php",
                      type: "POST",
                      dataType: "json",
                      success: function(data) {
                        console.log(data);
                      }
                    })
                  }

                  function cambioOpciones() {
                    var data = consult();
                    var combo = document.getElementById('skmx_pn1');
                    var combo2 = document.getElementById('skmx_pn2');
                    var combo3 = document.getElementById('skmx_pn3');

                    if (combo = "skmx_pn1") {
                      var combo = document.getElementById('skmx_pn1');
                      var opcion = combo.value;

                      document.getElementById('customer1').value = data[opcion][2];

                      document.getElementById('customer_pn1').value = data[opcion][3];

                      document.getElementById('description1').value = data[opcion][4];
                    }
                    if (combo2 = "skmx_pn2") {
                      var combo2 = document.getElementById('skmx_pn2');
                      var opcion = combo2.value;

                      document.getElementById('customer2').value = data[opcion][2];

                      document.getElementById('customer_pn2').value = data[opcion][3];

                      document.getElementById('description2').value = data[opcion][4];
                    }
                    if (combo3 = "skmx_pn3") {
                      var combo3 = document.getElementById('skmx_pn3');
                      var opcion = combo3.value;

                      document.getElementById('customer3').value = data[opcion][2];

                      document.getElementById('customer_pn3').value = data[opcion][3];

                      document.getElementById('description3').value = data[opcion][4];
                    }

                  }
                </script>

consulta.php donde realizo la consulta.

try {

    $datos = $conn->query("SELECT id_cpn, skmx_pn, customer, customer_pn, description FROM tbl_customer_pn");
    $data = $datos->fetch_All(PDO::FETCH_ASSOC);

    print json_encode($data);
    $conn->close();
} catch (Exception $e) {
    echo "Error: " . $e->getMessage();
}

Perdón si es un poco largo, pero quiero que comprendan mi codigo. Lo que pasa al seleccionar un valor del select pasa lo siguiente

crear-in.php?nf=3&nF…io=020321113928:466 Uncaught TypeError: Cannot read property '22' of undefined
    at cambioOpciones (crear-in.php?nf=3&nF…io=020321113928:466)
    at HTMLSelectElement.onchange (crear-in.php?nf=3&nF…io=020321113928:283)
crear-in.php?nf=3&nF…io=020321113928:451 
Array(7)
0: (5) ["22", "2102530", "", "655856-00", ""]
1: (5) ["23", "2251010", "", "N060864", ""]
2: (5) ["25", "3201191", "", "449817-00", ""]
3: (5) ["27", "3201190", "", "396311-00", ""]
4: (5) ["28", "3201366", "", "N345859", ""]
5: (5) ["30", "3201194", "", "610124-01", ""]
6: (5) ["33", "3500179", "", "Q88776-837", ""]
length: 7
__proto__: Array(0)

1 respuesta 1

0

Estas teniendo dos problemas, uno de concepto y otro de sincronía.

Estas llamando a la función cambioOpciones() cada vez que un select cambia de valor y en esa función tu primera línea es var data = consult(); y acá es donde están los problemas.

  1. No estas devolviendo nada en la función consult() no hay ningún return entonces esa asignación que estas haciendo var data = consult(); siempre va a dar undefined.
  2. Así hagas un return data; dentro de la función tampoco te va a funcionar porque una request Ajax tiene un delay ya que va al servidor y vuelve y, en ese tiempo el código javascript sigue ejecutándose, por lo que volvemos al caso 1 y esa asignación sigue siendo undefined.

Por suerte esto es un problema muy común, con soluciones varias:

  1. Podrías Usar promesas pero me parece que cuesta un poco entender como funcionan para el nivel en el que estas.
  2. Podrías usar Función async que es mucho más simple si no te preocupa la incompatibilidad con navegadores viejos.
  3. O podrías simplemente llamar en el onchange del select a la función consult() en lugar de cambioOpciones() y dentro de consult() en la función success de Ajax llamas a cambioOpciones(data) pasandole la data por parámetro y con eso mantienes la sincronía.

Te queda algo así:

function consult() {
    $.ajax({
        url: "consulta.php",
        type: "POST",
        dataType: "json",
        success: function(data) {
            cambioOpciones(data);
        }
    })
}

function cambioOpciones(data) {}
    /* esta linea la borras porque ya pasas la variable por parámetro
    var data = consult();
    */
3
  • Hola y gracias por responder, haciendo los cambios que me comentaste, el codigo trabaja de la misma manera lo cual me parece bien, mas sin embargo, ahora me sale este error. Uncaught TypeError: Cannot read property '2' of undefined, Y es de la siguiente linea del codigo JS. document.getElementById('customer1').value = data[opcion][2]; Supongo y no puede acceder a los datos de (data) Commented el 3 mar. 2021 a las 14:02
  • lo más probable es que esto var opcion = combo.value; no exista en tu objeto data. Tampoco sé que tenes en tu combo skmx_pn1 o cómo lo rellenas. Metele un poco de debug Commented el 3 mar. 2021 a las 22:11
  • Gracias por tu respuesta, me ayudó a ver algunas fallas que tenía en mi codigo y acerca del autollenado, estaba recorriendo mal el array para imprimir los datos, pero me tomare el tiempo para revisarlo a detalle. Commented el 4 mar. 2021 a las 3:15

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.