Problema al mostrar mensaje de envio

Tengo un problema con el formulario que al hacer click en enviar, envia todos los datos pero no me regresa el mensaje que se ha enviado los datos y este es el codigo que use para hacer esa funcion me podrian decir que tengo mal?

Código Javascript :

$(document).ready(function(){
    $("#boton_enviar").submit(function() {
        event.preventDefault();
   var url = $(this).attr('action');  
   var data = $(this).serialize();            
            
            var validation = true;
      if(!$("#nombre").val()){
         validation = false;
         $("#nombre").focus();
      }
      else if(!$("#email").val()){
         validation = false;
         $("#email").focus();
      }
                else if(!$("#telefono").val()){
         validation = false;
         $("#telefono").focus();
      }
                else if(!$("#mensaje").val()){
         validation = false;
         $("#mensaje").focus();
      }
      
      if(validation==true){
         $.post(url, data, function() {             
                            $('#form .enviado').fadeIn("normal");
                            $('#boton_enviar').fadeTo("slow", 0.1);
                            $('#form')[0].reset();
                        });
                }      
    });
});

Código PHP :

<?php
    //Guardar los datos en variables
    $dest = "[email protected]"; 
    $nombre = $_POST['nombre'];
    $asunto = $_POST['nombre'];
    $email = $_POST['email'];
    $telefono = $_POST['telefono'];
    $mensaje = $_POST['mensaje']; 
    
    //Cabeceras del correo
    $headers = "From: $email\r\n"; 
    $headers .= "X-Mailer: PHP5\n";
    $headers .= 'MIME-Version: 1.0' . "\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; //
    
    //Crear el cuerpo
    $cuerpo = "<strong>Nombre:</strong> ".$nombre."<br>";
    $cuerpo .= "<strong>Email:</strong> ".$email."<br>";
    $cuerpo .= "<strong>Telefono:</strong> ".$telefono."<br>";
    $cuerpo .= "<strong>Mensaje:</strong> ".$mensaje;
      
    //Validación      
    if(mail($dest,$asunto,$cuerpo,$headers)){
    }   
?>

Código HTML :

   <form name="email_frm" id="form" method="post" action="enviar-form.php" enctype="application/x-www-form-urlencoded">
         <label>Su nombre completo: &nbsp;</label>
         <input type="text" name="nombre" id="nombre" required="required"/>
         <label>Su email: &nbsp;</label>
         <input type="email" name="email" id="email" required="required"/>
         <label>Su tel&eacute;fono: &nbsp;</label>
         <input type="text" name="telefono" id="telefono"  required="required"/>
         <label>Su comentario: &nbsp;</label>
         <textarea cols="35" rows="6" required="required" name="mensaje"></textarea>
         <input type="submit" name="boton_enviar" id="boton_enviar" value="Enviar"/>
                        <div class="enviado">Su mensaje ha sido enviado.</div>
      </form>

Primero que todo desde el php no estas devolviendo ninguna información, y segundo desde la función en javascript tampoco los estas recibiendo.

Me pueden ayudar??

como podia arreglar este problema??

mira este es el codigo correcto, analiza cada una de las partes de esto:

$.post('ajax/test.html', function(data) {
$('.result').html(data);
});

En tu PHP deberias poner lo siguiente:

if(mail($dest,$asunto,$cuerpo,$headers))
{

echo "success"

}


y este ECHO va ser retornado al POST donde dice DATA, function(data) Por aqui va a entrar el hecho y si te fijas bien y comprendes un poco el codigo veras que el data lo insertan con html o puedes usar text por que es un texto si fuera un HTML lo que retornas entonces si usar HTML,

este es el link donde puedes leer un poco mas http://api.jquery.com/jQuery.post/ y si lees este metodo es el equivalente al AJAX !

En realidad no es eso lo que buscaba sino algo de animacion en el mensaje dentro del documento html

http://demo.tutorialzine.com/2009/09/fancy-contact-form/demo.php mira algo como esto

Código :

$(document).ready(function() { 
    $("#form").submit(function() {   
      

            var validation = true;
      if(!$("#nombre").val()){
         validation = false;
         $("#nombre").focus();
      }
      else if(!$("#email").val()){
         validation = false;
         $("#email").focus();
      }
                else if(!$("#telefono").val()){
         validation = false;
         $("#telefono").focus();
      }
                else if(!$("#mensaje").val()){
         validation = false;
         $("#mensaje").focus();
      }
                if(validation==true){
         $.post('enviar-form.php', $(this).serialize(), function() {              
                                $('#form').hide("slow").after('<h1 class="enviado">Gracias por enviarnos su mensaje</h1>')

                        });                               
                }
        event.preventDefault();
    });
});

ya le hice modificaciones y aun asi no funciona

Seria mejor usar ajax para esto??

es que eso que quieres se hace con animate por lo que veo en el ejemplo, podrias utilizar 3 divs

<div id="superior"></div>
<div id="form">aqui pones el formulario</div>
<div id="inferior"><div id="msg"></div></div>

entonces al regresar de PHP en el function

$.post('enviar-form.php', $(this).serialize(), function() {


$('#form').slideToggle("normal")
$('#msg').text('Gracias por enviar tu comentario')

});
el metodo que uses es lo de menos pero si te sugiero que pongas un if y que regreses un echo de PHP como te explique en el comentario anterior porque si por algun motivo no te llega el mail entonces tienen un problema en el PHP y en el if donde tienes lo de mail ahi puedes poner un else que diga no se envio o simplemente hacerle un alert al DATA que te mencione que usaras en la function() para saber que esta pasando en el PHP , ahora tambien puedes usar el CONSOLE.LOG() para ir debugeando en tu Firefox con la consola del FIREBUG eh ir viendo que sta sucediendo en el javascript

ldgmmorales escribió:

corrección puedes usar animate o puedes usar slideToggle como lo hice aqui... sorry!

No se aun sigue dandome problemas con el codigo que me distes. Cuando hago submit se va al archivo php y se queda ahi envia el mensaje a mi correo todo bien, pero nunca hace la animacion de formulario ni me muestra el mensaje. Que hice mal??

Código :

<div id="superior"></div>
            <div id="form">
      <form name="email_frm"  method="post" action="enviar-form.php" enctype="application/x-www-form-urlencoded">
         <label>Su nombre completo: &nbsp;</label>
         <input type="text" name="nombre" id="nombre" required="required"/>
         <label>Su email: &nbsp;</label>
         <input type="email" name="email" id="email" required="required"/>
         <label>Su tel&eacute;fono: &nbsp;</label>
         <input type="text" name="telefono" id="telefono"  required="required"/>
         <label>Su comentario: &nbsp;</label>
         <textarea cols="35" rows="6" required="required" name="mensaje"></textarea>
         <input type="submit" name="boton_enviar" id="boton_enviar" value="Enviar"/>                       
      </form>
            </div>
            <div id="inferior"><div id="msg"></div></div>
            
                <script>
                    $(document).ready(function() { 
                        $("#form").submit(function() {
                            
                                var validation = true;
                                    if(!$("#nombre").val()){
                                            validation = false;
                                            $("#nombre").focus();
                                    }
                                    else if(!$("#email").val()){
                                            validation = false;
                                            $("#email").focus();
                                    }
                                    else if(!$("#telefono").val()){
                                            validation = false;
                                            $("#telefono").focus();
                                    }
                                    else if(!$("#mensaje").val()){
                                            validation = false;
                                            $("#mensaje").focus();
                                    }
                                    if(validation==true){
                                            $.post('enviar-form.php', $(this).serialize(), function(data) {
                                                    $('#form').slideToggle("normal");
                                                    $('#msg').text('Gracias por enviar tu comentario')
                                            });
                                    }
                            event.preventDefault();
                        });
                    });

                </script>

Código :

<?php
    //Guardar los datos en variables
    //$dest = "[email protected]";
    $dest = "[email protected]"; 
    $nombre = $_POST['nombre'];
    $asunto = $_POST['nombre'];
    $email = $_POST['email'];
    $telefono = $_POST['telefono'];
    $mensaje = $_POST['mensaje']; 
    
    //Cabeceras del correo
    $headers = "From: $email\r\n"; 
    $headers .= "X-Mailer: PHP5\n";
    $headers .= 'MIME-Version: 1.0' . "\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; //
    
    //Crear el cuerpo
    $cuerpo = "<strong>Nombre:</strong> ".$nombre."<br>";
    $cuerpo .= "<strong>Email:</strong> ".$email."<br>";
    $cuerpo .= "<strong>Telefono:</strong> ".$telefono."<br>";
    $cuerpo .= "<strong>Mensaje:</strong> ".$mensaje;
      
    //Validación      
    if(mail($dest,$asunto,$cuerpo,$headers)){
        echo "Gracias por enviar su mensaje";
    }else{
        echo "No se envio el mensaje";
    }
?>

mira en el $('#msg').text('Gracias por enviar tu comentario') quita ese texto y pon data que es lo que tiene sen el function ahora hazle un ALERT a data asi

$.post('enviar-form.php', $(this).serialize(), function(data) {
alert(data)
$('#form').slideToggle("normal");
$('#msg').text(data)
});
}
event.preventDefault();
});
});

no se para que usas el event.preventDefault() y el serialize esos no los eh conocido aun... trata asi como te digo el data te debes regresar el echo que esta dentro del if echo "Gracias por enviar su mensaje"; si no se envio o existe algun problema entonce ste mostrara el segundo,

ahora otra cosa... estas teniendo esto <form name="email_frm" method="post" action="enviar-form.php" enctype="application/x-www-form-urlencoded">

y no debe de llevar ni el action ni el method ni el enctype porque se supone que lo estas jalando con submit de jquery eso sale sobrando, tienes algun link donde pueda verlo para saber que esta pasando?

no estoy muy seguro si te hace falta un return false, pero al enviar se te refresca o recarga la pagina?

Saludos!

Aqui te dejo el link del sitio

http://prueba01.site90.com/contactos.html

Ya vi lo que pasa es que esta es que al darle enviar hace un refresh la pagina y como lo pensaba te hace falta un click bien ahi te va... el codigo del submit no tiene por que estas hasta abajo del codigo html ya que estas usando el $(document).ready(function() { }) que te recuerdo que este codigo le dice el Explorador de internet que todo lo que esta dentro de las llaves se ejecutara despues del la lectura del dom bien a lo que voy... es que tu codigo esta bien hasta donde vamos pero a tu boton de enviar <input type="submit" value="Enviar" id="boton_enviar" name="boton_enviar"> NO tiene que ser SUBMIT y te comente que los atributos de la etiqueta FORM que son el action el method y el enctype se los quitaras solo dejale un ID al form por ejemplo id="formContacto".

Volviendo al Boton de enviar en vez de ser Submit lo vas a cambiar a BUTTON y en jquery que tienes vas a gregar esto

$('#boton_enviar').click(function(){
$('#formContacto').submit();
})

aqui le estas indicanto que solo cuando hagas click en el boton de ENVIAR ejecute el submit de dicha forma despues de este codigo entonces ahora si va con un ligero cambio uso el nombre del id de la forma,

$("#formContacto").submit(function(){

var validation = true;
if(!$("#nombre").val()){
validation = false;
$("#nombre").focus();
}
else if(!$("#email").val()){
validation = false;
$("#email").focus();
}
else if(!$("#telefono").val()){
validation = false;
$("#telefono").focus();
}
else if(!$("#mensaje").val()){
validation = false;
$("#mensaje").focus();
}
if(validation==true)
{
$.post('enviar-form.php', $(this).serialize(), function(data)
{
$('#form').slideToggle("normal");
$('#msg').text('Gracias por enviar tu comentario')
});
}
event.preventDefault();

return false
});


ya con eso te debe funcionar te faltaba tambien un return false mira aqui te dejo el link de como funciona y sus variantes el submit http://api.jquery.com/submit/ recuerda que todo este codigo va dentro de las llavez de $(document).ready(function() { }), suerte!

Puedes revisar el codigo del link denuevo ahi algo que no esta funcionando bien

fijate en el codigo de este sitio tiene algo parecido a lo que tengo y le funciona bien le aparece el ganchito cuando se envia y utiliza el submit en vez del button tmb usa el method post

http://rociobelfiore.com.ar/contactme.php

Bro buen dia, te pido de favor que leas bien a detalle lo que te escribi en el post anterior ya que por lo que veo nada mas copias y pegas y no estas haciendo las modificaciones que te comente ayuda me ayudarte por favor bien checa lo siguiente con DETALLE!!.

sigues teniendo eso
<form name="email_frm" method="post" action="enviar-form.php" enctype="application/x-www-form-urlencoded">


y debes tener
<form id='formContacto' >

despues el boton de enviar lo tienes asi

<input id="boton_enviar" type="submit" value="Enviar" name="boton_enviar">

y debe ser asi

<input id="boton_enviar" type="button" value="Enviar" name="boton_enviar">

vez la diferencia?? uno es submit y el que te digo es button,

y por ultimo subiste el script eso esta bien ahora te hizo falta esto:

$('#boton_enviar').click(function(){

$('#formContacto').submit();

})

Si no haces estos cambios tu formulario seguira haciendo un refresh y tu efecto no se vera ya que el boton sigue siendo SUBMIT y siguies teniendo los atributos en el FORM.

Es que con button no me sale la validaciones de html 5 y como soluciono eso??