[SOLUCIONADO] Mostrar/ocultar divs al enviar formulario

[serbc27]

Tengo un formulario de contacto

<form method="post" action="<? $_SERVER['PHP_SELF'] ?>">
...
</form>

Y lo que necesito hacer es que al enviar el formulario si se ha enviado correctamente el formulario el div del form desaparezca y salga otro div avisandome del envio correcto de los datos.

Lo que necesito es que todo se realizace en la misma pagina

Digamos que seria asi


DIV FORMULARIO - ¿ENVIO CORRECTO? - OCULTAR DIV FORMULARIO/MOSTRAR DIV MENSAJE



Espero que me haya explicado bien

[Alexis88]

Eso lo puedes hacer con Javascript o con su librería jQuery, no con PHP pues eso concierne a la capa de presentación, no a la del negocio. Como quieres que se muestre en la misma página (imagino que sin refrescarla), debes de usar Ajax.

En JS, colocarías algo como esto (trabajando con jQuery):

Código Javascript:

$("form").submit(function (e) {
    e.preventDefault(); //Evitas el envío "normal" del formulario
    $.ajax({
        url: $(this).prop("action"), //La página que procesará los datos
        type: $(this).prop("method"), //El método elegido para enviar los datos
        data: $(this).serialize(), //Creamos una "string query" con los datos del formulario
        success: function (response) {
            $(this).hide(); //Ocultamos el formulario
            $("#resultado").html(response).show(); //Insertamos el resultado de la operación en el Div y lo mostramos
        }
    });
});
 

Saludos

[serbc27]

Se me ha olvidado comentar que el formulario tengo un captcha, para evitar spam y lo que hago es enviar con la funcion mail los datos del formulario

Iniciado por Alexis88

Eso lo puedes hacer con Javascript o con su librería jQuery, no con PHP pues eso concierne a la capa de presentación, no a la del negocio. Como quieres que se muestre en la misma página (imagino que sin refrescarla), debes de usar Ajax.

En JS, colocarías algo como esto (trabajando con jQuery):

Código Javascript:

$("form").submit(function (e) {
    e.preventDefault(); //Evitas el envío "normal" del formulario
    $.ajax({
        url: $(this).prop("action"), //La página que procesará los datos
        type: $(this).prop("method"), //El método elegido para enviar los datos
        data: $(this).serialize(), //Creamos una "string query" con los datos del formulario
        success: function (response) {
            $(this).hide(); //Ocultamos el formulario
            $("#resultado").html(response).show(); //Insertamos el resultado de la operación en el Div y lo mostramos
        }
    });
});
 

Saludos

[Alexis88]

Pero no hay problema, en el archivo que procesa los datos, verifica que la función mail() se ejecute correctamente y dependiendo de eso, se muestra un mensaje, por ejemplo:

Código PHP:

echo mail($email_to, $email_subject, $email_message, $headers) ? "Datos enviados" : "Error";
 

Ese resultado será devuelto por el servidor a la página y con lo que te indiqué en la respuesta anterior, dicho mensaje se mostrará en el Div.

[serbc27]

Haber si entiendo

Hay que crear una pagina para el formulario (form.php) y otra que procesa los datos (enviar.php).

En enviar.php lo que hago es hacer todas las comprobaciones Captcha, envio, ....

Para el captcha

$captchat=$_POST['Captcha']
$captchaim=$_SESSION['Captcha'];

if ($captchat <> $captchaim){
echo "<spam class='incorrecto'>Codigo spam incorrecto</spam>";
}

y para la funcion mail

$enviado=mail(....);
if ($enviado){
echo "<span class='correcto'>Datos enviados correctamente</span>";
}else{
echo "<span class='incorrecto'>Ha habido un problema con el envio</span>";
}


Gracias y perdon por las molestias

[Alexis88]

Puedes realizar el envío de datos a la misma página, a fin de cuentas, es la respuesta del servidor la que determinará el mensaje a mostrarse. El Div de la respuesta lo puedes mantener oculto y cuando envíes los datos, con ese script que indiqué más arriba, ocultas el formulario y muestras el Div con la respuesta, con lo que ya no sería necesario que crees esa etiqueta <spam>.

[serbc27]

Iniciado por Alexis88

Puedes realizar el envío de datos a la misma página, a fin de cuentas, es la respuesta del servidor la que determinará el mensaje a mostrarse. El Div de la respuesta lo puedes mantener oculto y cuando envíes los datos, con ese script que indiqué más arriba, ocultas el formulario y muestras el Div con la respuesta, con lo que ya no sería necesario que crees esa etiqueta <spam>.

Ya te he entendido, la instruccion url: $(this).prop("action") seria el post action del formulario.

Muchas gracias