Formulario PHP que cargue la validación en el mismo DIV

Hola de nuevo a todos;

Veréis, estoy realizando el formulario de contacto de una web.

La web esta alojada en la siguiente página: http://www.ingenniacomunicacion.com/nobilna/

El formulario de contacto está aquí: http://www.ingenniacomunicacion.com/nobilna/contacto.html

El formulario envia mediante el método POST los datos introducidos a una página que he llamado contacto.php, que la que se encarga de envíar el mail previa validación con un archivo javacript.

El formulario funciona perfectamente pero el mensaje de validación, diciéndo que el formulario se ha enviado correctamente me aparece en un nuevo html, cuando lo que me gustaría sería que apareciese en el div contenedor del propio formulario.

Os pongo el código del contacto.html del formulario

Código :

<form method="post" action="contacto.php" id="ContactForm" onsubmit="return Validar(this);">
                    <table width="100%" height="100%" class="contacto">
                    <tr>
                        <td><label for="name"><span class="rojo">*</span> Nombre:</label></td><td align="right"><input type="text" name="name" id="name"/> </label><br /></td>
                    </tr>
                    <tr>
                        <td><label for="email" class="label_contacto"><span class="rojo">*</span> e-mail:</label></td><td align="right"><input type="text" name="email" id="email"/> </label><br /></td>
                   </tr>
                   <tr>
                        <td><label for="telefono" class="label_contacto"><span class="rojo">*</span> Tel&eacute;fono:</label></td><td align="right"><input type="text" name="phone" id="phone"/> </label><br /></td>
                   </tr>
                   <tr>
                        <td><label for="asunto" class="label_contacto"><span class="rojo">*</span> Asunto:</label></td><td align="right"><input type="text" name="subject" id="subject"/> </label><br /></td>
                   </tr>
                   <tr>     
                        <td><label for="mensaje" class="label_contacto"><span class="rojo">*</span> Mensaje:</label></td><td align="right"><textarea name="message" id="message" rows="5" cols="30"></textarea></label><br></td>
                   </tr>
                   <tr>         
                        <td>&nbsp;</td><td align="right"><input type="submit" name="submit" value="Enviar" style="width:100px; color:#666666;"/></td>
                   </tr>
                   </table>
                   
</form>

Y aquí tenéis el código del archivo contacto.php

Código :

<?php
//Importamos las variables del formulario
@$name = addslashes($_POST['name']);
@$email = addslashes($_POST['email']);
@$phone = addslashes($_POST['phone']);
@$subject = addslashes($_POST['subject']);
@$message = addslashes($_POST['message']);

//Preparamos el mensaje de contacto
$cabeceras = "From: $email\n" //La persona que envia el correo
 . "Reply-To: $email\n";
$asunto = "$subject"; //El asunto
$email_to = "[email protected]"; //cambiar por tu email
$contenido = "$name le ha enviado el siguiente mensaje:\n"
. "\n"
. "$phone\n"
. "\n"
. "$message\n"
. "\n";

//Enviamos el mensaje y comprobamos el resultado
if (@mail($email_to, $asunto ,$contenido ,$cabeceras )) {
//Si el mensaje se envía muestra una confirmación
die("Muchas gracias, su mensaje fue enviado correctamente");
}else{
//Si el mensaje no se envía muestra el mensaje de error
die("Error: Su mensaje no pudo ser enviado, intente más tarde");
}
?>

A ver si me podéis echar un cable por favor que ando loco puto con ésto.

Mil millones de gracias por adelantado;

Un saludo!

Marcos Nieto

¿has probado con jquery?

yo cargaría con load el mensaje de4 error para la validación con js, pero además me encargaría de luego validar los datos por php, en caso de error en esa validación haría una pagina de error algo mas básica, ya que se supone que esa validación no debiera por que fallar al menos que sea un ataque o alguien con js desactivado(el 0.1% de la población)

sip prueba con jquery o con ajax directo si no entiendes como funciona con jquery puedes probar con ajax puro y javascript saludos

Hola a ambos y muchas gracias. Podriais explicarme un poco como hacerlo con jquery, estoy algo pez en el tema.

Muchas gracias!!!

Nada mas facil hermano clabber.
Paso 1: Consiguete jquery [url=http:/jquery.com]aqui[/url], descargalo y cambiale el nombre al archivo que descargaste por jquery.js, despeus que lo hayas desempaketado.
Paso 2: Cargalo en el raiz de tu web y vinsulalo a tu documento

Código HTML :

<script language="javascript" src="jquery.js"></script>

Paso 3: Ahora nos encargaremos puntualmente del envio de tu formulario, la validacion te la dejo a ti, coloca esto dentro del header de contacto.html:

Código HTML :

<script language="javascript">
$(document).ready(function(){
 $(#ContactForm).submit(function(){
  $name = $('#name').val();
  $email = $('#email').val();
  $phone = $('#phone').val();
  $subject = $('subject').val();
  $mensaje = $mensaje('#mensaje').val();
  $nc = Math.random();
  $.post('contacto.php',{'name':$name,'email':$email,'phone':$phone,'subject':$subject,'mensaje':$mensaje,'nocache':$nc},function(data){
   $('#resultado').html(data);
   $('#ContactForm).reset();
  });
 });
};
</script>

Paso 4: Agrega debajo del formulario o dentro de la misma tabla de tu form o donde más te plazca una celda o un div que marque como Id "resultado".
Paso 5: Play and Enjoy .
Pruebalo y cuentanos como te fue.

buen tip NeoCesar

en clab hay mucho material sobre jquery es cosa de buscar

Hola amigos, necesito de su ayuda, estoy haciendo una web y estoy teniendo problemas. Tengo un iondex.html, en el se carga todo el contenido de mi Web, estoy trabajando con estilos css, y javascript.
Tengo un div id="menu" donde tengo mi menú, el contenido de cada uno de ellos lo cargo en un DIV llamado contenido, todo bien, todo ok hasta ahí, pero cuando cargo mi formulario de contactos en el DIV id="contenido" y luego lo envío, no me valida el form, si lo dejo vacio, pasa igual.
Sin embargo, doy la ruta completa de la carpeta en el navegador, y si lo valida.
Por ejemplo: colocando: http://localhost/miweb/# (Acá el contenido se carga en el DIV y no me valida)
En este caso poniendo toda la ruta: http://localhost/miweb/contacto/contactenos.html (Acá si valida todo)
Les dejo mi código, espero me puedan dar una manito.

-------------------------------------------------------------------------------
index.html
--------------------
<html>
<body>
<div id="menu_web">

<div id="menu">
<ul>
<li><a href="#" class="current">Inicio</a></li>
<li><a href="javascript:Carga('videos/videos.php', 'contenido');" title="Videos Ko'kayak">Videos</a></li>
<li><a href="" target="_parent">Web amiga</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="javascript:Carga('contacto/contactenos.html', 'contenido');" class="last">Contáctenos</a></li>
</ul>
</div> <!-- fin de menu -->
</div> <!-- fin div menu_web -->
<div id="contenido">

<div class="cabecera">Bienvenido a nuestra Web!</div>
</div><!--fin contenido-->
</body>
</html>
-----------------------------------------------------------------------------------------
contactenos.html
------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery.js" ></script>
<script type="text/javascript" src="../js/validacion.js" ></script>
<script type="text/javascript" >
<title>::Formulario de contacto::</title>
var filters = {
requerido: function(el) {
return (
$(el).val() != '' && $(el).val() != -1);
},
email: function(el) {
return /^[A-Za-z][A-Za-z0-9_]*@[A-Za-z0-9_]+\.[A-Za-z0-9_.]+[A-za-z]$/.test($(el).val());},
telefono: function(el){
return /^[0-9]*$/.test($(el).val());
}
};
</script>
<script language="javascript">
$(document).ready(function(){
$(#formulario).submit(function(){
$nombre = $('#nombre').val();
$email = $('#email').val();
$subject = $('subject').val();
$mensaje = $mensaje('#mensaje').val();
$nc = Math.random();
$.post('contacto.php',{'nombre':$nombre,'email':$email,'subject':$subject,'mensaje':$mensaje,'nocache':$nc},function(data){
$('#resultado').html(data);
$('#formulario').reset();
});
});
};
</script>
<style type="text/css">
<!--
body {
background-color:#eee;
}
.cajas{
-moz-border-radius: 15px;
background-color:#E6E6E6;
border : 1px solid #000000;
font-family : "Courier New", Courier, monospace;
font-size : 12px;
padding-left : 7px;
padding-right : 7px;
}
.etiquetas{
background-color:#eee;
font-family : "Courier New", Courier, monospace;
font-size : 15px;
padding-left : 7px;
padding-right : 7px;
}
.etiquetastitulo{
background-color:#eee;
font-family : "Courier New", Courier, monospace;
font-size : 25px;
padding-left : 7px;
padding-right : 7px;
}
.etiquetabtn{
-moz-border-radius: 15px;
background-color:#7CB4DC;
border : 1px solid #000000;
font-family : "Courier New", Courier, monospace;
font-size : 12px;
padding-left : 7px;
padding-right : 7px;
}

input.error {
background-color:#E8A459;
color:#fff;
}
-->
</style>
</head>

<body>
<form name="formulario" class="validable">
<p align="center"><strong><span class="etiquetastitulo"> Formulario de contacto</span></strong></p>
<table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
<br> <tr>
<td width="190"><span class="etiquetas">Nombre</span></td>
<td><div align="right">
<input name="nombre" type="text" id="fnombre" class="requerido cajas" title="Introduzca la Razón Social">
</div></td>
</tr>
<!-- Nuevas filas-->

<tr>
<td><span class="etiquetas">Correo Electronico </span></td>
<td width="210"><div align="right">
<input name="email" type="text" class="requerido cajas">
</div></td>
</tr>
<tr>
<td><span class="etiquetas">Mensaje</span></td>
<td><div align="right">
<textarea cols="21" rows="4" name="mensaje" id="fmensaje" class="requerido cajas"></textarea>
</div></td>
</tr>

<tr>
<td height="42">&nbsp;</td>
<td>
<div align="right">
<input type="submit" name="agregar" class="etiquetabtn" value="Enviar">
</div> </td>
</tr>

</table>
<div id="resultado" align="center"> acá el resultado del formulario</div>
<p>&nbsp;</p>
</form>
</body>
</html>
---------------------------
Utilicé el código de envío del amigo NeoCesar.

Muchas gracias de antemano, siento no abrir un nuevo tema, pero es para seguir el hilo de este.

Sandrillo

¿acaso tienes la mas minima espereanza que un profesional ocupado como yo lea esa tremenda cantidad de texto solo por que el señorito le da flojera hacer un resumen?


¡ABREVIA! no mas de 10 lineas incluyendo codigo, si pones codigo usa la etiqueta [code]

sandrillo escribió:

Te has fijado que tu campo nombre tiene por id "fnombre" tu campo email no tiene "id" solo "name" lo mismo de nombre para mensaje su id es "fmensaje" por favor antes de usar un tip lean la documentacion recomendada en este caso lean la seccion documentation de la pagina de jQuery, si invocas el contenido o valor de un elemento html mediante un selector de id esto es anteponiendo el simbolo "#" asegurate que el elemento que llamas tenga el mismo id que indicas en tu JavaScript

Corrige tu codigo man el name y el id SI pueden ser iguales, verifica que las llamadas a selectores "#" contengan el mismo nombre que el indicado para el Id respectivo

Corrige prueba y comentanos

P.D. Por favor en verdad abrevia si vas a pedirnos ayuda