AJAX - Problema con hide/show Jquery ajax

   
Vista:
Imágen de perfil de Enrique

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:
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>
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:
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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Vainas

Problema con hide/show Jquery ajax

Publicado por Vainas (71 intervenciones) el 04/01/2015 11:36:52
Buenas:

Pues no hagas:
1
$('#contactform').hide();


Sino mas bien:

1
$('#contact-form').hide();


Fijate que estas ocultando el formulario y no el div anterior.

Espero que aun te sirva.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Enrique

Problema con hide/show Jquery ajax

Publicado por Enrique (3 intervenciones) el 25/01/2015 20:49:23
Muchas gracias, Vainas. Lo había solucionado con otro script, pero revisaré este.
Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar