2

tengo un formulario que al seleccionar un 'select' se envia automaticamente por AJAX, la llamada funciona bien. Ahora al pasar las variables del formulario me dice Notice: Undefined index:

En el archivo index.php tengo

function enviar(theForm) {
 $.ajax({
   type: "POST",
   url: "a.php",
   data: $(this).serialize(),
   success: function(data) {
     $('#a').html(data);
   }
 });
 event.preventDefault();
};
<form role="form" name="nD" id="nD" method="post">
  <select name="d" onchange="enviar(this.form)">
    <option value="" disabled selected>Selecciona</option>
    <option value="1">Uno</option>
    <option value="2">Dos</option>
    <option value="3">Tres</option>
  </select>
</form>

<div id="a"></div>

En el archivo a.php tengo

<h1>prueba</h1>
<?php echo $_POST['d'] ?>

Al quitar 'onchange="enviar(this.form)"' y colocar un 'submit' funciona bien, pero es necesario que el formulario se envie cuando se seleccione una opción del 'select'. Gracias

2 respuestas 2

2

Solo tienes que reemplazar:

$(this).serialize()

Por:

$(theForm).serialize()

Así te aseguras de referenciar el formulario y no otra cosa al momento de serializar los datos.

function enviar(theForm) {
 $.ajax({
   type: "POST",
   url: "a.php",
   data: $(theForm).serialize(),
   success: function(data) {
     $('#a').html(data);
   }
 });
 event.preventDefault();
};
<form role="form" name="nD" id="nD" method="post">
  <select name="d" onchange="enviar(this.form)">
    <option value="" disabled selected>Selecciona</option>
    <option value="1">Uno</option>
    <option value="2">Dos</option>
    <option value="3">Tres</option>
  </select>
</form>

<div id="a"></div>

2

Otra solución es declararle un evento change con jquery al select:option y cambiar como pasas el serealize de $(this).serialize() a $("#nD").serialize() :

$("select[name='d']").on("change", () => {
  enviar();
});

function enviar() {

 $.ajax({
   type: "POST",
   url: "a.php",
   data: $("#nD").serialize(),
   success: function(data) {
     $('#a').html(data);
   }
 });
 
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form role="form" name="nD" id="nD" method="post">
  <select name="d">
    <option value="" disabled selected>Selecciona</option>
    <option value="1">Uno</option>
    <option value="2">Dos</option>
    <option value="3">Tres</option>
  </select>
</form>

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.