How to pass the value of the select on the same page with AJAX?

Question

How to pass the value of the select on the same page with AJAX?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have this code to pass the value of a select on the same page, but I'm passing the value of the select with form ...

<!DOCTYPE html>
 <html>
 <body>
  <form action="a.php">
  <select name="miselector" id="miselector" onchange="this.form.submit()">
    <option value="">Seleccionar</option>
    <option value="coches">Coches</option>
    <option value="casas">Casas</option>
  </select>
  </form>

 ///Lectura de la variable "en la misma página" desde php

<?php
 echo "Select: ".$_GET["miselector"];
?>
 </body>
</html>

There will be some way to pass value but with AJAX, because I do not want to load the page but only show the value that I select in PHP.

html php ajax

asked by Kevincs7 25.09.2018 в 21:00

source

2 answers

Sorting a List without affecting the entire List how to update a field in laravel 5.6

score 0 · Answer 1

Of course, if there is a way, you can use jQuery or you can use axios. I leave you an example using jQuery.

HTML

<select name="miselector" id="miselector">
  <option value="">Seleccionar</option>
  <option value="coches">Coches</option>
  <option value="casas">Casas</option>
</select>

JS + JQuery

(function($){
  $(document).ready(function(){
    $("#miselector").on("change", function(){
      var parametros = { // Parametros que vamos a mandar al servidor
        "miselector" : $(this).val() 
      };
      $.ajax({
        data:  parametros, // Adjuntamos los parametros
        url:   'a.php', // ruta del archivo php que procesará nuestra solicitud
        type:  'post', // metodo por el cual se mandarán los datos
        beforeSend: function () { // callback que se ejecutará antes de enviar la solicitud
          console.log("Enviando por medio de post");
        },
        success:  function (response) { // callback que se ejecutará una vez el servidor responda
          console.log("Respuesta del servidor: ", response);
        }
      });
    });
  });
})(jQuery);

** a.php **

<?php

$valor = isset($_POST["miselector"]) ? $_POST["miselector"] : false;
if($valor) {
  echo "Recibido valor " + $valor;
}

Greetings!

score 0 · Answer 2

If what you need is to use the selected value on the current page, neither PHP nor AJAX is necessary. With a simple JavaScript function you can do it

<!DOCTYPE html>
 <html>
     <body>
      <form action="a.php">
      <select name="miselector" id="miselector"     onchange="document.getElementById('selected_value').innerHTML=this.value">
        <option value="">Seleccionar</option>
        <option value="coches">Coches</option>
        <option value="casas">Casas</option>
      </select>
     </form>
 ///Lectura de la variable "en la misma página" con js
 Selected:
 <div id="selected_value">
 </div>
</body>
</html>

EDITED: If you need in the same file to take the value and process it with PHP you can do it with AJAX using JQuery in this way

<?php
 if(isset($_GET["miselector"])){
    echo "INFO PROCESADA EN PHP:".$_GET["miselector"];
}else{
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#miselector").on("change", function(){
    $.get("a.php?miselector="+this.value,function(result){
        $("#returned").html(result);
    });
  });
 });
</script>
</head>
    <body>
    <form action="a.php">
     <select name="miselector" id="miselector">
        <option value="">Seleccionar</option>
        <option value="coches">Coches</option>
        <option value="casas">Casas</option>
    </select>
    </form>

<div id="returned">
    aqui cambiara el contenido seleccionado
</div>

 </body>
</html>
<?php } ?>