Problema con hide/show Jquery ajax
Publicado por Enrique (3 intervenciones) el 13/12/2014 12:19:24
Hola todos. Buscando una forma de enviar un formulario sin recargar la página he encontrado en una web un script para hacerlo mediante Jquery/Ajax/PHP
http://www.miguelmanchego.com/2009/ajax-enviar-formularios-sin-recargar-jquery/
El tema es que quiero que al enviar el formulario, el mismo desparezca, y aparezca un mensaje de que el mensaje se ha enviado correctamente.
He retocado el script y lo he conseguido, pero al darle estilo CSS al div que contiene este mensaje, he notado que el script me oculta el mensaje, pero no el div en sí.
Paso el código para ver si alguien ve el error:
El div que quiero que se cargue al enviar el formulario es #result.
Tampoco tengo muy claro las referencias que hay a #form, #fat y #loading
Formulario:
Por si sirve de algo estoy trabajando con plantillas Bootstrap/HTML5
http://www.miguelmanchego.com/2009/ajax-enviar-formularios-sin-recargar-jquery/
El tema es que quiero que al enviar el formulario, el mismo desparezca, y aparezca un mensaje de que el mensaje se ha enviado correctamente.
He retocado el script y lo he conseguido, pero al darle estilo CSS al div que contiene este mensaje, he notado que el script me oculta el mensaje, pero no el div en sí.
Paso el código para ver si alguien ve el error:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script language="javascript">
$(document).ready(function() {
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn(3000);
});
$('#form, #fat, #contactform').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#contactform').hide();
$('#result').html(data);
}})
return false;
});
})
</script>
Tampoco tengo muy claro las referencias que hay a #form, #fat y #loading
Formulario:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="contact-form">
<form method="post" action="envio.php" name="contactform" id="contactform">
<p>
<input name="name" type="text" id="name" placeholder="Nombre">
</p>
<p>
<input name="email" type="text" id="email" placeholder="Email">
</p>
<p>
<input name="subject" type="text" id="subject" placeholder="Asunto">
</p>
<p>
<textarea name="comments" id="comments" placeholder="Mensaje"></textarea>
</p>
<input type="submit" class="mainBtn" id="submit" value="Enviar mensaje">
</form>
</div> <!-- /.contact-form -->
<div id="result"></div>
Por si sirve de algo estoy trabajando con plantillas Bootstrap/HTML5
Valora esta pregunta
0
