elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Curso de javascript por TickTack


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Enviar formulario sin recargar
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Enviar formulario sin recargar  (Leído 2,683 veces)
Jarcx9

Desconectado Desconectado

Mensajes: 10


Ver Perfil
Enviar formulario sin recargar
« en: 24 Noviembre 2014, 23:15 pm »

Buenas parceros,

Estoy haciendo un pequeño codigo donde incrusto un input en una imagen y envio este formulario via jquery,ajax. El codigo esta bien y envia lo que necesito y todo pero quiero que me muestre un mensaje cuando le de al submit, algo asi como se envio correctametne.

Estoy probando pero no he podido solucionarlo, le agradeceria mucho su colaboracion

Código
  1. <html>
  2. <head>
  3. <script language="javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  4. <script language="javascript">
  5. $(document).ready(function() {
  6.    $().ajaxStart(function() {
  7.        $('#loading').show();
  8.        $('#result').hide();
  9.    }).ajaxStop(function() {
  10.        $('#loading').hide();
  11.        $('#result').fadeIn('slow');
  12.    });
  13.    $('#form, #fat, #mc-embedded-subscribe-form').submit(function() {
  14.        $.ajax({
  15.            type: 'POST',
  16.            url: $(this).attr('action'),
  17.            data: $(this).serialize(),
  18.            success: function(data) {
  19.                $('#result').html(data);
  20.  
  21.            }
  22.        })
  23.  
  24.        return false;
  25.    });
  26. })  
  27. </script>
  28.  
  29.  
  30. <link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
  31.  
  32. <style type="text/css">
  33. .form-control {
  34.  width: 34%;
  35.  height: 30px;
  36.  padding: 10px 15px;
  37.  font-size: 15px;
  38.  line-height: 1.42857143;
  39.  color: #2c3e50;
  40.  background-color: #ffffff;
  41.  background-image: none;
  42.  border: 1px solid #dce4ec;
  43.  border-radius: 4px;
  44.  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  45.  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  46.  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  47.  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  48.  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53.  
  54.  
  55. <div id="mc_embed_signup">
  56. <form action="//ribot-barcelona.us5.list-manage.com/subscribe/post?u=d2c4a68aadfd8d6061877b0b2&amp;id=809315d24f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" >
  57.  
  58. <table  align=center cellpadding=1 cellspacing=2 background="newsletter web_Ribot.jpg" height="415" width="754">
  59.  
  60. <tr>
  61. <td><br>&nbsp;</td>
  62. </tr>
  63.  
  64. <tr>
  65. <td><br>&nbsp;</td>
  66. </tr>
  67.  
  68. <tr>
  69. <td></td>
  70. <td align="right">
  71. <font color="white"><b>E-Mail</b></font> &nbsp;&nbsp;<input type="text" value="" name="EMAIL" id="mce-EMAIL" required class="form-control" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br><br>
  72.  
  73.   <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  74.  
  75.  
  76.    <div id="result" ></div>
  77.  
  78.  
  79. </td>
  80. </tr>
  81.  
  82. </table>
  83. </form>
  84. </div>
  85.  
  86.  
  87.  
  88. </body>
  89. </html>


« Última modificación: 25 Noviembre 2014, 16:10 pm por Jarcx9 » En línea

Slikp

Desconectado Desconectado

Mensajes: 67


Ver Perfil
Re: Incrustar html en imagen para Formulario
« Respuesta #1 en: 25 Noviembre 2014, 00:13 am »

- No entiendo muy bien que es lo que quieres pero creo que puedes intentar lo siguiente en el Success de tu ajax agregar un append al final con el mensaje que deseas, asi:

Código
  1. success: function(data) {
  2.               $('#result').html(data).append('se envio correctametne');
  3.  
  4.           }
  5.  


En línea

alan++

Desconectado Desconectado

Mensajes: 57


Ver Perfil
Re: Incrustar html en imagen para Formulario
« Respuesta #2 en: 25 Noviembre 2014, 14:28 pm »

Crear un contenedor, aplicarle una imagen de fondo y en el html el input... ¿no es una opcion?
En línea

Jarcx9

Desconectado Desconectado

Mensajes: 10


Ver Perfil
Re: Enviar formulario sin Recargar
« Respuesta #3 en: 25 Noviembre 2014, 16:10 pm »

Muchas gracias por la colaboracion voy a probar

Lo que pasa con el cod que yo tengo es q el div result no hace nada y no me muestra nada, no se si es porque no se trae nada en data. ya que el formulario se envia a una pagina externa.

Lo que quiero es q se muestra un mensaje pues haci como esta solo enviar el mail y no se sabe si se envio en verdad o no

Yo habia echo esto provisional pero si se produce un error aun asi va a mostrar el mensaje.
Código
  1. beforeSend: mostrarLoader,
  2.  
  3.  
  4. function mostrarLoader(){
  5.             // $('#loader_gif').fadeIn("slow"); //muestro el loader de ajax
  6.             $("#ajax_loader").append("Se envio Correctamente ");
  7.        };
« Última modificación: 25 Noviembre 2014, 16:25 pm por Jarcx9 » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Enviar formulario automaticamente
PHP
neopuerta360 6 8,758 Último mensaje 28 Septiembre 2010, 19:48 pm
por ~ Yoya ~
enviar formulario prototype
Desarrollo Web
kakashi20 0 2,191 Último mensaje 7 Noviembre 2011, 20:07 pm
por kakashi20
Enviar formulario a web externa
Desarrollo Web
CeKiT 1 2,044 Último mensaje 6 Julio 2012, 12:57 pm
por el-brujo
[Resuelto] jquery post enviar variables a php sin recargar página
Desarrollo Web
gAb1 1 3,780 Último mensaje 2 Noviembre 2015, 15:23 pm
por gAb1
enviar email sin recargar pagina y mostrar un toastr en spring y thymeleaf solamente
Desarrollo Web
Beginner Web 0 2,598 Último mensaje 24 Junio 2021, 00:49 am
por Beginner Web
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines