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,
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.
<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.
$( 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.