Formulario con Ajax y jQuery

Formulario con Ajax y jQuery

Qué bonito queda un formulario que envía sus datos y muestra un mensaje de éxito (o fracaso) sin recargar la página. Con efectos, con transiciones, desapareciendo, moviéndose… Y qué difícil es programarlo. ¿Difícil? De eso nada. Hoy vamos a ver cómo hacer un formulario como el que acabamos de describir.

Ingredientes:

  • [def]PHP[/def]/HTML. Si puede ser HTML 5 mejor, pero recordemos que no todos los navegadores lo admiten.
  • Ajax, bien bañado en jQuery
  • Javascript
  • Una pizca de CSS (aunque nosotros no vamos a usarla, a vosotros os vendrá genial)
  • Imaginación

Nosotros vamos a hacerlo muy básico. Vuestra imaginación y las herramientas que nos proporciona [def]jQuery[/def] harán el resto.

¡Ojo! Si buscamos usar Ajax en plugins para WordPress, hace poquito expliqué cómo hacerlo. Podéis seguir este tutorial, pero es mucho más sencillo usar las funciones de jQuery y Ajax del anterior.

Paso a paso

1. Creamos el formulario en html.

<!DOCTYPE html>
<html>
 <head>
 <title>Formulario con Ajax</title>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 </head>
 <body>
        <div id="formulario">
            <form method="post" id="formdata">
                <label for="nombre">Nombre: </label><input type="text" name="nombre" id="nombre" required="required"></br>
                <label for="apellidos">Apellidos: </label><input type="text" name="apellidos" id="apellidos" required="required"></br>
                <label for="direccion">Dirección: </label><input type="text" name="direccion" id="direccion" required="required"></br>
                Género: <input type="radio" name="genero" id="hombre" checked="checked"><label for="hombre"> Hombre - </label><input type="radio" name="genero" id="mujer"><label for="mujer"> Mujer</label>
                <label for="mayor">Es mayor de 18 años: </label><input type="checkbox" name="mayor" id="mayor" required="required">
                <input type="button" id="botonenviar" value="Enviar">
            </form>
        </div>
        <div id="exito" style="display:none">
            Sus datos han sido recibidos con éxito.
        </div>
        <div id="fracaso" style="display:none">
            Se ha producido un error durante el envío de datos.
        </div>
 </body>
</html>

Venga, un par de aclaraciones a tanto código…

  • Hemos añadido en el head la librería jQuery directamente de las librerías que Google pone a nuestra disposición de forma libre. Ventaja: no te tienes que descargar jQuery. Desventaja: ¿Y si un dia Google fallase? ¿Acaso en tu casa no se va la luz? Quiero decir que no siempre es bueno depender de servicios externos que no puedes controlar directamente. Si Google falla (cosa rara, sí, pero posible), tu página también. En nuestro caso, lo haremos así que para el ejemplo nos sirve perfectamente. (¡Pero el debate sigue aquí, por si quieres leerlo y participar!)
  • ¿Os habéis fijado que no hemos establecido el valor para action en el formulario? Es el que nos debe redirigir a otra página, si esto fuera un formulario normal y corriente. No nos hace falta.
  • Los campos del formulario tienen establecido que required=»required». Esto, en HTML 5, obliga al usuario a rellenar ese campo. Problema: No todos los navegadores soportan esto. Si queremos hacer campos obligatorios, debemos controlarlos con javascript.
  • Hemos creado también dos opciones con radiobuttons y un checkbox, para que veamos su comportamiento en jQuery, que nunca está de más. También son obligatorios… ¿Cómo establecemos obligatorio sólo uno de los dos? Fácil: Establezcamos uno por defecto con checked=»checked», y así, siempre se enviará, al http://www.phpaide.com/ menos, el valor por defecto.
  • Esto es interesante: no hemos creado el usual input=»submit» que haría procesar el formulario. En su lugar hemos puesto un input=»button», un botón simple que no tiene ninguna acción asociada hasta que lo hagamos con jQuery. Podríamos haber puesto un submit si luego con jQuery controlábamos la acción submit… pero no es necesario complicarse tanto en un ejemplo tan simple.
  • Como podéis observar, existen dos divs, de ids «éxito» y «fracaso» respectivamente, con display: none. Todo mago tiene sus trucos y este es el nuestro: Los mensajes que queremos mostrar ya están «ahí». Con Jquery luego los haremos aparecer según nuestra petición haya sido un éxito o no.

 

 

2. La magia de jQuery

Llega el momento de añadir el jQuery. ¿Dónde? Pues unos os dirán que en el <head>, otros os dirán que en el <body>. La respuesta correcta es que nos vale en ambos sitios, el código JavaScript se puede insertar tanto en el <head> como en el <body>, aunque muchos recomiendan tenerlo en el <head> para tenerlo localizado. Yo, por ejemplo, siempre suelo escribirlo al final del código, justo antes de cerrar el </body>. Como nos da exactamente igual, yo pondré solo el código JavaScript, y ya cada uno que lo copie donde quiera (dentro de las etiquetas <script type=»text/javascript»></script>). Esta vez lo haré por partes.

Primero con la función opcional de validar el formulario. Se trata de una función que recorrerá todos los campos uno por uno, y si uno no está relleno, devolverá false y mostrará un mensaje.

function validaForm(){
    // Campos de texto
    if($("#nombre").val() == ""){
        alert("El campo Nombre no puede estar vacío.");
        $("#nombre").focus();       // Esta función coloca el foco de escritura del usuario en el campo Nombre directamente.
        return false;
    }
    if($("#apellidos").val() == ""){
        alert("El campo Apellidos no puede estar vacío.");
        $("#apellidos").focus();
        return false;
    }
    if($("#direccion").val() == ""){
        alert("El campo Dirección no puede estar vacío.");
        $("#direccion").focus();
        return false;
    }

    // Checkbox
    if(!$("#mayor").is(":checked")){
        alert("Debe confirmar que es mayor de 18 años.");
        return false;
    }

    return true; // Si todo está correcto
}

Simple, ¿No? Vamos con la parte más interesante del tema que nos ocupa…

$(document).ready( function() { // Esta parte del código se ejecutará automáticamente cuando la página esté lista.
 $("#botonenviar").click( function() { // Con esto establecemos la acción por defecto de nuestro botón de enviar.
 if(validaForm()){ // Primero validará el formulario.
 $.post("enviar.php",$("#formdata").serialize(),function(res){

Vale, vale, un momento, que aquí hay mucha tela que cortar.

$(document).ready se llama automáticamente cuando la web (document) está lista (ready). $(«#botonenviar»).click asocia la función que contiene como acción para el botón Enviar del formulario. Recordemos que, en jQuery, para acceder a un elemento, podemos hacerlo por id ($(«#id»), usamos # antes de la id del elemento) o por clase ($(«.class»), usamos un punto), igual que en CSS.

Seguidamente, valida el formulario, y si este devuelve true, se llama a la función $.post:

  • $.post es la función que enviará, vía $_POST, la información a la página «enviar.php» para que ser procesada.
  • «enviar.php», ya lo hemos dicho, es la página que procesa la información que recibe.
  • $(«#formdata»).serialize() prepara los datos para que la página «enviar.php» los reciba como valores de $_POST.
  • Finalmente, abrimos una función para ejecutar cuando el proceso de datos termine, con el parámetro «res» que viene a ser el resultado.
  • En nuestro caso, el resultado va a ser un 1 (éxito) o un 0 (fallo).

Dicho esto, pongo el código completo:

$(document).ready( function() {   // Esta parte del código se ejecutará automáticamente cuando la página esté lista.
    $("#botonenviar").click( function() {     // Con esto establecemos la acción por defecto de nuestro botón de enviar.
        if(validaForm()){                               // Primero validará el formulario.
            $.post("enviar.php",$("#formdata").serialize(),function(res){
                $("#formulario").fadeOut("slow");   // Hacemos desaparecer el div "formulario" con un efecto fadeOut lento.
                if(res == 1){
                    $("#exito").delay(500).fadeIn("slow");      // Si hemos tenido éxito, hacemos aparecer el div "exito" con un efecto fadeIn lento tras un delay de 0,5 segundos.
                } else {
                    $("#fracaso").delay(500).fadeIn("slow");    // Si no, lo mismo, pero haremos aparecer el div "fracaso"
                }
            });
        }
    });    
});

Para que funcione con este ejemplo, el archivo enviar.php lo tenéis que hacer de forma que:

  • No devuelva mensajes de texto, solo 1/0 dependiendo de si el proceso ha resultado exitoso o erróneo. Esto es porque lo hemos hecho de esta forma, pero podéis hacer que devuelva mensajes perfectamente y luego mostrarlos con alert, o insertarlos en algún otro sitio vía jQuery… son miles las posibilidades
  • Los datos que hemos pasado con el formulario los ha recibido en $_POST. Es decir, estarán en $_POST[«nombre»], $_POST[«apellidos»]…
  • Si lo que queréis es probarlo, haced que ese formulario sólo tenga una línea: <?php echo(«1»); ?> o <?php echo(«0»); ?>, según la respuesta que queráis ver.

No es necesario que yo os escriba el archivo «enviar.php», puesto que sois vosotros los que sabéis qué vais a hacer con los datos del formulario: guardarlo en base de datos, enviarlos por email… Está en vosotros y vuestra imaginación, pero si necesitáis alguna ayuda, no dudéis en pedírnosla.

¡Un saludo, y hasta la próxima!

«La imaginación es más importante que el conocimiento.
El conocimiento es limitado, mientras que la imaginación no»

     — Albert Einstein

 

 

¿Te ha gustado el artículo?
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (52 votos, promedio: 3,85 sobre 5)
Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes


Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada.

75 Comentarios

Jaime Rojas

Gracias ruben por la ayuda.

Felix

Excelente artículo, estoy modificando mi web y me ha sido de mucha utilidad

Julio

Gracias

Juan

Es Exelente la explicacion y el codigo que se tiene que insertar en nuestros archivos, pero pienso que ademas tendriamos que tener un ejemplo que podamos visualizar para ver el funcionamiento e ir agregando mas funciones segun sea el caso de uso. Gracias!

Jadilyn Maldonado

Buen Día chic@s disculpen la molestia escribo para ver si alguien podría ayudarme ya que llevo varios días pegada en el siguiente asunto... Estoy haciendo un mini sistema en donde se seleccionan determinados usuarios traidos de base de datos segun una busqueda determinada mediante un checkbox; el problema es que quiero saber como hago para capturar los datos obtenidos en ese check que hice con query y poderlos imprimir o visualizar en un archivo php; yo se que en el javascript muestro los valores con una alert y todo fino el rollo entra en imprimir esos valores en mi php para poder capturarlo y proceder a realizar un update.

emilio

Hola muy bueno, estoy usando el ejemplo para enviar un formulario para ejecutar un consulta, y funciona perfecto!, ahora quería ir más allá. Y si quisiera que alguno de los campos fuese vacío? yo estoy enviando para después recoger por POST varios campos:

var data = '&country='+$('#country').val()+'&school='+$('#school').val()+'&specie='+$('#specie').val()+'&crono='+$('#crono').val();
los recojo
$pais = $_POST['country'];
$pais = str_replace("#",",",$pais);
$colegio = $_POST['school'];
$colegio = str_replace("#",",",$colegio);
$especie = $_POST['specie'];
$especie = str_replace("#",",",$especie);
$estacion = $_POST['crono'];
$estacion = str_replace("#",",",$estacion);
y hago la consulta a una vista de postgres
$query = "Select id, idspecie, name_en, description,
		idseason, season_en, season_es, season_li, season_de,
		idschool, name
		FROM vw_observa
		where idcountry in (".ltrim($pais,',').")
		and idschool in (".ltrim($colegio,',').")
		and idspecie in (".ltrim($especie,',').")
and  idseason in (".ltrim($estacion,',').")
ORDER BY idspecie";
Y si sólo quisiera el idcountry y el idschool? o idcountry, idschool e idseason? esos valores deben ir vacíos en data?

Javier Lenis

hola buen dia por favor ayuda tengo que pasar variables de unos input para que sean recibidos por ajax y poder hacer una consulta en sql esto es lo que tengo   cabe anotar que soy muy nuevo en esto <script> $(document).ready(function() { el problema esta aqui como hago para recibir los datos de los input y poder enviarlos por medio de ajax a la consulta que esta en editinplace.php /* OBTENEMOS TABLA */ $.ajax({ type: "GET", url: "editinplace.php?tabla=1" }) .done(function(json) { json = $.parseJSON(json) for(var i=0;i<json.length;i++) { $('.editinplace').append( "<tr><td class='id'>"+json[i].id+"</td><td class='cedula'>"+json[i].cedula+ "</td><center><td class='nombre'>"+json[i].nombre+ "</td><td class='apellido'>"+json[i].apellido+ "</td><td class='ciudad'>"+json[i].ciudad+ "</td><td class='carpeta'><span>"+json[i].carpeta+ "</td><td class='fecha'><span>"+json[i].fecha+ "</td><td class='hora_inicial'>"+json[i].hora_inicial+ "</td><td class='hora_final'>"+json[i].hora_final+ "</td><td class='hed'>"+json[i].hed+ "</td><td class='hen'>"+json[i].hen+ "</td><td class='rn'>"+json[i].rn+ "</td><td class='hefd'>"+json[i].hefd+ "</td><td class='hefn'>"+json[i].hefn+ "</td><td class='rf'>"+json[i].rf+ "</span></td><td class='editable' data-campo='estado'><span>"+json[i].estado+ "</span></td></tr>"); } }); var td,campo,valor,id; $(document).on("click","td.editable span",function(e) { e.preventDefault(); $("td:not(.id)").removeClass("editable"); td=$(this).closest("td"); campo=$(this).closest("td").data("campo"); valor=$(this).text(); id=$(this).closest("tr").find(".id").text(); td.text("").html("<input type='text' name='"+campo+"' value='"+valor+"'><a class='enlace guardar' href='#'>Guardar</a><a class='enlace cancelar' href='#'>Cancelar</a>"); }); $(document).on("click",".cancelar",function(e) { e.preventDefault(); td.html("<span>"+valor+"</span>"); $("td:not(.id)").addClass("editable"); }); $(document).on("click",".guardar",function(e) { $(".mensaje").html("<img src='images/loading.gif'>"); e.preventDefault(); nuevovalor=$(this).closest("td").find("input").val(); if(nuevovalor.trim()!="") { $.ajax({ type: "POST", url: "editinplace.php", data: { campo: campo, valor: nuevovalor, id:id } }) .done(function( msg ) { $(".mensaje").html(msg); td.html("<span>"+nuevovalor+"</span>"); $("td:not(.id)").addClass("editable"); setTimeout(function() {$('.ok,.ko').fadeOut('fast');}, 1000); }); } else $(".mensaje").html("<p class='ko'>Debes ingresar un valor</p>"); }); }); </script>   esto es lo que tengo en la pagina de editinplace.php   <?php conexion a la base   if (isset($_POST) && count($_POST)>0) { if ($db->connect_errno) { die ("<span class='ko'>Fallo al conectar a MySQL: (" . $db->connect_errno . ") " . $db->connect_error."</span>"); } else { $query=$db->query("update horas_extras set ".$_POST["campo"]."='".$_POST["valor"]."' WHERE id='".intval($_POST["id"])."' limit 1"); if ($query) echo "<span class='ok'>Valores modificados correctamente.</span>"; else echo "<span class='ko'>".$db->error."</span>"; } } if (isset($_GET) && count($_GET)>0) { if ($db->connect_errno) { die ("<span class='ko'>Fallo al conectar a MySQL: (" . $db->connect_errno . ") " . $db->connect_error."</span>"); } else { $query=$db->query("SELECT * FROM horas_extras"); $datos=array(); while ($usuarios=$query->fetch_array()) { $datos[]=array( "id"=>$usuarios["id"], "cedula"=>$usuarios["cedula"], "nombre"=>$usuarios["nombre"], "apellido"=>$usuarios["apellido"], "ciudad"=>$usuarios["ciudad"], "carpeta"=>$usuarios["carpeta"], "fecha"=>$usuarios["fecha"], "hora_inicial"=>$usuarios["hora_inicial"], "hora_final"=>$usuarios["hora_final"], "hed"=>$usuarios["hed"], "hen"=>$usuarios["hen"], "rn"=>$usuarios["rn"], "hefd"=>$usuarios["hefd"], "hefn"=>$usuarios["hefn"], "rf"=>$usuarios["rf"], "estado"=>$usuarios["estado"] ); } echo json_encode($datos); } } ?>   agradezco su colaboracion y explicacion    

Jano Bass

Los <div> pueden estar ocultos <div id="error" hidden="true"> y luego lo puedes mostrar con: $("#error").show(); o volver a esconder con $("#error").hidden();

Jano Bass

Claro Luis, usas las mismas variables que en el archivo de proceso de datos, por ejemplo, éste es mi php de proceso:

<?php
$Para = "tucorreo@server.com";
$Asunto = "Contacto via web.";
$Header = "From: paginaweb@server.com"."rn";
$Header .= "Reply-To: ".$_POST['Email']."rn";
$Header .= "Content-type: text/html; charset=utf-8";

$Mensaje = "Usuario: ".$_POST['Nombre']."n";
$Mensaje .="Fono: ".$_POST['Fono']."n";
$Mensaje .="Email: ".$_POST['Email']."n";
$Mensaje .="Comentó lo siguiente:n".$_POST['Mensaje'];
$Mensaje .="---------------------------------------------n";

mail($Para, $Asunto, $Mensaje, $Header);
?>
Entonces, si juegas con los datos, podrías hacer a continuación otro envío con los datos del remitente, o sea:
$Para = $_POST['Email'];
$Asunto = "Contacto web...";
$Mensaje = "Gracias por comunicarse con nosotros...";
$Header = "From: paginaweb@server.com"."rn";
$Header .= "Reply-To: tucorreo@server.comrn";
$Header .= "Content-type: text/html; charset=utf-8";

mail($Para, $Asunto, $Mensaje, $Header);

Slash

Este es el codigo jquery ------------------------- $(document).ready( function() { // Esta parte del código se ejecutará automáticamente cuando la página esté lista. $("#Guardar").click( function() { // Con esto establecemos la acción por defecto de nuestro botón de enviar. if(validarForm()){ // Primero validará el formulario. $.post("enviar.php",$("#Impresion").serialize(),function(res){ $("#contenedor").fadeOut("slow"); // Hacemos desaparecer el div "contenedor" con un efecto fadeOut lento. if(res === 1){ $("#exito").delay(500).fadeIn("slow"); // Si hemos tenido éxito, hacemos aparecer el div "exito" con un efecto fadeIn lento tras un delay de 0,5 segundos. } else { $("#fracaso").delay(500).fadeIn("slow"); // Si no, lo mismo, pero haremos aparecer el div "fracaso" } }); } }); }); script enviar.php //yo trabajo con clases POO ------------------------------------------ Conectar(); $objImp = new Defectuosos(); $objImp->nuevo_defectuoso(); ----------------------------------- class defectuoso.php ----------------------------------- objDb = new Database(); } public function nuevo_defectuoso() { //En esta seccion insertamos los datos $consulta = "INSERT INTO impresion VALUES('','" . $_POST["Lote"] . "', '" . $_POST['Articulo'] ."')"; $this->objDb->insert($consulta); //mi pregunta es ¿como mando a imprimir desde aqui el cero y el uno como resultado para que ajax lo reciba? //intenté esto pero no me funcionó if ($consulta '0') { //Confirmación mensaje Ok echo(1); }else{ //Error en el envió echo(0); } }

Slash

Amigo como imprimo el resultado en el script enviar.php para que ajax me de la respuesta que es, esto debido a que siempre me sale que hubo un error al enviar los datos y cuando verifico en la base de datos si quedaron registrados. Urgente!!! Gracias.

Rubén

Gracias a tí por visitarnos :D

jose

gracias hermano me sirvio

Luis

Intenté hacerlo sin embargo no se ejecuta. ¿Qué puede ser?

jok

si por ejemplo tengo el formulario Nombre: lo que quiero intentar hacer es captar la cadena nombre que seria el nombre compelto y dividirla en 3 partes mostrando el reslutado en cada uno de los input por medio del value

patricio

Amigo, nunca esta demas dejar los archivos comprimidos en un rar para su descarga. De esta manera nos aseguramos de estudiar algo que esta funcionando y no perdemos tiempo en tratar de armar los pedazos de codigo que repartiste en la entrada. Lo digo sin menospreciar el hecho de que te tomaste el tiempo para explicarnos este tema, pero como dije, siempre es bueno complementar un post con un archivo de descarga.

tecnologo

necesito también obtener el id de esa fila para realizar un update en la BD

tecnologo

Hola, por favor según tu opinión puedo usar esto dentro de una tabla PHP generada de una consulta? es decir dentro de una dashboard, grilla muestro unos datos, estos datos deben de ser editables, cajas de texto en las filas de la tabla lo que quiero es cargar un botón por fila y cuando realice algún cambio en alguna fila "caja de texto" pueda actualizar la info con el button sin recargar la pagina! .

luigi

ya pude!!! $("#exito").append(res); imprime la informacion de la consulta. $var = $_POST['curp']; <--- no estaba usando de forma correcta las comillas! $query = mssql_query("SELECT * FROM SOLICITUD_ACTIVOS_2010 WHERE ID_SOLICITUD = $var");

luigi

perdon! imprime la informacion correcta, pero mi duda es sobre como comparo mi query con una variable ?

luigi

Ayuda amigo! yo solo ejecuto el boton submit y hago una conexion a una tabla, el nombre que busco en la tabla es "Luis" y existe, pero me aparece el  mensaje siguiente : "Se ha producido un error durante el envío de datos." por que puede ser? y si quiero aparte imprimir los resultados de ese registro como el apellido por ejemplo, como lo muestro en el div?   ayudame please! agradeceria mucho tu respuesta.   ----- mi html ---- <html> <head> <title>Formulario con Ajax</title> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script type="text/javascript"> $(document).ready( function() { $("#botonenviar").click( function() { if(validaForm()){ // Primero validará el formulario. $.post("enviar.php",$("#formdata").serialize(),function(res){ $("#formulario").fadeOut("slow"); if(res == 1){ $("#exito").delay(500).fadeIn("slow"); } else { $("#fracaso").delay(500).fadeIn("slow"); } }); } }); }); </script> </head> <body> <div id="formulario"> <form method="post" id="formdata"> <input type="button" id="botonenviar" value="Enviar"> </form> </div> <div id="exito" style="display:none">Sus datos han sido recibidos con éxito.</div> <div id="fracaso" style="display:none"> Se ha producido un error durante el envío de datos.</div> </body> </html>   ----- mi php enviar.php ----   <?php $link = @mysql_connect('localhost','root','') or die ('Ha fallado la conexión: '.mysql_error()); @mysql_select_db('usuarios', $link) or die ('Error al seleccionar la Base de Datos: '.mysql_error()); $noombre = "Luis"; $query = "SELECT * FROM usuarios where nombre = '$noombre'"; $result = mysql_query($query); if (mysql_num_rows($result) == 0) { //Confirmación mensaje Ok echo(“1″); }else{ //Error en el envió echo(“0″); } mysql_free_result($result); mysql_close($link); ?>  

alex

Perdona y como de haría una validación de un input de tipo type="radio"??????.

David

Hola, lo primero es agradecer tus conocimientos y compartirlos.  Mi duda es que se supone que lo he hecho todo bien al insertar este formulario en la web. Al enviar me sale el mensaje verde diciendo que se ha enviado correctamente pero no me llega dicho mensaje. (Estoy probando desde la misma web ya subida al servidor). (llevo 20 minutos esperando a ver si llega.) Gracias por tu tiempo!. :)

Jorge

Hola! Antes que anda mil gracias por tomarte el tiempo en realizar este tutorial que sirve de ayuda enooormemente. Quisiera preguntarte un detalle, yo tengo mi hoja php, pero no se como hacer para que el PHP devuelva un 1 o un 0 para que pueda ejecutarse la transparencia y activacion del DIV exito (o fracaso). Espero que me puedas ayudar te agradeceria muchisimo. Mi codigo PHP es el siguiente: <?php $remitente = $_POST['remitente']; $destinatario = $_POST['destinatario']; $destino = $_POST['destino']; $titulo = "$remitente te siguere ver el siguiente proyecto"; $comentarios = $_POST['comentarios']; $destino= $_POST['destino']; $proyecto= $_POST['proyecto']; $webproyecto= $_POST['webproyecto']; $datos.="Hola $destinatario! $remitente te recomienda nuestro proyecto: $proyecto. Puedes entrar al siguente enlace para obtener información que te podría ser util: $webproyecto "; $datos.=" nComentarios: $comentarios"; $cabeceras .= 'From: La Venturosa <jorge@interandina.pe>' . "rn"; mail($destino, $titulo, $datos,$cabeceras); ; ?>

Landa

Hola que tal.   Tan cerca y tan lejos de lo que he estado buscando, pues este tutorial me sirve  parte para lo que ando buscando aunque soy inexperto en AJAX y JS y en segunda, no entiendo bien cómo con AJAX puedas llamar a una página que contiene datos de PHP y que te regrese los valores de la consulta. Tengo 3 páginas: 1. Donde elijo el usuario 2.Donde me muestra su ID, Nombre y un formulario donde están varios checkbox prendidos o apagados dependiendo del valor que se consulta en la DB 3.Cada uno de los formularios tiene su botón para cambiar los datos de los checkbox pero se tiene que regresar a la primera página para hacer los distintos cambios.   Lo que busco es un pequeño ejemplo de como hacer todo esto en una sola página y que al momento de cambiar de usuario, los checkbox se vayan cambiando dependiendo a los datos que se tienen en la DB. Espero me hayan entendido y si me pueden ayudar sería un gran alivio pues quiero resolver esa duda que tengo. Muchas gracias!

JoseLuis

Muy buen tema, me sirvio de mucho saludos.

Marlene

Gracias por tutorial!! He buscado como hacer esto por un laaaaargo tiempo! El mensaje de error me funciona perfecto! cuando no escribo un mail correcto, muestra el mensaje de envio incorrecto, pero al contrario de escribir bien todos los campos, no muestra "mensaje enviado" ni mucho menos envia el mail. Lo he probado sin este pluying de jquery. sólo el php y el html y envia correctamente el formulario a mi casilla. 1º Inserte la libreria jquery 2º hice mi formulario html: <div id="formulario"> <form action="contactoprueba.php" class="contact_form" method="post" id="formdata"> <ul> <li><label for="nombre">Nombre:</label> <input id="nombre" name="nombre" placeholder="Nombre y apellido" required="" type="text" /></li> <li><label for="email">Email:</label> <input name="email" placeholder="tuemail@mail.com" required="" type="email" /></li> <li><label for="asunto">T&iacute;tulo</label> <input name="asunto" placeholder="PilatesLife" required="" type="text" /></li> <li><label for="mensaje">Mensaje:</label><textarea cols="40" id="mensaje" name="mensaje" placeholder="Escribe tu mensaje aquí" required="" rows="6"></textarea></li> <li><button class="submit" type="submit" id="botonenviar">Enviar</button></li> </ul> </form> </div> <div id="exito" style="display:none">Sus datos han sido recibidos con éxito. </div> <div id="fracaso" style="display:none"> Se ha producido un error durante el envío de datos.</div> Con los respectivos script que nos diste :) 3º El php : <?php $nombre = addslashes($_POST['nombre']); $email = addslashes($_POST['email']); $asunto = addslashes($_POST['asunto']); $mensaje = addslashes($_POST['mensaje']); //Mensaje de contacto $cabeceras = "Pilates Life ha recibido un mensajen" . "Responder a: $emailn"; $asunto = "$asunto"; $emisor = "PilatesLife Web"; $email_to = "marlene.jamett@gmail.com"; $contenido = "$nombre ha enviado un mensaje desde www.pilateslife.cl" . "n" . "Nombre: $nombren" . "Email: $emailn" . "Asunto: $asunton" . "Mensaje: $mensajen" . "n"; if (@mail($email_to,  $asunto ,$contenido ,$cabeceras )) { //Confirmación mensaje Ok echo(“1″); }else{ //Error en el envió echo(“0″); } ?> ¿Qué sucede :( ? Porqué no esta dando resultado!! podrías hecharme una mano?!  

luis

function grabar(){ // Agregamos el valor de insertar $('#procesar').val('1'); // Parametros var url =' ./controlador/controlador.php', cadena =$("#formulario").serialize(); // Llamar a la funcion e_ajax(url,cadena); } function grabar2(){ $( '#modificar'). val ( prompt('escriba el id del campo que desea modificar ','')); // Agregamos el valor de suma $('#procesar').val('2'); // Parametros var url =' ./controlador/controlador.php', cadena =$("#formulario").serialize(); // Llamar a la funcion e_ajax(url,cadena); } function grabar3(){ $( '#modificar'). val ( prompt('escriba el id del campo que desea eliminar ','')); // Agregamos el valor de suma $('#procesar').val('3'); // Parametros var url =' ./controlador/controlador.php', cadena =$("#formulario").serialize(); // Llamar a la funcion e_ajax(url,cadena); } function e_ajax(url,cadena){ $.ajax({ type: "POST", url:url , data: cadena, contentType: "application/x-www-form-urlencoded", beforeSend: function(){ $('#carga').html('<img src="./imagenes/loading.gif"" id="Preloader">'); }, dataType: "html", success: function(datos){ $('img#Preloader').css('display','none'); if( datos == "operacion ejecutada correctamente"){ /// TRIM LA FUNCION LO QUE HACE ES ELIMINAR TODOS LOS ESPACIOS VACIOS POR ENDE EL IF NUNCA TE VA A DAR BIEN!! $("#respuesta").addClass('result_ok').fadeIn('fast'); /// EN LA PRIMERA VES QUE TE APARECE LO HACE BIEN POR QUE ESTA EN DIS´LAY:NONE;, AHORA $("#respuesta").fadeOut(50000,function(){ $(this).removeClass('result_ok'); }); //// CUANDO ACÁ LE DECIS QUE EN 5SEGUNDOS SE ESFUME SE QUEDA CON UN OPACITY, TENES QUE HACER ESTO $('#nombre').val(''); $('#nombre').focus(); $('#apellido').val(''); $('#apellido').focus(); $("#respuesta").delay(50000).fadeIn('slow') }else{ //alert("El error: n"+datos); $("#respuesta").addClass('result_ok'); $("#respuesta").html(datos ).fadeOut(50000); //Mensaje de error - se oculta por completo en 5 segundos, los segundos se cuentan por milesimas de segundo por eso 5000 /* $(".contacto").load(" formulario.html" );*/ $('#nombre').val(''); $('#nombre').focus(); $('#apellido').val(''); $('#apellido').focus(); return false; } } }); };     el problema  que tengo aca es que despues  deq  ue  qda  en opacity  y     ejecuto mi  onclick otraves     no me  vuelve   a mostrar   la respuesta    en mi  <div  

luis

function grabar(){ // Agregamos el valor de insertar $('#procesar').val('1'); // Parametros var url =' ./controlador/controlador.php', cadena =$("#formulario").serialize(); // Llamar a la funcion e_ajax(url,cadena); } function grabar2(){ $( '#modificar'). val ( prompt('escriba el id del campo que desea modificar ','')); // Agregamos el valor de suma $('#procesar').val('2'); // Parametros var url =' ./controlador/controlador.php', cadena =$("#formulario").serialize(); // Llamar a la funcion e_ajax(url,cadena); } function grabar3(){ $( '#modificar'). val ( prompt('escriba el id del campo que desea eliminar ','')); // Agregamos el valor de suma $('#procesar').val('3'); // Parametros var url =' ./controlador/controlador.php', cadena =$("#formulario").serialize(); // Llamar a la funcion e_ajax(url,cadena); } function e_ajax(url,cadena){ $.ajax({ type: "POST", url:url , data: cadena, contentType: "application/x-www-form-urlencoded", beforeSend: function(){ $('#carga').html('<img src="./imagenes/loading.gif"" id="Preloader">'); }, dataType: "html", success: function(datos){ $('img#Preloader').css('display','none'); if( datos == "operacion ejecutada correctamente"){ /// TRIM LA FUNCION LO QUE HACE ES ELIMINAR TODOS LOS ESPACIOS VACIOS POR ENDE EL IF NUNCA TE VA A DAR BIEN!! $("#respuesta").addClass('result_ok').fadeIn('fast'); /// EN LA PRIMERA VES QUE TE APARECE LO HACE BIEN POR QUE ESTA EN DIS´LAY:NONE;, AHORA $("#respuesta").fadeOut(50000,function(){ $(this).removeClass('result_ok'); }); //// CUANDO ACÁ LE DECIS QUE EN 5SEGUNDOS SE ESFUME SE QUEDA CON UN OPACITY, TENES QUE HACER ESTO $('#nombre').val(''); $('#nombre').focus(); $('#apellido').val(''); $('#apellido').focus(); $("#respuesta").delay(50000).fadeIn('slow') }else{ //alert("El error: n"+datos); $("#respuesta").addClass('result_ok'); $("#respuesta").html(datos ).fadeOut(50000); //Mensaje de error - se oculta por completo en 5 segundos, los segundos se cuentan por milesimas de segundo por eso 5000 /* $(".contacto").load(" formulario.html" );*/ $('#nombre').val(''); $('#nombre').focus(); $('#apellido').val(''); $('#apellido').focus(); return false; } } }); };     el problema  que tengo aca es que despues  deq  ue  qda  en opacity  y     ejcuto mi  onclick otraves     no me  vuelve   a mostrar   la respuesta    en mi  <div  

Victor asc

¿Resetear el formulario? Mmm supongo que te refieres a limpiar las cajas de texto. Yo lo que hice fue que después de que acaba su función mail.php y se regresa a tu archivo de contacto le di lo siguiente: document.getElementById("nombre").value = ""; y así sucesivamente con las demas cajas de texto... pero esto no se ve muy bien, así que puedes anidar una función donde hagas que tu formulario lo recargue (para que limpie sus cajas de texto).

Paulo

Cómo sería el código si utilizásemos <button> en vez de <input>?

Paulo

Hola, el ejemplo está muy bueno... pero cómo se podría resetear el formulario al tiempo que desaparece? Y desde los mensajes (ya sea de error o éxito) cómo podríamos «volver al formulario»?

pablo

Has logrado solucionarlo? Es que a mí me pasa lo mismo

pablo

Hola. Me ha parecido muy interesante tu articulo. Pero me gustaría hacerte una pregunta. Si devuelvo un array en el fichero enviar.php como lo recogo. por ejemplo devuelvo echo ($letras); donde $letras=array("a","b","c","d"); Cómo puedo recoger cada uno de ellos. Muchas gracias por adelantado, me harias un gran favor resolviento mi problema.

serviciotecnico99@gmail.com

buenas amigo .. muy buena tu explicaion . yo tengo un problema y quisiera ver si puedes ayudarme .. imagina una BD X .. y en ella tiene un tabla planes ( id_plan, codigo_plan ,nombre_plan, descripcion_plan, costo_plan ) .. y una tabla cliente normal .. y tiene un campo plan ,, la idea mia es que cuando llega un cliente y quiere un plan vacional . se le esta llenando la informacion en pantalla . y hay una lista/menu o de selecion de los planes .. al darle click al codifo_plan se llenen de forma asincronica . unas cajas de texto o divs ( no importa ) .. con la informacion del plan tomado ( nombre, descripcion , monto ) .. PUEDES ALLUDARME .. gracias de antemano

jose

en ves de mostrar en un alert como muestro en un div id responseContent??

daniel

buenas amigo como hago para que Los campos del formulario q tienen establecido el required=”required” me salga en español ejemplo "Este como es obligatorio" asi

eblin

HOla! no me funciona. Todo lo puedo realizar en un archivo.html sin necesidad del envia.php  

eblin

Hola, no me funciona todo lo copio en un archivo .html sin necesidad de el archivo envia.php o que hago??????? plis   Muchas gracias

Pablo

En mi caso lo gracioso es que manda el mail sea como sea, mi pregunta tambien es que modificaciones podria hacerse al codigo para que la validacion sea por html5? Y evitar la funcion de validacion. Gracias por la ayuda igualmente. Saludos y muy bueno el post.

alejoelromeo_15@hotmail.com

Muy bueno me ayudo mucho

LUIS

Es posible hacer en un formulario que cuando envìen" el email automaticamente reciba el usuario un email de agradecimiento"?

Alvaro Retana

Wowww.... si todos explicaran paso a paso como usted lo hace, y con esa paciencia, existirían mas buenos programadores in enredos de medio programar. gracias

robert

Hola otra vez, al final tras darle muchas vueltas ya se por que no me funcionaba el ajax es por que estaba haciendo submit al boton en vez de al formulario. Ahora solo me hace falta saber por que no me hace los delay() Muchas gracias

robert

Perdon por enviarlo dos veces

robert

Hola me podeís ayudar!! No se por que no me funciona me lo miro lo remiro y veo que esta bién pero no se que le pasa por que no me ejecuta el ajax, de hecho me prevalida correctamente, creo que tiene algo que ver con el boton submit y me envia pero me sale la pantalla blanca del php Para verlo en funcionamiento lo podeís ver en mi página web www.robertcasals.com/test boton hire-me Muchas gracias de antemano $(document).on( "ready" , function initForm() {   // Esta parte del código se ejecutará automáticamente cuando la página esté lista.     $("#sendButton").on( "submit" , function pressButton() {     // Con esto establecemos la acción por defecto de nuestro botón de enviar. // stop form from submitting normally /*event.preventDefault();*/ if(validarForm()){   // Primero validará el formulario. $("#sendButton").attr("disabled" , "true").animate( { width: "140px" } , 1000 , "easeOutQuart" ).val("ENVIANDO...") ; $.post("content.php",$('#formdata').serialize(), function(res){                 if(res == 1){                     function okForm() { // Si hemos tenido éxito $( ".overTab" ).animate( { opacity: "show" } , 400 , "easeOutQuart" , function() { $( '.msg' ).addClass( "good" ) ; $( '.msg p' ).html( "¡Muchas Gracias! ¡He recibido tu Brief!Me pondre en contacto contigo por email lo antes posible."); }); }                 } else {                     function errorForm() { // Si no, lo mismo, pero haremos aparecer el msg 'error' $( ".overTab" ).animate( { opacity: "show" } , 400 , "easeOutQuart" , function() { $('.msg').addClass('bad') ; $('.msg p').html( "!Upps¡ ¡Lo siento!No se ha podido enviar tu mensaje.Por favor, inténtalo más tarde."); }); }                    } $( ".msg" ).fadeIn(400, "easeOutQuart", // Entrada del mensaje function(){ $(".msg").delay(4000).fadeOut(400, "easeOutQuart"); // Salida del mensaje }); // Reseteo del formulario $(".overTab").delay(4000).animate( { opacity: "hide" } , 400 , "easeOutQuart" , function() { $("#sendButton").removeAttr('disabled').animate( { width: "120px" } , 800 , "easeOutQuart" ).val("ENVIAME") ; $("#briefForm").reset(); $("#briefForm").find("span").removeClass("ok").removeClass("error").fadeOut(400); $("#briefForm").find("input.textBox").animate( { width: "384px" } , 400 , "easeOutQuart" ); $("#briefForm").find("textarea").animate( { width: "384px" } , 400 , "easeOutQuart" ); $( ".msg" ).fadeOut(400, "easeOutQuart"); $( '.msg' ).removeClass( "good" ).removeClass( "bad" ) ; $( '.msg p' ).html(""); }) ;             });         }     }); return false ; });

robert

Hola neecesito vuestra ayuda llevo dias peleandome con un formulario lo he hecho de 20mil maneras diferentes y no me funciona el $.ajax ni el $.post enviar envia, me prevalida y todo pero no me ejecuta el ajax, ¿me podeis ayudar? Os paso el code aquí, muchas gracias de antemano $(document).on( "ready" , function initForm() {   // Esta parte del código se ejecutará automáticamente cuando la página esté lista.     $("#sendButton").on( "submit" , function pressButton() {     // Con esto establecemos la acción por defecto de nuestro botón de enviar. // stop form from submitting normally /*event.preventDefault();*/ if(validarForm()){   // Primero validará el formulario. $("#sendButton").attr("disabled" , "true").animate( { width: "140px" } , 1000 , "easeOutQuart" ).val("ENVIANDO...") ; $.post("content.php",$('#formdata').serialize(), function(res){                 if(res == 1){                     function okForm() { // Si hemos tenido éxito $( ".overTab" ).animate( { opacity: "show" } , 400 , "easeOutQuart" , function() { $( '.msg' ).addClass( "good" ) ; $( '.msg p' ).html( "¡Muchas Gracias! ¡He recibido tu Brief!Me pondre en contacto contigo por email lo antes posible."); }); }                 } else {                     function errorForm() { // Si no, lo mismo, pero haremos aparecer el msg 'error' $( ".overTab" ).animate( { opacity: "show" } , 400 , "easeOutQuart" , function() { $('.msg').addClass('bad') ; $('.msg p').html( "!Upps¡ ¡Lo siento!No se ha podido enviar tu mensaje.Por favor, inténtalo más tarde."); }); }                    } $( ".msg" ).fadeIn(400, "easeOutQuart", // Entrada del mensaje function(){ $(".msg").delay(4000).fadeOut(400, "easeOutQuart"); // Salida del mensaje }); // Reseteo del formulario $(".overTab").delay(4000).animate( { opacity: "hide" } , 400 , "easeOutQuart" , function() { $("#sendButton").removeAttr('disabled').animate( { width: "120px" } , 800 , "easeOutQuart" ).val("ENVIAME") ; $("#briefForm").reset(); $("#briefForm").find("span").removeClass("ok").removeClass("error").fadeOut(400); $("#briefForm").find("input.textBox").animate( { width: "384px" } , 400 , "easeOutQuart" ); $("#briefForm").find("textarea").animate( { width: "384px" } , 400 , "easeOutQuart" ); $( ".msg" ).fadeOut(400, "easeOutQuart"); $( '.msg' ).removeClass( "good" ).removeClass( "bad" ) ; $( '.msg p' ).html(""); }) ;             });         }     }); return false ; });

Leonel cisneros

Hola que tal me funciono de maravilla el único problema es que cuando guardo los datos en la base de datos me los guarda dos veces!!! :-(

Alvaro T.

Excelente, funciona de maravilla, pero cuando el formulario tiene un Input File es cuando sucede el problema... Aun sigo buscando. Saludos!

Steysi Centeno

Hola, solo quería agradecer por el tuto que habéis publicado, gracias el comprendí como funciona el ajax.

Juan Viñas

Augusto, todo lo que imprimas con echo durante la acción de la función Ajax en PHP irá a parar a la variable "response" de javascript. Si lo que quieres es imprimir un mensaje diferente segun el resultado, usa "códigos de resultado", es decir, inventa códigos para los distintos resultados y devuelvelos. Por ejemplo, si falla, devuelve un 0, si todo es correcto, devuelve un 1, si falta un dato concreto, devuelve un 2, si falta otro dato diferente, devuelve un 3... y luego, con un switch, según el resultado, muestra el mensaje que corresponda. O devuelve directamente los mensajes, en lugar de numeros, si tu implementación te lo permite.

manu

podrías compartir como lo resolviste yo también tengo ese problema y no le encuentro solución, gracias

Augusto

Primeramente felicitarte y agradecerte por compartir tus conocimientos son de mucha ayuda, mi pregunta es como mandar a imprimir a la pagina html distintos mensajes según la accion que se procesa en el archivo php, de antemano gracias.

Juan Viñas

¿Direccionar a dónde? Para eso es mucho más fácil utilizar un formulario sin Ajax, que obligas a recargar la página para procesar los datos. No eres el único que me pregunta algo parecido. Así que aclaro un detalle: La ventaja de este formulario, que utiliza Ajax, es que la página no tiene que recargar. Es la gran utilidad de Ajax en una web. Ahora bien, si esperamos que la página, después de rellenar y enviar el formulario, debe redirigirnos a otro lugar, entonces no utilicéis Ajax, estamos hablando de un formulario normal y mucho más sencillo con action='la pagina a la que redirige', que procesará los datos que le lleguen por POST o GET. Pero la idea es no obligar al usuario a que la página les dirija a ningún sitio, si no a que los datos se envíen sin refrescar. Espero que haya quedado un poco más clara la idea de usar un formulario y Ajax. Si no es esta, no queremos usar Ajax.

Quique

hola como puedo direccionar luego de unos segundos de confirmar y enviar el formulario.

Juan Viñas

Es muy raro. Si el email se está enviando, significa que la función mail ha devuelto true, por lo tanto debería devolver un 1. Prueba a cambiar las devoluciones, en vez de devolver 1 y 0 devuelve frases como "Se ha enviado" y "Ha habido un error". Muchas veces, cuando se produce un error en la petición Ajax y no devuelve ningún resultado, devuelve 0. Quizá sea lo que te esté pasando y como tienes puesto 0 lo estas confundiendo. De todos modos, es muy raro que se llegue a enviar el email y te devuelva un 0...

javier

Hola, estoy utilizando el formulario y me funciona bien, la validación de javascript y el archivo enviar.php envia el mail correctamente, pero el resultado que devuelve me indica como si no se hubiera podido enviar (echo(“0″)?) Este es mi archivo "enviar.php": <?php $para ='nombre@midominio.com'; $asunto = "Mensaje desde la web"; $mailheader = "From: ".$_POST["mail"]."rn"; $mailheader .= "Reply-To: ".$_POST["mail"]."rn"; $mailheader .= "Content-type: text/html; charset=utf-8"; $MESSAGE_BODY = "Nombre: ".$_POST["nombre"]."<br>"; $MESSAGE_BODY .= "Email: ".$_POST["mail"]."<br>"; $MESSAGE_BODY .= "Empresa: ".$_POST["empresa"]."<br>"; $MESSAGE_BODY .= "Mensaje: ".nl2br($_POST["mensaje"])."<br>"; if (mail($para, $asunto, $MESSAGE_BODY, $mailheader)) { echo(“1″); } else { echo(“0″); } } ?> Y este mi formulario: <div id="formulario"> <form method="post" id="formdata"> <label for="nombre">nombre: </label> <br> <input type="text" name="nombre" id="nombre"> <br> <br> <label for="mail">e-mail: </label> <br> <input type="text" name="mail" id="mail"> <br> <br> <label for="empresa">empresa (opcional): </label> <br> <input type="text" name="empresa" id="empresa"> <br> <br> <label for="mensaje">mensaje : </label> <br> <textarea name="mensaje" id="mensaje"></textarea> <br> <br> <input type="button" id="botonenviar" value="Enviar"> </form> </div>    

Juan Viñas

Me alegro de que haya funcionado por fin :) No me cuadra lo que comentas sobre el formulario. Estamos trabajando con ajax, no deberia redirigirte a una página en blanco. ¿Estás llamando bien a la función $.post en el javascript? Lo ideal sería que hicieras algo como esto:

// Codigo Javascript
// En el caso en que la validación haya sido positiva

$.post("send.php",$('#formulario').serialize(),function(response){
alert(response);
});
Teniendo en cuenta que "response" son todos los echo que hagas en send.php, y que al final de send.php debes escribir die(); para que acabe la ejecución del proceso. De esta forma no te redirigirá fuera de la página del formulario, cosa que no tiene sentido si estas usando Ajax.

darwin

hola, amigo, pues quiero darte las gracias por tu ayuda, la hora exacta es: 1:28 a.m. tiempo del Centro de México y he logrado que se envíe el mensaje al correo!!! :D gracias porque me diste la pista... en efecto, tenías razón... mi archivo de java script al final, en la última comprobación es verdad, devolvía en los casos "false"... lo que hice fue quitar el último false y ponerle: url:"send.php"; después solamente compuse otra vez mi archivo php como se supone que debe ir con los nombres que les di en el y listo, quedó! no quise irme a dormir sin avisarte que gracias a Dios y a ti logré hacer que funcionara. espero haber sido claro y que esto que me sucedió ayude a otros, gracias. ah, una última pregunta... cuando se envía el correo... me manda al archivo php con el echo que dice: "tu mensaje ha sido enviado correctamente" hay alguna manera de hacer que cuando me mande el mensaje... automáticamente a los 2 o 3 segundos me regrese a la página con el formulario en blanco? o solamente hacer que en la misma página (puede ser en el formulario) me aparezca el echo y se borren todos los datos? si puedes ayudarme mil gracias, y si no, ntp, de verdad ya me ayudaste muchísimo, esto es lo de menos, lo importante es que ya se envía el mensaje, gracias, hasta luego, saludos, desde Tabasco, México.

darwin

también puedes checarlo en línea, para q no se marque como spam, te lo digo así: despachojaquez (punto) com, verás el formulario en el apartado de contacto, abajo del mapa de google, gracias.

darwin

bueno, veo que no aparece en forma de código, así que te lo envío así, quité todos los ">" ok? pero obviamente sí los tiene, solamente los borré para que se vean aquí div id="formulario"> div id="errores">Debes completar todos los campos form method="POST" action="send.php"> label for="nombre">Nombre: input name="nombre" type="text" class="campo" id="tfNombre" placeholder="Nombre completo" required="">br /> label for="correo">Correo electrónico:/label> input name="correo" type="email" class="campo" id="tfCorreo" placeholder="ejemplo@correo.com" required=""> label for="asunto">Asunto: br /> label for="mensaje">Mensaje:/label> textarea name="mensaje" id="tfMensaje" cols="30" rows="10" placeholder="Mensaje" required="">/textarea>br /> input name="enviar" type="submit" id="bEnviar" value="Enviar" class="boton">

darwin

hola, muchas gracias por responderme, ok, mira, creo que puede ser que mi código de javascript esté mal, no me había percatado de ese detalle del false en ambos casos, lo revisaré un poco más tarde. aunque la verdad te menciono que hasta este momento esta parte funciona bien. el código que pegué aquí de javascript está completo, es solamente para validar que todos los campos hayan sido rellenados, en caso contrario avisa que faltan campos por rellenar. ahora, en el archivo php que es con el que quiero hacer que tome los datos ingresados en el formulario y los envíe el correo no lo he logrado hacer hasta el día de hoy. la parte del código html dice así: <---aquí es donde llamo al archivo javascript que hace que funcione lo de la validación. la estructura del formulario dice así: ------ Debes completar todos los campos <--este es el mensaje que da cuando no se llenan todos los campos <------aquí es donde llamo al php esta la parte del formulario, quisiera saber si está mal escrito o qué onda, igual, si está bien escrito, entonces, cómo debería ser el código del php?? Nombre: Correo electrónico: Asunto: Mensaje: de verdad lo he intentado por ya casi 2 semanas, no encuentro cómo solucionarlo, o no sé si igual mi archivo de javascript interfiere con que se envíe el mail, sin embargo, lo he intentado, "deslinkeando" el archivo y aún así no se envía. gracias y disculpa que te moleste tanto, saludos

Juan Viñas

Vale, lo primero siento la tardanza, el comentario se fue a Spam directamente y me lo he encontrado hoy. Vamos a mirar tu código... Igual me equivoco, pero este código Javascript está incompleto, ¿Verdad? Quiero decir, no veo la llamada a $.post en el código, ¿La haces más adelante, o este es todo tu código? Sin eso, nunca se hace la llamada ajax al php. Por otro lado, en la última comprobación donde haces,

if(nombre == “” || correo == “” || asunto == “” || mensaje == “”){
    $(“#errores”).fadeIn();
    return false;
}else{
    $(“#errores”).fadeOut();
    return false;
}
¿Te has fijado en que en ambos casos devuelves false? ¿Debe ser así? Edito: He leido un detalle en tu comentario que había pasado por alto. Los input en el formulario deben tener un atributo "name", algo como

La variable de PHP $_POST funciona a través de name. Es decir, $_POST['tfNombre'] busca el input cuyo valor en name sea tfNombre. Los tienes que llamar sin # ni . ni nada, eso solo es para jQuery y CSS. $nombre = $_POST['tfNombre']; es lo correcto.

Darwin

ok, mira, mi código html dice así... la cabecera: en la parte del formulario: Debes completar todos los campos Nombre: Correo electrónico: Asunto: Mensaje: hasta aquí termina el html del formulario, ahora... tengo "validado" (para que el usuario llene todos los campos) con el archivo: contacto.js que llama en el script de arriba y dice así:

$(document).on("ready", main);

/*
*
*FUNCIÓN INICIAL
*/
function main(){
	$("#bEnviar").on("click", validarFormulario);
}

function validarFormulario(){
	var nombre = $("#tfNombre").val();
	var correo = $("#tfCorreo").val();
	var asunto = $("#tfAsunto").val();
	var mensaje = $("#tfMensaje").val();

	if(nombre == ""){
		$("#tfNombre").addClass("campo-vacio");
	}else{
		$("#tfNombre").removeClass("campo-vacio");
	}

	if(correo == ""){
		$("#tfCorreo").addClass("campo-vacio");
	}else{
		$("#tfCorreo").removeClass("campo-vacio");
	}

	if(asunto == ""){
		$("#tfAsunto").addClass("campo-vacio");
	}else{
		$("#tfAsunto").removeClass("campo-vacio");
	}

	if(mensaje == ""){
		$("#tfMensaje").addClass("campo-vacio");
	}else{
		$("#tfMensaje").removeClass("campo-vacio");
	}

	if(nombre == "" || correo == "" || asunto == "" || mensaje == ""){
		$("#errores").fadeIn();
		return false;
	}else{
		$("#errores").fadeOut();
		return false;
	}
}
hasta esta parte funciona perfectamente en la web... ahora lo que me hace falta y que no he podido hacer es que por medio del archivo php se envíe a mi correo, he probado decenas de formas para enviarlo, así que ya no sé cuál o cómo hacerlo y por eso no lo pongo aquí, puedes ayudarme a saber cómo llamar los datos en el php? mi teoría fue que como los tengo (como por ejemplo: id="tfnombre") en el php tengo que llamarlos: $nombre = $_POST['#tfNombre']; aún así no me funcionó y bueno lo he intentado de muchas maneras hasta el cansancio.... espero puedas ayudarme

Juan Viñas

¿Puede ser por este medio? Si alguien más tiene un problema parecido al tuyo, puede encontrar la solución si lo resolvemos :) Podemos resolver dudas puntuales si no nos llevan mucho tiempo en los comentarios de nuestro blog, pero para problemas más serios o cosas que nos vayan a ocupar mucho tiempo, puedes enviar un email a info@codigonexo.com, en ese caso bajo presupuesto. Si es algo simple, el sistema de comentarios deberia bastarnos :)

Darwin

Hola, podrías ayudarme? Tengo mi página ya en el servidor, todo funciona, menos mi formulario de contacto, tengo, obviamente el HTML, el js y funciona perfecto, pero mi problema es el php, llevo 3 días completos intentando que funcione y nada¡ puedo enviarte mis archivos para que los veas y puedas decirme donde esta mi error? De antemano, muchas gracias

Darwin

Hola, podrías ayudarme? Tengo mi página ya en el servidor, todo funciona, menos mi formulario de contacto, tengo, obviamente el HTML, el js y funciona perfecto, pero mi problema es el php, llevo 3 días completos intentando que funcione y nada¡ puedo enviarte mis archivos para que los veas y puedas decirme donde esta mi error? De antemano, muchas gracias ... Perdón x repetir el mensaje, pero al final leí lo de q me podía notificar la respuesta por email, gracias

Juan Viñas

@kyozuto Debería servir, si defines correctamente el formulario para enviar ficheros, y la función php que lo recibe. No lo he probado, pero debería servir. @yunis ¿Qué error te da?

yunis

me sigue dando el error al mandar los datos :(

kyozuto

crees que serviría para formularios que envíen ficheros por ejemplo? Gracias por el tutorial!

Pedro Ramírez

Muy claro.

Juan Viñas

De nada, me alegro de que os haya sido util el tema :)

claudio

Perdón, ya lo reolví era un problema de tipeo   Muchas Gracias

claudio

Lo ejecute tal cual lo escribieron, pero al enviar los datos me da error, el error es la variable fracaso, lo analicé con el navegador Chrome y no me mustra erro de javascript. Así que no me imagino que es lo que está mal. Les agradeceria cualquier pista para solucionarlo  

juan

me gustó el tema!