[SOLUCIONADO] ¿Cómo hacer para que la navegación permanezca en formulario de contacto?

[Estebam]

Muy buenas, he diseñado una página web donde todo el contenido esta en una sola página usando una plantilla que tiene "navegación responsive".

El problema que estoy teniendo es que al hacer clic en el botón "enviar" en la sección donde esta el formulario de contacto se inicia una acción y se va a la sección donde esta la página de inicio. El objetivo es que al hacer clic se mantenga en la sección del formulario ya que si no se han colocado datos saldra un aviso (para colocar los datos) y si los datos se han colocado correctamente saldrá otro aviso de OK.

[URL="http://www.dentalweb.com.uy/tinube/index.php"]http://www.dentalweb.com.uy/tinube/index.php[/URL]

Gracias de antemano y un cordial saludo!!!

[alberto510a]

Hola.

Miré el código de tu formulario y te falta por definir una acción por eso no hace nada.

Esto es lo que tienes:

Código:

<form action="" method="post">

Debes definir que el formulario sea procesado por un archivo php por ejemplo al que le pases los valores de este y determines las acciones siguientes.

Saludos.

[C2am]

Otra alternativa, o visión, es que el script esté realmente en la misma página, lo cual explica el action="", pero que debido a los firuletes del jquery al refrescar la página no vaya de nuevo a la parte del formulario.
Esto se ve al apretar el botón de enviar sin cargar ningún dato y una vez recargada yendo a la sección del formulario.

Para eso deberías revisar el código js del jquery y acomodarlo para que cuando se acceda al formulario te vuelva a redirigir a esa misma sección.
De js o jquery, yo nada de nada, así que espera a alguien que sepa.

Saludos

[alberto510a]

Como te dicen la web la tienes toda en una misma página pero el efecto ese de que te lleve al formulario y se vea que pasa por la página de inicio no lo veo bien. Por eso yo usaría un php para que procede los datos y te mande a esa sección del tirón de nuevo sin pasar por otra o incluso podrías usar ajax para que no tengas que recargar la página si quiera

[Estebam]

Gracias alberto510a y C2am por sus respuestas.

Como dice C2am todo esta en una sola página es por ello la explicación de el action="".

Exactamente el problema es que debido al tipo de navegación realizada con el JQuery y el botón del formulario que hace que la página se refresque, esta termina mostrando la sección del inicio.

¿Alguien podría ayudarme con el JQuery para hacer que el botón del formulario vaya a la sección href="#page5" de la página? (esa es la sección del formulario).

Un saludo, muchas gracias!!!

[C2am]

Creo que lo mejor sería el uso de ajax para el formulario.
Jquery tiene una forma de tratar formularios mediante ajax, creo que sería lo mejor.

Saludos

[Estebam]

Gracias por tu respuesta C2am!!!

¿Podría alguien mostrarme el uso del ajax para este formulario? (tal como menciona C2am en su respuesta).

No soy tan versatil en estos temas y es por ello que pido ayuda acá en los foros.

Gracias de antemano, un saludo.

[alberto510a]

Hola mira.

Código:

/*Primero hacemos que cuando el documento este listo realize todas las funciones siguientes*/
$(document).ready(function(){

/*Ahora debes buscar como usar el método ajax(); de jQuery y sustituir en los parámetros que tiene posibles (Sino sabes leete los parámetros y dime cuales quieres poner y yo te digo) */

/*Quedaría algo tipo al clickar en el botón de enviar el formulario se procesa este archivo php y dentro del archivo php pasaríamos los datos y usaríamos header("Location:http://www.dentalweb.com.uy/tinube/#page5"); para redirigirnos*/

});

Saludos

[Estebam]

Gracias por tu respuesta alberto510a.

De antemano te pido disculpa por mi ignorancia. Revisando diferentes funciones del método ajax(); de jQuery, encontré este ejemplo:

Código:

<script type="text/javascript">

  $(document).ready(function() {
$(".boton").click(function(event) {
$("#caja").load('carga.html',aviso());
});
});
function aviso(){
alert('La solicitud ha sido procesada');
}
</script>

¿Se puede modificar este código para hacer que funcione en mi página?

Quisiera saber donde buscar especificamente para realizar los cambios pertinentes pero estoy dando tumbos por mi falta de experiencia.

Un saludo y agradezco la paciencia.

[alberto510a]

Hola.

Lo siento pero el método load() no es como ajax() el método load sirve simplemente para cargar un archivo en un elemento de tu página pero no le puedes pasar información. Cosa que supongo que a ti te interesa (ya que creo que si rellenan el formulario quieres ver los datos jeje).

Te pongo la manera más sencilla de conseguirlo tan solo por php.

1º Debes cambiar donde pone action a un archivo php con esta información, o bien, pones como action el mismo archivo y le metes esta informacion:

Código:

//Recogemos datos
$correo = $_POST["correo"];
$consulta = $_POST["consulta];

/*Una vez almacenada en la cantidad de variables que quieras la información recogida por el post, conectas con la base de datos e insertamos los datos*/

$conexion = mysql_connect ("localhost", "usuario", "pass") or die ("Error al conectar al servidor");
mysql_select_db("mibd", $conexion); or die ("Error al seleccionar bd");
mysql_query("insert into mitabla (correo, consulta) values ('$correo','$consulta')",$conexion);
mysql_close($conexion);

/*Una vez hayamos terminado la inserción de datos, redireccionamos*/

header("Location:http://www.dentalweb.com.uy/tinube/#page5");

Con esto valdría para recoger datos y que te mande a donde es. Si quieres que no se recargue la página debes usar AJAX que eso es algo más complejo. Aquí te dejo un ejemplo de como sería la forma con ajax(); tampoco es que sea mucho más difícil solo debes seguir los pasos:

[URL="http://www.codigonexo.com/blog/ajax/formulario-con-ajax-y-jquery/"]Ejemplo ajax();[/URL]

Saludos

[Estebam]

Gracias por tu respuesta alberto510a.

Quería implementar la solución con ajax porque me gusto la idea de que no recargara la página, el problema siempre es implementar el código (aún más cuando no tienes experiencia programando).

Alberto te agradezco el link que pasaste porque me dio una idea de lo que tendría que hacer, conseguí la solución en otra web:

http://www.freshdesignweb.com/15example-ajax-contact-form-with-php-tutorials.html

Muchas gracias, un cordial saludo!!!