How to get a value from an Input and pass it to php without reloading form

Question

How to get a value from an Input and pass it to php without reloading form

Navigation

#1 by (2 votes)

0

Good I have a problem, I would like to try to obtain a value of an input, which is entered, to later evaluate it in php. But I do not want to reload the Form. I would like to evaluate on the same page once the data is entered. I know a bit of javascript, but not a lot of ajax.

My goal is to capture the Relacion value, which I will then use in the select, using php and mysql to display a list. The problem is when I give in search, I recharge and lose the data

<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>

javascript html5 ajax

asked by Luis Fernando Zumaran 03.05.2018 в 16:08

source

1 answer

Argument Type (typescript) Problem with array_diff

score 2 · Accepted Answer

Using $.ajax() of jQuery you can make a request to a server and once you get the data, you can modify the DOM. For example:

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

We use PHP json_encode() . I name this file as lista.php for the example.

$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);

Here I leave you in a jsFiddle a basic example of ajax with jQuery.