• Jueves 28 de Marzo de 2024, 11:15

Autor Tema:  Mostrar imagen "mensaje enviado" cuando el mensaje es enviado?  (Leído 11071 veces)

Eclypse

  • Nuevo Miembro
  • *
  • Mensajes: 8
    • Ver Perfil
Mostrar imagen "mensaje enviado" cuando el mensaje es enviado?
« en: Miércoles 21 de Marzo de 2012, 04:33 »
0
Alguien me pueden brindar alguna ayuda para hacer que cuando el usuario llene los espacios del formulario y este a haga click en enviar mensaje. valide y me ponga la imagen diciendo "mensaje enviado" y despues resetee todo los campos usando jquery, ajax. Porfavor alguna ayuda es lo ultimo que necesito para completar la web

Estos son los codigos solo me falta javascript para que cuando se envie, salga la imagen "mensaje enviado" que esta alado del boton Enviar Mensaje le coloque display:none; para que no se vea

Codigo HTML
                   
<form id="formulario" action="contacto.php" method="post">             
<input type="text" name="nombre" id="nombre" class="info" placeholder="Coloque su nombre" required>
<input type="email" name="email" id="email" class="info" placeholder="Coloque su email" required>                                 
<input type="text" name="telefono" id="telefono" class="info" placeholder="Coloque su tel&eacute;fono">
<input type="text" name="asunto" id="asunto" class="info" placeholder="Coloque el asunto">
<textarea name="mensaje" id="mensaje" class="info" placeholder="Coloque su mensaje" cols="45" rows="10" required></textarea>                   
 <input type="submit" id="submit" value="Enviar mensaje">
<img src="imagenes/msj.png" alt="Mensaje Enviado" id="msjEnviado">                                                 
</form>     


Codigo CSS
Código: [Seleccionar]

input[type="text"], input[type="email"], textarea{
background-image:linear-gradient(bottom, rgb(232,232,232) 33%, rgb(224,224,224) 67%);
background-image:-o-linear-gradient(bottom, rgb(232,232,232) 33%, rgb(224,224,224) 67%);
background-image:-moz-linear-gradient(bottom, rgb(232,232,232) 33%, rgb(224,224,224) 67%);
background-image:-webkit-linear-gradient(bottom, rgb(232,232,232) 33%, rgb(224,224,224) 67%);
background-image:-ms-linear-gradient(bottom, rgb(232,232,232) 33%, rgb(224,224,224) 67%);
border:1px solid #ABABAB;
-webkit-box-shadow:inset 1px 2px 1px #D0D0D0;
-moz-box-shadow:inset 1px 2px 1px #D0D0D0;
box-shadow:inset 1px 2px 1px #D0D0D0;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
color:#686868;
padding:5px;
font-family:Century Gothic;
font-size:14px;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus{
background-image:linear-gradient(bottom, rgb(245,245,245) 33%, rgb(230,230,230) 67%);
background-image:-o-linear-gradient(bottom, rgb(245,245,245) 33%, rgb(230,230,230) 67%);
background-image:-moz-linear-gradient(bottom, rgb(245,245,245) 33%, rgb(230,230,230) 67%);
background-image:-webkit-linear-gradient(bottom, rgb(245,245,245) 33%, rgb(230,230,230) 67%);
background-image:-ms-linear-gradient(bottom, rgb(245,245,245) 33%, rgb(230,230,230) 67%);
}
form #nombre{
float:left;
height:20px;
width:200px;
}
form #email{
float:left;
height:20px;
width:200px;
margin:0px 0px 0px 10px;
}
form #telefono{
clear:left;
float:left;
height:20px;
width:200px;
margin:10px 0px 0px 0px;
}
form #asunto{
float:left;
height:20px;
width:200px;
margin:10px 0px 0px 10px;
}
form #mensaje{
clear:left;
float:left;
margin:10px 0px 0px 0px;
width:423px;
max-width:423px;
}
form #submit{
clear:left;
float:left;
margin-top:20px;
background:#E2E2E2;
border:none;
padding:8px;
-webkit-box-shadow:0px 0px 0px 1px #B2B2B2;
-moz-box-shadow:0px 0px 0px 1px #B2B2B2;
box-shadow:0px 0px 0px 1px #B2B2B2;
margin-left:5px;
cursor:pointer;
font-family:Century Gothic;
}
form #submit:hover{
background:#F4F4F4;
}

#msjEnviado{
margin: 20px 0 0 40px;
opacity:.9;
float:left;
display:none;
}



Codigo PHP

<?php
// Guardar los datos recibidos en variables:
$nombre $_POST['nombre'];
$email $_POST['email'];
$telefono $_POST['telefono'];
$asunto $_POST['asunto'];
$mensaje $_POST['mensaje'];
// Definir el correo de destino:
$dest "diver-walls@hotmail.com"
 
// Estas son cabeceras que se usan para evitar que el correo llegue a SPAM:
$headers "From: $nombre $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";
 
// Aqui definimos el asunto y armamos el cuerpo del mensaje
$asunto "Contacto";
$cuerpo "<strong>Nombre:</strong> ".$nombre."<br>";
$cuerpo .= "<strong>Email:</strong> ".$email."<br>";
$cuerpo .= "<strong>Telefono:</strong> ".$telefono."<br>";
$cuerpo .= "<strong>Asunto:</strong> ".$asunto."<br>";
$cuerpo .= "<strong>Mensaje:</strong> ".$mensaje;
 
// Esta es una pequena validación, que solo envie el correo si todas las variables tiene algo de contenido:
if($nombre != '' && $email != '' && $telefono != '' && $asunto!= '' && $mensaje != ''){
    
mail($dest,$asunto,$cuerpo,$headers); //ENVIAR!
}
?>

caperutxa

  • Miembro activo
  • **
  • Mensajes: 40
  • Nacionalidad: 00
    • Ver Perfil
Re:Mostrar imagen "mensaje enviado" cuando el mensaje es enviado?
« Respuesta #1 en: Miércoles 21 de Marzo de 2012, 06:21 »
0
Puedes usar una función en javascript, por ejemplo llamada ImagenMensaje, donde le digas al elemento en cuestión que se muestre (display:block;) o lo que sea.

Cuando le das a input validas los contenidos en el if. Después de enviar los datos del formulario agregas la llamada a la función:

var nombrevariable = new ImagenMensaje();  //En javascript

Recuerda a ponerle un ID al elemento imagen para que la función en java lo reconozca.

Si quieres obtener resultados diferentes no hagas siempre lo mismo.


Eclypse

  • Nuevo Miembro
  • *
  • Mensajes: 8
    • Ver Perfil
Re:Mostrar imagen "mensaje enviado" cuando el mensaje es enviado?
« Respuesta #2 en: Miércoles 21 de Marzo de 2012, 11:28 »
0
disculpa nose casi nada de javascript :S por eso si me podrias brindar el codigo :S

Bueno aqui tengo una par del codigo nose si esta bien comprendan que no mucho de javascript

Código: Javascript
  1. function submit(){
  2.         $('#formulario').submit(function(event) {
  3.                 event.preventDefault();
  4.                 var url = $(this).attr('action');  
  5.                 var data = $(this).serialize();
  6.                
  7.                 //Validation
  8.                 var validation = true;
  9.                 if(!$("#email").val()){
  10.                         validation = false;
  11.                 }
  12.                 if(!$("#nombre").val()){
  13.                         validation = false;            
  14.                 }
  15.                
  16.                 if(validation==true){
  17.                         $.post(url, data, function() {
  18.                                 .removeClass('hide');
  19.                                 $('#submit').fadeTo("slow", 0.1);
  20.                                 $('#msjEnviado').fadeIn("normal");
  21.                                 $('#formulario')[0].reset();
  22.                         });
  23.                 }
  24.         });
  25. };
« última modificación: Miércoles 21 de Marzo de 2012, 20:49 por Eclypse »

caperutxa

  • Miembro activo
  • **
  • Mensajes: 40
  • Nacionalidad: 00
    • Ver Perfil
Re:Mostrar imagen "mensaje enviado" cuando el mensaje es enviado?
« Respuesta #3 en: Jueves 22 de Marzo de 2012, 12:28 »
0
Dentro de la función pon esto:

echo '<script type="text/javascript">var algo = new ImagenMensaje();</script>';

Y fuera de la función, pon:
<script type="text/javascript">function ImagenMensaje(){
    document.getElementById('IdElemento').style.display = 'block';
}</script>';

Donde el IdElemento es el nombre de id que le has puesto a tu elemento imagen que deseas mostar
Si quieres obtener resultados diferentes no hagas siempre lo mismo.


Eclypse

  • Nuevo Miembro
  • *
  • Mensajes: 8
    • Ver Perfil
Re:Mostrar imagen "mensaje enviado" cuando el mensaje es enviado?
« Respuesta #4 en: Viernes 23 de Marzo de 2012, 09:10 »
0
Aun sigue sin funcionarme

que es lo que hice mal?

function submit(){
   $('#formulario').submit(function(event) {
      event.preventDefault();
      var url = $(this).attr('action'); 
      var data = $(this).serialize();
      var algo = new ImagenMensaje();
      
      //Validation
      var validation = true;
      if(!$("#email").val()){
         validation = false;
      }
      if(!$("#nombre").val()){
         validation = false;      
      }
      
      if(validation==true){
         $.post(url, data, function() {
            $('#submit').fadeTo("slow", 0.1);
            $('#msjEnviado').fadeIn("normal");
            $('#formulario')[0].reset();
         });
         
      }
   });
};

function ImagenMensaje(){
    document.getElementById('#msjEnviado').style.display = 'block';
   }

Eclypse

  • Nuevo Miembro
  • *
  • Mensajes: 8
    • Ver Perfil
Re:Mostrar imagen "mensaje enviado" cuando el mensaje es enviado?
« Respuesta #5 en: Lunes 26 de Marzo de 2012, 22:38 »
0
Alguien que me ayude porfavor necesito resolver eso :(

caperutxa

  • Miembro activo
  • **
  • Mensajes: 40
  • Nacionalidad: 00
    • Ver Perfil
Re:Mostrar imagen "mensaje enviado" cuando el mensaje es enviado?
« Respuesta #6 en: Jueves 29 de Marzo de 2012, 09:49 »
0
Prueba a quitar la función "externa" y ponerla en la validación. Algo como esto

if(validation==true){
         $.post(url, data, function() {
            $('#submit').fadeTo("slow", 0.1);
            $('#msjEnviado').fadeIn("normal");
            $('#formulario')[0].reset();
            document.getElementById('#msjEnviado').style.display = 'block';
         });

PD: Revisa la sintaxis y la coherencia con tu algortimo, ya que el que habías posteado no lo era.
Si quieres obtener resultados diferentes no hagas siempre lo mismo.


Eclypse

  • Nuevo Miembro
  • *
  • Mensajes: 8
    • Ver Perfil
Re:Mostrar imagen "mensaje enviado" cuando el mensaje es enviado?
« Respuesta #7 en: Viernes 30 de Marzo de 2012, 20:34 »
0
Bueno ya lo solucione me gustaria saber si ahi algun error de codigo? por el momento lo unico que me falla es que no recibo ningun mensaje a mi correo cuando envio.

Código: Javascript
  1. $(document).ready(function(){
  2.     $("#submit").click(function() {
  3.  
  4.         var nombre = $("#nombre").val();
  5.             email = $("#email").val();
  6.             validacion_email = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
  7.             telefono = $("#telefono").val();
  8.                         asunto = $("#asunto").val();
  9.             mensaje = $("#mensaje").val();
  10.  
  11.         if (nombre == "") {
  12.             $("#nombre").focus().after("<span class='error'>Ingrese su nombre</span>");
  13.                                         $("#nombre").keyup(function(){
  14.                                         if( $(this).val() != "" ){
  15.                                         $(".error").fadeOut();
  16.                                         return false;
  17.                                         }
  18.                                 });
  19.             return false;
  20.                        
  21.         }else if(email == "" || !validacion_email.test(email)){
  22.             $("#email").focus().after("<span class='error'>Ingrese un email correcto</span>");
  23.                                         $("#email").keyup(function(){
  24.                                         if( $(this).val() != "" && validacion_email.test($(this).val())){
  25.                                         $(".error").fadeOut();
  26.                                         return false;
  27.                                         }
  28.                                 });
  29.             return false;
  30.                        
  31.         }else if(mensaje == ""){
  32.             $("#mensaje").focus().after("<span class='error'>Ingrese un mensaje</span>");
  33.                                         $("#mensaje").keyup(function(){
  34.                                         if( $(this).val() != "" ){
  35.                                         $(".error").fadeOut();
  36.                                         return false;
  37.                                         }
  38.                                 });
  39.             return false;
  40.                        
  41.         }else{        
  42.                 var datos = 'nombre='+ nombre + '&email=' + email + '&telefono=' + telefono + '&asunto=' + asunto + '&mensaje=' + mensaje;
  43.                 $.ajax({
  44.                         type: "POST",
  45.                         url: "contacto.php",
  46.                         data: datos,
  47.                         success: function() {
  48.                                
  49.                                 $('.msg').text('Mensaje enviado!').addClass('msg_ok').animate({ 'left' : '400px' }, 300);
  50.                                 $('#submit').fadeOut("slow");
  51.                                 $('#formulario')[0].reset();
  52.                         },
  53.                         error: function() {
  54.                            
  55.                                 $('.msg').text('Hubo un error!').addClass('msg_error').animate({ 'left' : '400px' }, 300);
  56.                         }
  57.                 });
  58.                 return false;
  59.                                 }
  60.                
  61.  
  62.     });
  63. });
« última modificación: Viernes 30 de Marzo de 2012, 21:46 por Eclypse »

Eclypse

  • Nuevo Miembro
  • *
  • Mensajes: 8
    • Ver Perfil
Re:Mostrar imagen "mensaje enviado" cuando el mensaje es enviado?
« Respuesta #8 en: Viernes 6 de Abril de 2012, 11:41 »
0
Lo he modificado y mejorado :D

Código: Javascript
  1. $(document).ready(function(){
  2.     $("#submit").click(function() {
  3.  
  4.         var nombre = $("#nombre").val();
  5.             email = $("#email").val();
  6.             validacion_email = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
  7.             telefono = $("#telefono").val();
  8.                         asunto = $("#asunto").val();
  9.             mensaje = $("#mensaje").val();
  10.  
  11.         if (nombre == "") {
  12.             $("#nombre").focus().after("<span class='error'>Ingrese su nombre</span>");
  13.                                         $("#nombre").keyup(function(){
  14.                                         if( $(this).val() != "" ){
  15.                                         $(".error").fadeOut();
  16.                                         return false;
  17.                                         }
  18.                                 });
  19.             return false;
  20.                        
  21.         }else if(email == "" || !validacion_email.test(email)){
  22.             $("#email").focus().after("<span class='error'>Ingrese un email correcto</span>");
  23.                                         $("#email").keyup(function(){
  24.                                         if( $(this).val() != "" && !validacion_email.test($(this).val())){
  25.                                         $(".error").fadeOut();
  26.                                         return false;
  27.                                         }
  28.                                 });
  29.             return false;
  30.                        
  31.         }else if(telefono == ""){
  32.             $("#telefono").focus().after("<span class='error'>Ingrese un telefono</span>");
  33.                                         $("#telefono").keyup(function(){
  34.                                         if( $(this).val() != "" ){
  35.                                         $(".error").fadeOut();
  36.                                         return false;
  37.                                         }
  38.                                 });
  39.             return false;
  40.  
  41.         }else if(asunto == ""){
  42.             $("#asunto").focus().after("<span class='error'>Ingrese un asunto</span>");
  43.                                         $("#asunto").keyup(function(){
  44.                                         if( $(this).val() != "" ){
  45.                                         $(".error").fadeOut();
  46.                                         return false;
  47.                                         }
  48.                                 });
  49.             return false;                      
  50.                                        
  51.         }else if(mensaje == ""){
  52.             $("#mensaje").focus().after("<span class='error'>Ingrese un mensaje</span>");
  53.                                         $("#mensaje").keyup(function(){
  54.                                         if( $(this).val() != "" ){
  55.                                         $(".error").fadeOut();
  56.                                         return false;
  57.                                         }
  58.                                 });
  59.             return false;
  60.                        
  61.         }else{        
  62.                 var datos = 'nombre='+ nombre + '&email=' + email + '&telefono=' + telefono + '&asunto=' + asunto + '&mensaje=' + mensaje;
  63.                 $.ajax({
  64.                         type: "POST",
  65.                         url: "contacto.php",
  66.                         data: datos,
  67.                         success: function() {
  68.                                
  69.                                 $('#formulario #accept').fadeIn("normal");
  70.                                 $('#submit').fadeOut("slow");
  71.                                 $('#formulario')[0].reset();
  72.                         },
  73.                         error: function() {  
  74.                                 $('#formulario #error').fadeIn("normal");
  75.                         }
  76.                 });
  77.                 return false;
  78.                                 }
  79.                
  80.  
  81.     });
  82. });