0

Buenas tardes,

creo que el titulo esta mal expresado, lo editaré cuando piense una pregunta más precisa.

Básicamente explico mi problema:

Tengo una página web con un formulario de solicitud de información. El action del form esta redireccionado a la misma página donde esta este código:

require_once("../CBSPlatform/assets/classes/class.sistema.php");
require_once("../CBSPlatform/assets/classes/class.solicitudinfo.php");
require_once("../CBSPlatform/assets/functions.php");
require_once("assets/core.php");

$solicitud = new SolicitudInfo;

if (isset($_POST['solicitudinfo'])) {

    $centro = secure($_POST['centro']);
    $curso = secure($_POST['curso']);
    $nombre = ucwords(strtolower(secure($_POST['nombre'])));
    $apellido = ucwords(strtolower(secure($_POST['apellidos'])));
    $fechanacimiento = secure($_POST['fechanacimiento']);
    $poblacion = ucwords(strtolower(secure($_POST['pueblo'])));
    $codpostal = secure($_POST['codpostal']);
    $nombretutor = ucwords(strtolower(secure($_POST['nombretutor'])));
    $apellidostutor = ucwords(strtolower(secure($_POST['apellidostutor'])));
    $email = strtolower(secure($_POST['email']));
    $movil = secure($_POST['movil']);
    $conocen = secure($_POST['conocen']);
    $observaciones = ucfirst(strtolower(secure($_POST['observaciones'])));
    $dia = date("d") . "/" . date("m") . "/" . date("Y");
    $hora = date("G") . ":" . date("i") . ":" . date("s");

    $solicitud->addSolicitud($dia, $hora, $centro, $curso, $nombre, $apellido, $fechanacimiento, $poblacion, $codpostal, $nombretutor, $apellidostutor, $email, $movil, $conocen, $observaciones);

    if($solicitud == true) {
        echo "ggez";

    } else {
        echo "";
    }
    $_POST = array();
};

La class.solicitudinfo tiene este código:

public function addSolicitud($dia, $hora, $centro, $curso, $nombre, $apellido, $fechanacimiento, $poblacion, $codpostal, $nombretutor, $apellidostutor, $email, $movil, $conocen, $observaciones) {

        $sql = $this->db->prepare("INSERT INTO webla_solicitudinfo (DiaSolicitud, HoraSolicitud, Centro, CursoEscolar, Nombre, Apellidos, FechaNacimiento, 
        Poblacion, CodPostal, NombreTutor, ApellidosTutor, EmailContacto, MovilContacto, ComoConocen, Observaciones) VALUES (:dia, :hora, :centro, :cursoescolar, 
        :nombre, :apellidos, :fechanacimiento, :poblacion, :codpostal, :nombretutor, :apellidostutor, :emailcontacto, :movilcontacto, :comoconocen, :observaciones)");
        $sql->execute(array(':dia'=>$dia,':hora'=>$hora,':centro'=>$centro,':cursoescolar'=>$curso,':nombre'=>$nombre,':apellidos'=>$apellido,
                            ':fechanacimiento'=>$fechanacimiento,':poblacion'=>$poblacion,':codpostal'=>$codpostal,':nombretutor'=>$nombretutor,
                            ':apellidostutor'=>$apellidostutor,':emailcontacto'=>$email,':movilcontacto'=>$movil,':comoconocen'=>$conocen,
                            ':observaciones'=>$observaciones));
        return true;

    }

Quiero cambiar todo y hacerlo a través de AJAX, para que cuando envíen el formulario automáticamente vaya a la BBDD y si se ha insertado correctamente, te devuelva un alert que haré con el plugin sweetalert confirmando que se ha realizado correctamente la solicitud.

El problema con lo que tengo hecho hasta ahora (Funciona correctamente) es qué si recargas las página una vez hayas enviado el formulario, se vuelve a enviar ya que no se borra los datos del $_POST. Además de que si alguien me explicase como hacerlo con ajax, podría así entender el uso de AJAX y poder usarlo en los demás formularios y aplicaciones que estoy haciendo.

¿Alguien podría echarme un cable y explicarme como hacerlo o decirme alguna página que venga explicado como hacerlo?

Un saludo.

3
  • Charlie, me parece que, desafortunadamente tu pregunta es increiblemente amplia. La razon es que AJAX es realmente el concepto de como hacer una peticion asincrona a un servidor y no es como que un lenguaje o algo asi. Por eso, existe una forma diferente de hacer con Javascript, Jquery, AngularJS, Angular, etc. Es decir, existen muchisimas formas diferentes. Quizas si puedieras especificar en que forma quieres lograrlo y que has intentando hasta el momento, seria mas facil ayudarte. Commented el 21 sept. 2017 a las 18:16
  • @KennyBarrera Me interesaría hacerlo con jquery, que según me han comentado, es la forma más fácil si no me equivoco.
    – Charlie
    Commented el 21 sept. 2017 a las 18:19
  • No creo que exista una forma mas facil que otra, pero la sintaxis con JQuery ciertamente es sencilla. Te recomiendo este enlace, en donde podras aprender un poco mas. Despues has un intento y si algo falla puedes venir aqui a exponer tus dudas. Commented el 21 sept. 2017 a las 18:22

2 respuestas 2

1

Es importante que añades la librería de jQuery, sin él, no funciona, y a veces son pequeños despistes que vuelve loco a uno.

Si el envió de tu formulario lo haces mediante un <input type="submit" /> debes sustituirlo por un button.

Para obtener la respuesta AJAX, la vamos obtener en nuestra caja <div id="resultado-mi-formulario"></div>

Un posible ejemplo:

Formulario

<html>
<head>
    <!-- Importante la libería jQuery. -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>    
    <!-- AJAX. -->
    <script type="text/javascript">         
        $(document).ready(function() {              
            $(document).on('submit', '#mi_formulario', function() {   
                //Obtenemos datos.          
                var data = $(this).serialize();

                $.ajax({            
                    type : 'POST',
                    url  : 'archivoPHP.php',
                    data : data,
                    success :  function(data) {                 
                        $("#resultado-mi-formulario").html(data).fadeIn();
                    },
                    complete: function(){
                       setTimeout(function() {
                            $("#resultado-mi-formulario").fadeOut();
                       }, 15000);    
                    }
                });         
                return false;           
            });        
        });//End document

    </script>
</head>
<body>
    <form id="mi_formulario" method="POST">
       <input type="text" name="identificador1" />
       <!-- etc... -->
       <button type="submit">Guardar cambios</button>
    </form>
    <div id="resultado-mi-formulario"><!-- Respuesta AJAX --></div>
</body>
</html>

archivoPHP.php

Sigues con tu código PHP, lo único que debes cambiar es esta línea if (isset($_POST['solicitudinfo'])) { por if (isset($_POST)) {

Segunda respuesta

eliminar.js

$(document).ready(function() {
     //Boton eliminar.
     $(".eliminar").click(function(e) {

         e.preventDefault();
         //Variable con el valor del boton.
         var id = $(this).attr('data-id');   

          //Comprobar alerta ID en pantalla.
         //alert(id);

         //Ajax.
         $.post('eliminar.php', {
            Id:id
         },function(supr) {
            if (supr=='0') {          
               location.href="index.php";
            }
         }); 
    });
});

index.php (Boton eliminar)

En el atributo data-id deberás añadir el id a eliminar mediante PHP, en mi ejemplo lo pongo manualmente en 1.

<html>
<head>
   <!-- Importante la libería jQuery. -->
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
   <!-- Añado eliminar.js -->  
   <script type="text/javascript" src="eliminar.js"></script>
</head>
<body>
   <a class="eliminar" data-id="1">Eliminar</a>
</body>
</html>

eliminar.php

<?php
    if (isset($_POST['Id']) {

        //Obtienes el Id desde el boton.
        $id = $_POST['Id'];

        //Continuas con tu código, creas tu sentencia para eliminar la solicitud mediante su ID.

        //Respuesta ajax, va redirigirnos al index o donde une quiera.
        echo "0";

    }

?>
8
  • He usado este ejemplo y funciona perfectamente. Ahora pregunto, tengo un CRM hecho donde muestra todas las solicitudes de información enviadas y tengo botones para eliminar, editar, etc cada solicitud. Con este mismo código, ¿podría usarlo para borrar una solicitud, y automáticamente desaparecería del listado de solicitudes? ¿o para algo así habría que modificar el código?. Además... ¿Como haría con ajax para mandar datos a un modal de bootstrap?
    – Charlie
    Commented el 21 sept. 2017 a las 19:51
  • @CharlieClewer si, podrías crear dicho sistema de eliminar, editar mediante este ejemplo. Aparte de este ejemplo hay algunas otras formas, por ejemplo, crear dos botones diferentes una de editar y otra de eliminar utilizando data-id="id_solicitud" en cada botón como identificador. Sobre el modal, intenta a crear tu código, y cuando se te presenta algún error, vuelves con otro pregunta y tu código, así peleas un poco con el código y vas aprendiendo :) , Un saludo.
    – D.Bulten
    Commented el 21 sept. 2017 a las 20:24
  • 1
    en ello estoy, a ver como me sale! Muchas gracias tio
    – Charlie
    Commented el 21 sept. 2017 a las 20:28
  • Estoy intentando usar AJAX en vez de con un formulario, con un <a> ya que he visto que así también es posible hacerlo. ¿Qué tendría que editar en el código ajax para que funcione con un <a>? Además, he intentado poner el ajax en un archivo ajax.js en el assets para poner todo el ajax en ese archivo y tenermo algo más "organizado" pero tengo problema con las dependencias. Es decir, añadiendo el archivo ajax.js con el <script>, ¿tendría que poner las dependencías donde añado el archivo ajax, o dentro del archivo ajax? Tengo demasiado cacao mental con las dependencias...
    – Charlie
    Commented el 24 sept. 2017 a las 16:50
  • 1
    Vale, voy a crear una nueva pregunta con el tema de la datatable como me dices. Muchisimas gracias por todo!! un saludo
    – Charlie
    Commented el 24 sept. 2017 a las 19:08
0

Tu problema está claro, pero te digo lo que entiendo por las dudas así me corriges. Entiendo que deseas utilizar AJAX para enviar tu formulario de forma asíncrona. Si esto es así debes capturar el evento submit de tu formulario y realizar la petición por AJAX. Puedes hacer lo siguiente:

<form name="form" id="form-ajax" method="post">
   //aquí van tus campos
   <button type="submit">Guardar</button>
</form>

Observa que no coloqué el action en el formulario ya que mediante JQuery podemos capturar cuando se dispare el submit y realizar la petición. Existe otra forma de llamar una función javascript y realizar la petición pero te dejo este ejemplo que es bastante completo:

<form name="form" id="form-ajax" method="post">
   //aquí van tus campos
   <button type="submit">Guardar</button>
</form>

<script>
  $document.ready(fucntion(){
    $('#form-ajax).validate({
      rules: {
       centro: 'required',
       curso: 'required'
       //aquí agregarías las reglas de validación para los campos que desees
     },
     messages: {
       centro: {
         required: 'Campo Obligatorio'
        },
        PI_BSTNK: {
          required: 'Campo Obligatorio'
        }
     },
     errorElement: 'div', //aquí le dices que elemento contendrá el error
    errorPlacement: function (error, element) {
     //aquí agregas la funcionalidad para mostrar el mensaje de error
    },
    submitHandler: function (form) {
      //Si el formulario pasa las validaciones realizas la petición
       var formData = {
            'centro': $('input[name=centro]').val(),
            'curso': $('input[name=curso]').val()
            //aquí guardas todos los valores de los campos del formulario
          };
      $.ajax({
          type: 'POST',
          url: 'archivo.php' //este es el archivo que contiene tu código php
          data: formData,
          dataType: 'json',
          success: function (data) {
           //aquí vendrá la respuesta del archivo php
           if (data) {
             alert("Formulario enviado correctamente");
           }
          },
          error: function (error) {
           //Aquí capturas el error si existe
           alert(error);
          }
    });
  });
</script>

Para realizar esto deberías en tu archivo php devolver un json. Puedes leer sobre la función json_encode, te será mucho más fácil devolver toda la información en este formato.

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.