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
<html>
<head>
<script language="javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
});
$('#form, #fat, #mc-embedded-subscribe-form').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
success: function(data) {
$('#result').html(data);
}
})
return false;
});
})
</script>
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
.form-control {
width: 34%;
height: 30px;
padding: 10px 15px;
font-size: 15px;
line-height: 1.42857143;
color: #2c3e50;
background-color: #ffffff;
background-image: none;
border: 1px solid #dce4ec;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
</style>
</head>
<body>
<div id="mc_embed_signup">
<form action="//ribot-barcelona.us5.list-manage.com/subscribe/post?u=d2c4a68aadfd8d6061877b0b2&id=809315d24f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" >
<table align=center cellpadding=1 cellspacing=2 background="newsletter web_Ribot.jpg" height="415" width="754">
<tr>
<td><br> </td>
</tr>
<tr>
<td><br> </td>
</tr>
<tr>
<td></td>
<td align="right">
<font color="white"><b>E-Mail</b></font> <input type="text" value="" name="EMAIL" id="mce-EMAIL" required class="form-control" > <br><br>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" >
<div id="result" ></div>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
- 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:
success: function(data) {
$('#result').html(data).append('se envio correctametne');
}
Crear un contenedor, aplicarle una imagen de fondo y en el html el input... ¿no es una opcion?
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.
beforeSend: mostrarLoader,
function mostrarLoader(){
// $('#loader_gif').fadeIn("slow"); //muestro el loader de ajax
$("#ajax_loader").append("Se envio Correctamente ");
};