D4mations.com

Tutorial – Enviar formulario con Ajax jquery y PHP



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

Original source

d4mer

, , , , , , , ,

35 responses to “Tutorial – Enviar formulario con Ajax jquery y PHP”

  2. 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.

  4. 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

  10. 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. 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".

  20. 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.

  24. 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. 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. 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. 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?

  29. 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. 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>

  32. 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!!

Leave a Reply