How to pass values through AJAX of a Select using the ONCHANGE

0

I have this .php that sends the chosen value of a select

   <!DOCTYPE html>
   <html lang="es">
    <head>
    <meta charset="UTF-8" />
<title>pasar valores con ajax</title>
// Aquí esta la referencia a jquery
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).on('ready',function(){

  $('#btn-ingresar').click(function(){
    var url = "buscar2.php";                                      

    $.ajax({                        
       type: "POST",                 
       url: url,                    
       data: $("#formulario").serialize(),
       success: function(data)            
       {
         $('#resp').html(data);           
       }
     });
  });
});
</script>
</head>
 <body>
   <form method="post" id="formulario">
    <select name="estado" id="estado" >
      <option value="">Seleccionar</option>
      <option value="Cerrado">Cerrado</option>
      <option value="Asignado">Asignado</option>
      <option value="En Curso">En Curso</option>
 </select>
    <input type="button" id="btn-ingresar" value="Ingresar" />
</form>

<div id="resp"></div>
</body>
</html>

then we go to find2.php where we print the variable

  <?php   
      $estado= $_POST['estado'];

      echo "el estado es: ".$estado; 
  ?>

but what I want is not to use the button, but that the ONCHANGE of the select is sent immediately ... can this execution be done?

    
asked by kev 19.06.2018 в 22:48
source

3 answers

1

by doing the following script will send you the post, when making the change

   <!DOCTYPE html>
   <html lang="es">
    <head>
    <meta charset="UTF-8" />
<title>pasar valores con ajax</title>
// Aquí esta la referencia a jquery
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).on('ready',function(){

  $('#estado').on('change',function(){
    var url = "buscar2.php";                                      

    $.ajax({                        
       type: "POST",                 
       url: url,                    
       data: $("#formulario").serialize(),
       success: function(data)            
       {
         $('#resp').html(data);           
       }
     });
  });
});
</script>
</head>
 <body>
   <form method="post" id="formulario">
    <select name="estado" id="estado" >
      <option value="">Seleccionar</option>
      <option value="Cerrado">Cerrado</option>
      <option value="Asignado">Asignado</option>
      <option value="En Curso">En Curso</option>
 </select>
    <input type="button" id="btn-ingresar" value="Ingresar" />
</form>

<div id="resp"></div>
</body>
</html>

you can read more about the documentation 'on' in the following link link

    
answered by 19.06.2018 / 23:05
source
0

Simply change your click handler for this:

$('#estado').on("change", function(){
    
answered by 19.06.2018 в 23:03
0

The implementation could be as follows

$('#estado').change(function(){
    var data= $(this).val();
    buscar(data);
});

function(data){
    $.ajax({                        
        type: "POST",                 
       url: url,                    
       data: data,
       success: function(response) {
           console.log(response)           
       }
    });
}

In your case it is not necessary to send all the formulalario but only the value that the select captured, since in your PHP you can obtain the value by means of $_POST

    
answered by 19.06.2018 в 23:08