serialize() de jQuery Ajax no funciona los botones submit no aparecen en post

[Lorenzo31]

Buenos días compañeros, debido a mis limitaciones, por desconocimiento de ajax (sigo teniendo presente que he de hacer el curso y el de JavaScript) no sé como realizar una acción y necesitaria ayuda, creo que es algo bastante básico para alguien que sepa Ajax.

Ahí va la pregunta, con la documentación de código que tengo, debido al uso de base de datos, no copio todo el código, porque tampoco se podría ejecutar.

desde un fichero php hago un include para agregar una nueva encuestas,

Código: [Seleccionar]

     include '../net/agregar.php';
el código de agregar.php, básicamente tiene dos opciones, seleccionar el titulo y numero de opciones y la otra definir las opciones segun ese numero.

Para ello solo compruebo, si al darle a un boton continuar, se ha creado $_POST y entra en la segunda parte, todo dentro del mismo agregar.php. Dejo el código aunque es extenso.

Código: [Seleccionar]


<script src="script_encuesta_opciones.js" type="text/javascript"></script>
<?php 
$cont = 0;

$titulo = ''; if(isset($_POST['titulo'])){ $titulo = trim($_POST['titulo']); } // definimos $titulo para evitar errores, y guardamos su valor por el ingresado.
$desc = ''; if(isset($_POST['descripcion'])){ $desc = trim($_POST['descripcion']); } // definimos $desc para evitar errores, y guardamos su valor por el ingresado.
if(isset($_POST['enviar'])){
  
    if($titulo != ""){
 
   $num = $_POST['opciones']; // este valor lo vamos a obtener de lo que el usuario ingrese como numero de opciones al crear la encuesta
   $fecha = date("Y-m-d H:i:s");
        $idComunidadEncuesta = $_SESSION['id_comunidad'];
   $sql= "INSERT INTO `encuestas` (`id` ,`titulo`, `descripcion`,`fecha`, `id_comunidad`, `activa`) VALUES (NULL ,  '$titulo', '$desc', '$fecha', '$idComunidadEncuesta', '1');"; // si han ingresado si quiera un titulo insertamos esta encuesta en la tabla
$mysqli->query($sql);

$sql = "SELECT MAX(id) as id FROM encuestas"; // ahora obtenemos el id de la ultima fila,
                                                      // la que acabamos de ingresar,
                                                      // esto lo hacemos para poder asociarle las opciones
$req = $mysqli->query($sql);

while($result = $req->fetch_array(MYSQLI_ASSOC)){
$id_encuesta = $result['id']; // con el resultado obtenido hacemos un bucle y definimos los resultados como id_encuesta.
}

$sql = "INSERT INTO  `opciones_encuesta` (`id` ,`id_encuesta` ,`nombre` ,`valor`) VALUES "; // En esta parte estamos armando un query SQL dinamico el cual sera modificado de acuerdo a lo que el usuario ingrese en el formulario.
for($i=1;$i<=$num;$i++){
$opcnativa = trim($_POST['opc'.$i]); // obtenemos el nombre de cada opcion indivudalmente.
if($opcnativa != ""){
$sql .= "(NULL ,  '$id_encuesta',  '$opcnativa',  '0')"; // el id de la opcion ira null para que se ponga automaticamente, en id_encuesta pues ira el id de la encuesta que acabamos de crear, en 'nombre' ira el nombre de la opcion y valor ira 0, puesto que es una nueva opcion sin votos, esto se repetira con todas las opciones que el usuario haya definido.
$cont++;
}
if($i == $num){
$sql .= ";"; // si es que se llega al final, termina la consulta
}else{
$sql .= ", "; // sino se pone una , y se continua.
}
}

if($cont < 2){ // si el usuario no definio ninguna opcion, se elimina la encuesta recien creada, esto es poco probable que suceda ya que la definicion de opciones la haremos con un select, y aqui se seleccionara el valor de 2 por defecto.
$sql = "DELETE FROM `encuestas` WHERE id = ".$id_encuesta;
echo "<div class='error'>Tiene que llevar por lo menos 2 opciones.</div>";
}else{
echo "<script language='javascript'>window.location='index.php?p=charts'</script>"; // por ultimo si todo salio bien, redireccionamos al index para que el usuario vea su encuesta recien creada.
        }
$mysqli->query($sql); // y ejecutamos el query
    }
}
?>

<div id="agregador" style=" width: auto; max-width:800px; margin:auto; margin-top: 10px; border: 1px solid #E0E0E0;">
<div style="margin-bottom: 15px; background-color: #f5f5f5; font-size: 21px; border-bottom: 1px solid #DDD; padding-bottom: 5px; text-align: center; font-weight:bold;">Agregar Encuesta</div>
<form id="agregar_encuesta_form" role="form" style="text-align: center;">
    <div class="form-group">
<div class="fl titulo" style="margin-right: 20px;">
<label>Titulo:</label>
<input name="titulo" type="text" value="<?= $titulo; ?>" size="26" class="form-control">
</div>
<br/>
<div style="margin-right: 20px;">
<label id="desc">Descripcion:</label>
<textarea id ="desc" name="descripcion" rows="3" cols="50" class="form-control"><?= $desc; ?></textarea>
</div><br/>
<?php
        // esto es simplemente un formulario, pero aqui hacemos una condicion, identificamos si se ha definido un numero de opciones, si es si hacemos un bucle, si es no mostramos el select para definir un numero de opciones, como es obvio por defecto se mostrara el bucle:
if(isset($_POST['opc'])){ 
$num = $_POST['opciones']; // guardamos el valor del numero de opciones
for($i=1;$i<=$num;$i++){ // hacemos el bucle mostrando los campos respectivos.
?>
<div class="cf">
<label>Opcion <?php echo $i; ?>: </label>
<input name="opc<?php echo $i; ?>" type="text" size="43" class="form-control">
</div>
<?php } // aqui termina el bucle ?>
<div class="cf">
    <br/><input name="enviar" type="submit" class="btn btn-success center-block" value="Enviar" style="padding: 8px 16px; border: 0; width:90px; height:42px; font-weight: bold; color: white; ">
        <input name="opciones" type="hidden" value="<?php echo $num; // le pasamos el valor de num al proceso del formulario mediante un campo oculto. ?>">
        <input name="cont" type="hidden" value="<?php echo cont; ?>">
    </div>
<?php }else{ // sino se ha definido nro de opciones: ?>
<div class="fl">
    <label>Nยบ de opciones:</label>
    <input name="opciones" type="number" min="2" max ="999"/>
</div>
     <br/>
    <div class="cf">
      <input name="opc" type="submit" class="btn btn-success center-block" value="Continuar" style="padding: 8px 16px; border: 0; width:90px; height:42px; font-weight: bold; color: white; ">
    </div>

      <?php } // Sino se han definido opciones, que en vez de salir el boton de Enviar, salga uno que sea Continuar. ?>
    </div>
</form>
</div>



Bueno, lo que necesito, es que el form que marco en negrita, realice la acción sin recargar toda la página (que tiene cabecera, menú, etc), solo el div "agregador" donde está el formulario, y en teoría vuelva a comprobar $_POST['opc'] que indica el numero de opciones y ejecuta la segunda opción del agregar.php

Para ello he intentado esto con ajax, pero no da resultado, solo  lo lanza por consola.log(data) si se lo solicito.

Código: [Seleccionar]


$( document ).ready(function() {

$("#agregar_encuesta_form").submit( function(e) {
e.preventDefault();
$.ajax({
data: $("#agregar_encuesta_form").serialize(),
type: "POST",
url: "agregar.php",
success: function(data){
$("#agregador").html(data);
console.log(data);
}
});

});


$("#agregar_encuesta_form").submit( function() {
  return false;
});

});


Si alguien puede ayudarme, lo agradezco mucho compañeros. Sé que al final la solución es hacer el curso JavaScript y Ajax pero el tiempo me lo impide en este momento. Lo haré seguro.

[Alex Rodríguez]

Hola Lorenzo he tratado de revisar el código y no es fácil de entender si no conoces bien lo que se trata de hacer. Veo que usas jQuery, no directamente JavaScript y Ajax sino indirectamente a través de jQuery. Entiendo que tratas de hacer una ejecución en segundo plano (usando Ajax) cuando el usuario pulsa en un botón de formulario (supongo que el formulario no debe enviarse¿?) y que esa ejecución en segundo plano se traduzca en que el usuario vea algo sin necesidad de refrescar la página.

Hay algo que veo poco claro. En el código php has incluido esto:

Código: [Seleccionar]

if($cont < 2){ // si el usuario no definio ninguna opcion, se elimina la encuesta recien creada, esto es poco probable que suceda ya que la definicion de opciones la haremos con un select, y aqui se seleccionara el valor de 2 por defecto.
$sql = "DELETE FROM `encuestas` WHERE id = ".$id_encuesta;
echo "<div class='error'>Tiene que llevar por lo menos 2 opciones.</div>";
}else{
echo "<script language='javascript'>window.location='index.php?p=charts'</script>"; // por ultimo si todo salio bien, redireccionamos al index para que el usuario vea su encuesta recien creada.
        }

El comentario indica que $cont < 2 será poco frecuente, por lo que se introduce el echo como respuesta llevando esto:
window.location='index.php?p=charts'

Esto es precisamente una instrucción para recarga de página. No entiendo por qué si la idea es que no haya recarga de página aparece esa instrucción ahí. De hecho conforme se cargara ese código supongo que debería ocasionar la redirección ¿?

Al tener esos echo en el código php, cuando se ejecute realmente no te devolverá el div agregador únicamente, sino que te devolverá todo lo que anteriormente se haya introducido vía echo, no sé si es eso lo que prentendes ¿?

Otro detalle:

$("#agregador").html(data);
console.log(data);

Aquí parece que estuvieras indicando: seleccionar el div con id="agregador" y ponerle como código html interno dentro de dicho div el resultado obtenido vía ajax. Pero para eso necesitas que el div con id agregador exista en el documento previamente. ¿Ese div existe previamente? Si no existe sino que pretendes introducirlo tendrás que hacerlo de otra manera (ya que sería intentar seleccionar algo que no existe).

Saludos

[Lorenzo31]

Código: [Seleccionar]

<div id="agregador" style=" width: auto; max-width:800px; ma
<div style="margin-bottom: 15px; background-color: #
<form id="agregar_encuesta_form" role="form" style="t
<div class="form-group">
<div class="fl titulo" style="margin-right: 20px;">
<label>Titulo:</label>
<input name="titulo" type="text" val
</div>
<br/>
<div style="margin-right: 20px;">
<label id="desc">Descripcion:</label>
<textarea id ="desc" name="descripci
</div><br/>
<?php
// esto es simplemente un formulario, pero aqui hacem
if(isset($_POST ['opc' ])){
$num = $_POST ['opciones' ]; // guardamos el v
for($i =1 ;$i <= $num ; $i++){ // hacemos el bucle
?>
<div class="cf">
<label>Opcion <?php echo $i; ?> : </label>
<input name="opc <?php echo $i ; ?> " type="tex
</div>
<?php } // aqui termina el bucle ?>
<div class="cf">
<br/><input name="enviar" type="submit" class="btn b
<input name="opciones" type="hidden" value=" <?php ech
<input name="cont" type="hidden" value=" <?php echo co
</div>
<?php }else{ // sino se ha definido nro de opciones:
<div class="fl">
<label>N&#3618;&#3610; de opciones:</label>
<input name="opciones" type="number" min="2" max ="9
</div>
<br/>
<div class="cf">
<input name="opc" type="submit" class="btn btn-succe
</div>
<?php } // Sino se han definido opciones, que en vez d
</div>
</form>
</div>
div agregador engloba el formulario de la encuesta.

básicamentente ese count <2 dice, si hay menos de dos opciones (bien, mal) no puede haber encuesta, así que recarga la página charts.PHP y no insertes en bbdd la nueva encuesta.

lo que quiero es que ese form agregador, al seleccionar 2,3,4... opciones , se refresque con tantos text input como opciones seleccionaran, para que puedan escribir las opciones con texto.

esto ya lo hacía, lo que ocurre que llamando en el form a action ="" y recogia del post la variable opc y así funcionaba perfectamente, pero ahora debo mostrarlo con pestañas el menú y al refresar la página entera se me va a la pestaña que no es, no se mantiene en la de nueva encuesta, así que, la única opción es recargar con ajax ese form, y en eso estoy, sólo necesitó que ese div haga con ajax o como sea, un equivalente a action="" pero en el div agregador solo

[Lorenzo31]

Después de media mañana peleando con el asunto, he logrado arreglarlo, básicamente el problema que tenia es que el serialize() de JavaScript, los botones type=submit no los recoge para el post, y como yo en el php comprobaba esos submit, he tenido que poner en el formulario un par de input hidden que hicieran la funcion de los submit en agregar.php.

Un saludo, y gracias Alex, como siempre, por mirarte el código y dedicarme tu tiempo.

[Alex Rodríguez]

Me alegro que hayas podido resolverlo. No se trata de cuestiones sencillas. En este caso usas jQuery, que es un framework para JavaScript. Su uso requiere conocer tanto uno como otro y esto es bastante amplio. Consultar la documentación del api jQuery te puede resultar útil, por ejemplo en https://api.jquery.com/serialize/ encontramos

Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.

Pero claro, el problema está en encontrar qué es lo que falla en un código que puede tener cientos de líneas y en una documentación que tiene miles de documentos... incluso leyendo la documentación y el aspecto concreto puede ser que no nos percatemos de lo que falla.

Saludos

[Lorenzo31]

Exacto, ahí esta la especificación en la documentación, pero bueno, me pude dar cuenta lo que fallaba, que eran los submit y googlearlo a ver porque en POST no me llegaban esos inputs, y saqué eso mismo que tu has posteado.

Thx Alex.