Deprecated: Function create_function() is deprecated in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/plugins/wp-automatic/wp-automatic.php on line 70
Tutorial – Enviar formulario con Ajax jquery y PHP | D4mations.com
  • Saturday , 24 October 2020

Tutorial – Enviar formulario con Ajax jquery y PHP

Code Canyon



En este ejemplo se muestra como realizar una petición Ajax mediante Jquery a un script PHP.

Original source

3d Ocean

Related Posts

35 Comments

  1. Terror X
    January 16, 2019 at 09:49

    Pero hay algo que no entiendo, cual seria la diferencia en usar AJAX para los formularios? Gracias

  2. ANGEL MORENO
    January 16, 2019 at 09:49

    Excelente el tutorial..solo una pregunta…en el archivo dame-datos.php el resultado siempre debe salir através de una instrucción "echo" para ser recibida por la variable "data" de la instrucción ajax? Espero me pedas ayudar.

  3. BFz!
    January 16, 2019 at 09:49

    Identar el código señores!!!

  4. Isaac Deyán
    January 16, 2019 at 09:49

    Yo tengo un problema, quisiera que si es posible. La comunidad aporte sus sugerencias. La situación es la siguiente: Al momento que intento recibir la variable "Nombre", a través de PHP. Desde el Localhost de Xampp, me muestra un (Notice), con la siguiente nomenclatura: "Notice: Undefined index: nombre in C:xampphtdocsajaxdame-datos.php on line 4", asumo que el error es consecuencia de no haber verificado la variable. Quisiera saber cual seria el procedimiento a seguir para esta situación, de ante mano; Gracias y muy buena forma de explicar al autor del vídeo y la comunidad en general

  5. Alastor Ifrit
    January 16, 2019 at 09:49

    ¡Excelente! Muchas gracias, es el primer comienzo para ver si logro validar recatpcha con ajax

  6. kalsmith22
    January 16, 2019 at 09:49

    Me sirvió mucho para otra cosa, una validación de recaptcha que estoy desarrollando, yo soy nulo en Javascript y jquery, pero este tuto me sirvió demasiado Gracias.

  7. Diego Linares
    January 16, 2019 at 09:49

    Muchas gracias muy buen video, corto sencillo y claro

  8. Jose R. Lopez J.
    January 16, 2019 at 09:49

    Al igual que muchos, gracias, solo tengo un poco menos de un mes en PHP y con tu ejemplo pude lograr mi cometido

  9. Alex cositah
    January 16, 2019 at 09:49

    Muy bueno, y por faena, es decir rápido como Me gusta!

  10. guillermo reyes
    January 16, 2019 at 09:49

    espero y puedan ayudarme, si esta bien escribir asi el ajax ?? bueno es que eh visto que otros le ponen el document ready function, en este ejemplo probe que poner eso no funciona pero es la sitaxis de siempre de jquery oh me equivoco

  11. Alberto Gentili
    January 16, 2019 at 09:49

    Manuel, genial tu tutorial me anduvo perfecto. La cuestion es que quisiera mostrar los resultados pero dentro de otra pagina del mismo php ( pagina del tipo data-role="page"). Es decir el form esta en data-role="page" id="pag1" y los datos los quiero en data-role="page" id="pag2".

  12. Carlos Vargas
    January 16, 2019 at 09:49

    Muy bien Manuel, esa si es una, muy buena instrucción, te felicito, seguire tus videos

  13. SIEGFRIED
    January 16, 2019 at 09:49

    Muy bueno gracias practico y muy bien explicado bueno para comenzar Ajax saludos

  14. Otoniel Garcia Camposano
    January 16, 2019 at 09:49

    BUEN TUTORIAL , MUESTRA LO BÁSICO DE MANERO SENCILLA Y ENTENDIBLE, SOLO QUE HACES DEMASIADOS RUIDOS CON EL TECLADO Y CON TU RESPIRACIÓN ES DESESPERANTE

  15. Taller Ekisus y NextMachine
    January 16, 2019 at 09:49

    Compadre exelente pero esque exelente tutorial no sabes cuantas horas e estado tratando de entender lo que acabas de explicar te felicito =) y gracias.

  16. luis alberto rodriguez almanzar
    January 16, 2019 at 09:49

    el video estuvo bueno, solo que tu voz, sonabas como sofocado y eso desconcentra pero despues todo lo demas estuvo bien

  17. Antonio Urbina
    January 16, 2019 at 09:49

    Es desesperante tu voz..

  18. Andres Maldonado
    January 16, 2019 at 09:49

    Muy bueno el turorial me ha funcionado a la perfección incluso pasando variables desde un bucle, pero no logro pasar los input file ?? , he intentando de varias formas y no me ha funcionado.  

  19. Adiel Isaí Palominos Fuentealba
    January 16, 2019 at 09:49

    muchas gracias profesor me sirvio de mucho, saludos

  20. Santiago Soriano
    January 16, 2019 at 09:49

    Hola, muy buen video , pero tengo un problema…
    Tengo un ciclo while donde me genera n formularios iguales, y necesito procesarlo con ajax y php,
    el problema es que los formularios son identicos y ajax necesita un identificador unico.
    y aunque diferencie el form agregandole un numero con php no se como recibir ese formulario en el js de ajax.

    Tienes alguna idea de como se hace?.

    Saludos.

  21. Alberto Hernández
    January 16, 2019 at 09:49

    Muy resumido el tuto, así me gustan! =) … rápidos, sencillos y concisos, con esto pude hacer un envío de mails asyncrono, muchas gracias!

  22. Yanet Ibañez
    January 16, 2019 at 09:49

    Excelente tutorial video, pero tengo el problema que no me muestra el mensaje de si existe o no el nombre del arreglo…

  23. italo mendoza
    January 16, 2019 at 09:49

    un pregunta me funciona pero tengo un input file y ese si no me lo envia para capturarlo con $_files

  24. Luis Davila
    January 16, 2019 at 09:49

    Hola amigo oye una pregunta como puedo validar estos radio button para que no me envié los formularios sin contestar ya que se utilizan los mismos radio button
    "<form name="form2" id = "forma2" action="crear_registro.php" method="post" onSubmit="return validacion()">
            <p>
               
             <?php
    for ($i=0;$i<10;$i++){

    $preguntas = mysql_query("SELECT * FROM preguntas WHERE identificador = '$cuestionario[$i]'", $link);
    $row = mysql_fetch_array ($preguntas);
    $identificador[$i] = $row['identificador'];
    $pregunta[$i] = $row['pregunta'];
    $opcion1[$i] = $row['opcion1'];
    $opcion2[$i] = $row['opcion2'];
    $opcion3[$i] = $row['opcion3'];
    $opcion4[$i] = $row['opcion4'];
    $opcion5[$i] = $row['opcion5'];
    $respuesta[$i] = $row['respuesta'];
    $grupo = array('p1', 'p2', 'p3', 'p4', 'p5', 'p6', 'p7', 'p8', 'p9', 'p10');
    }
    for ($i=0;$i<10;$i++) {
    //echo "<fieldset>";
    echo "<label for"."pregunta".">".$pregunta[$i]."</label><br/>"."<br>";
    echo "<input type="."radio"." name=".$grupo[$i]."value=".$opcion1[$i]." >".$opcion1[$i]."<br>";
    echo "<input type="."radio"." name=".$grupo[$i]."value=".$opcion2[$i]." >".$opcion2[$i]."<br>";
    echo "<input type="."radio"." name=".$grupo[$i]."value=".$opcion3[$i]." >".$opcion3[$i]."<br>";
    echo "<input type="."radio"." name=".$grupo[$i]."value=".$opcion4[$i]." >".$opcion4[$i]."<br>";
    echo "<input type="."radio"." name=".$grupo[$i]."value=".$opcion5[$i]." >".$opcion5[$i]."<br>";
    echo "<input type="."radio"." name=".$grupo[$i]."value="."NO SE"." checked>NO SE"."<br><br>";
    //echo "</fieldset>";
        }
    ?>
             </p>
            <p>
             <input id="guardar" type="submit" name="guardar" value="Guardar"/>
           </p>
            </form>"

    ya que cada radio button tiene name".$grupo[$i]." que cambia, es la variable en php 
    me puedes ayudar??

  25. Rafaé M.
    January 16, 2019 at 09:49

    El tutorial está de lujo, muy claro, pero tengo un problema, que resulta que no me hace el resultado que a tí, es decir, escribirte debajo del form, directamente se me va a la página .php. 

  26. Alejandro Vales
    January 16, 2019 at 09:49

    Muchas gracias!! la verdad esque no viene nada mal que de vez en cuando te expliquen las cosas con palabra y con idea.. que madre mia.. hay cada uno que pone unos codigos x ahi que ni te cuento… brebe escueto y genial!! gracias! 😉

  27. Eyter Higuera
    January 16, 2019 at 09:49

    hola manuel, una pregunta como haces para ingresar por ejemplo dentro de los campos de texto por ejemplo en el campo nombre que vaya "nombre" adentro, para el correo que vaya "micorreo@gmail.com", para el campo textarea "maximo 200 caracteres" y que una vez se ponga el cursor adentro desaparezca lo que se tiene adentro de los campos?

  28. ElCuadranteCorrecto
    January 16, 2019 at 09:49

    De los pocos videos que se dan a entender claramente, Muchas gracias, saludos..

  29. Daniel Ramirez
    January 16, 2019 at 09:49

    Buen video… solo que me estrso FULL tener que escuchar la recpiracion en todo momento jajaja, pero pues en general explica correctamente la forma basica de el funcionamiento de AJAX al recuperar los datos de un php

  30. Eyter Higuera
    January 16, 2019 at 09:49

    hola manuel, ahora tengo un sistema de comentarios con respuestas donde tengo un formulario para enviar los comentarios y tengo un formulario con un ID variable para cada respuesta la cual se va a mostrar una vez se le de click a un boton "responder" que se encuentra en un comentario, entonces estoy buscando la manera de como hacer el proceso de envio de variables con ajax y jquery pero con un ID variable en el form del formulario, el id del formulario para los comentarios es form_ajax y el id del formulario oculto es id="form-<?php echo $com2[$index]["id_comentario"];?>" en fin para el envio de las variables del form de comentario es 

    //este ejemplo es para enviarlo a un formulario con un solo ID, como se haria para transformar esto para que se envie para varios formularios con distintos ID? despues de este codigo te puse el formulario oculto que tengo para las respuestas

    $(function()
        {
             $("#btn_ajax").click(function(){
     var url = "form_ajax_jquery/ajax.php"; // El script a dónde se realizará la petición.
        $.ajax({
               type: "POST",
               url: url,
               data: $("#form_ajax").serialize(), // Adjuntar los campos del formulario enviado.
               success: function(data)
               {
                   $("#e_nombre").html('');
                   $("#e_email").html('');
                    $("#e_texto").html('');
                    $("#e_captcha").html('');
                    
                   $("#mensaje").html(data); // Mostrar la respuestas del script PHP.
               }
              
             });

        return false; // Evitar ejecutar el submit del formulario.
     });
        
         $("#actualizar_captcha").on("click", function(){
         document.location.reload();
            });
        });

    y el formulario que tengo con ID variables es

     <form id="form-<?php echo $com2[$index]["id_comentario"];?>"  action="<?php echo $_SERVER["PHP_SELF"] ?>" method="post">
                     Nombre:<input type="text" name="nom"/>
                     <div id="e_nombre"></div>
                     <br/><br/>
                     Correo:<input type="text" name="correo"/>
                     <div id="e_email"></div>
                     <br/><br/>
                     Web:<input type="text" name="web" id="web"/>
                     <br/><br/>
                    Mensaje:<br/><textarea name="mensaje" cols="40" rows="10" onKeyDown="contador(this.form.mensaje,this.form.remLen,2000);"  onKeyUp="contador(this.form.mensaje,this.form.remLen,2000);" maxlength="2000"></textarea>
                    <div id="e_texto"></div>
                    <br/><br/>
                     
                     <br/>
             Le quedan todavía<input type="text" name="remLen" size="3" maxlength="4" value="2000" readonly>
                    <br/><br/>
                     
                     <br/>
           
                    
                     
                      <input type="hidden" name="id_padre" value="<?php echo $com2[$index]["id_comentario"];?>"/>
                     <input type="hidden" name="id_noticia" value="<?php echo $_GET['id']; ?>"/>
                     <input type="hidden" name="url" value="<?php echo $url; ?>"/>
                     <input type="hidden" name="enviar" value="si" />
                     
                     <br><br>
                <img src="form_ajax_jquery/captcha.php"><button id="actualizar_captcha" type="button">Actualizar</button>
                                <br />
                                <input type="text" name="captcha">
                                
                                 <div id="mensaje"></div>
                                <br /><br />
                     <input type="hidden" name="ajax">
                     <input type="button"  value="Enviar" class="SubmitBtn">
                     </form>

  31. original sample
    January 16, 2019 at 09:49

    manuel muy bueno el videotutorial…tengo un problema, me funciona tu codigo bien salvo que lo que escribo en el campo del formulario al enviarlo no se borra… que tengo que modificar?? gracias

  32. Pedro Garcia
    January 16, 2019 at 09:49

    muy bueno el post. El tema es que a mi me serviria si le paso la informacion de todo el formulario a un archivo php. Podrias ayudarme. Muchas gracias de antemano.
    Este el codigo en javascript al pulsar el boton del formulario:

    //llamada al boton
    $( "button" ).click(function() {
      alert( "Valid: " + form.valid() ); //alerta para mostrar si es correcto o no el formulario

    //mandar los datos a checkemail.php
     var url="checkemail.php";
    $.ajax({
    type:"post",
    url:url,
    data:$("#myform").serialize(), //recogemos los datos
    success:function(data){}

    return false;
    });
    }

    Y ahora como mandaria los datos mediante post a checkemail.php. Por ahora lo tengo asi solo para recoger el email:

    <?PHP
    $email = addcslashes(htmlspecialchars($_post['email']));
    echo $email;
    ?>

    Muchas de antemano!!

  33. velazquezespiral
    January 16, 2019 at 09:49

    EXCELENTE

  34. Manuel J. Dávila
    January 16, 2019 at 09:49

    Gracias, me alegra de que os sirva de ayuda, un saludo.

  35. Jhonatan Morales
    January 16, 2019 at 09:49

    Al fin un tutorial de AJAX/jquery que entiendo. buen Video 🙂

Leave A Comment

You must be logged in to post a comment.