0

Buenas tengo un problema, quisiera tratar de obtener un valor de un input, el cual es ingresado, para posteriormente evaluarlo en php. Pero no quiero recargar el Formulario. Quisiera evaluar en la misma página una vez se ingresa el dato. Se un poco de javascript, pero no mucho de ajax.

Mi objetivo es capturar el valor de Relacion, el cual luego lo usare en el select, mediante php y mysql para mostrar una lista. El problema es cuando le doy en buscar, me recarga y pierdo los datos introducir la descripción de la imagen aquí

<div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">Relacion<span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="number" id="relacion" name="txtRelacion" required="required" class="form-control col-md-7 col-xs-12">
                          <button id="btnB" href="#">Buscar</button>
                           <script type="text/javascript">
                            $(document).ready(function()
                              {
                              $("#btnB").click(function () {
                              //saco el valor accediendo a un input de tipo text y name = nombre
                              // alert($('input:number[name=txtNivel]').val());
                              //saco el valor accediendo al id del input = nombre
                              var rel=$("#relacion").val());
                              // document.getElementById("rel").value=val();
                              //saco el valor accediendo al class del input = nombre   
                              // alert($(".txtRelacion").val());
                              $("#relacionModal").modal('show');
                              });
                            });
                            </script>
                            <label>Proveedor:</label>
                            <select name="cboIdEmpresa" class="form-control">
                              
                              ?>
                              <option value="-1">Seleccione el Proveedor de Nivel </option>
                              <?php
                                $nivel=$_POST['rel'];
                                echo $nivel;
                                $listP=$objProveedores->ListarPPN($nivel);
                                // $listP=mysqli_fetch_row($resp);
                                foreach ($listP as $dato) {
                                  ?>

                                  <option value="<?php echo $dato[0]; ?>"><?php echo $dato[1];?></option>
                              <?php } ?>     
                            </select> 
                        </div>
                      </div>

3
  • Para entender mejor la pregunta editala y agrega el código que ya tengas de tu formulario Commented el 3 may. 2018 a las 14:12
  • Por favor, edita tu pregunta e incluye el código para tu formulario
    – Alfabravo
    Commented el 3 may. 2018 a las 14:12
  • Ya lo edite, disculpen. Commented el 3 may. 2018 a las 14:18

1 respuesta 1

2

Usando $.ajax() de jQuery podés hacer una petición a un servidor y una vez que obtengas los datos, podrás modificar el DOM. Por ejemplo:

html

<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">
    Relacion<span class="required">*</span>
  </label>
  <div class="col-md-6 col-sm-6 col-xs-12">
    <input type="number" id="relacion" name="txtRelacion" required="required" class="form-control col-md-7 col-xs-12">
    <button id="btnB">Buscar</button>
    <label>Proveedor:</label>
    <select name="cboIdEmpresa" class="form-control">
      <option value="-1">Seleccione el Proveedor de Nivel</option>
    </select>
  </div>
</div>

javascript

// una vez que renderice el DOM ejecuto lo siguiente
$(document).ready(function() {
  // agrego un evento al hacer click en el botón
  $('#btnB').on('click', function() {
    var relacion = $("#relacion").val();
    $.ajax({
      // metodo: puede ser POST, GET, etc
      method: "POST",
      // la URL de donde voy a hacer la petición
      url: "lista.php",
      // los datos que voy a enviar para la relación
      data: {
        rel: relacion
      },
      // si tuvo éxito la petición
      success: function(listaP) {
        var select = $('select[name=cboIdEmpresa]');

        // borro todos los option y agrego el de default
        select
            .find('option')
          .remove()
          .end()
          .append('<option value="-1">Seleccione el Proveedor de Nivel</option>');

        // agrego los option que vienen por PHP
        for (var i = 0; i < listaP.length; i++) {
            select.append('<option value="' + listaP[i][0] + '">' + listaP[i][1] + '</option>');
        }
      }
    })
  });
});

php

Utilizamos json_encode() de PHP. Nombro este archivo como lista.php para el ejemplo.

$nivel = $_POST['rel'];
$listP = $objProveedores->ListarPPN($nivel);

// una vez que obtengas los datos, pasas esos en un json_encode()
// esto es para que puedas utilizarlo del lado del cliente
echo json_encode($listP);

Acá te dejo en un jsFiddle un ejemplo básico de ajax con jQuery.

8
  • Haber si logro entender, con $ajax puedo evaluar siempre el input sin recargar el formulario y luego lo envio al DOM verdad? Commented el 3 may. 2018 a las 14:22
  • Si, estás en lo correcto. Después en el método success podés modificar el DOM.
    – Kleith
    Commented el 3 may. 2018 a las 14:25
  • Una ves que lo tengo en el DOM, si quiero usarlo en php, tendria que reedirigirlo verdad?. No hay una manera directa de ahi mismo recibirlo en php? Commented el 3 may. 2018 a las 14:30
  • Claro, PHP se maneja del lado del servidor, en palabras simples: antes de que empiece a renderizar la página; mientras que javascript es del lado del cliente: una vez que empiece a cargar la página y sea visible. Entonces para mandarle datos del cliente al servidor tenés que hacerlo por formulario (submitear y recargar) o por ajax.
    – Kleith
    Commented el 3 may. 2018 a las 14:34
  • Claro entiendo, mira me olvide de subir mi formulario, lo podrias ver de nuevo tal vez para que me explique mejor. Commented el 3 may. 2018 a las 14:36

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.