¿utilizar onSubmit o onclick?

al_limon · #1 (**permalink**) 11/05/2014, 15:41

Hola a tod@s!

Después de tiempo siendo solo maquetadora web, ahora estoy empezando a estudiar javascript y tengo varios interrogantes que no se como resolver. Tengo dudas con algo sencillo que estoy aplicando (más bien intentando aplicar) a mi página web (aun en proceso), por eso estaré muy agradecida quien pueda ayudarme a entender que hago mal...

He montado un pequeño formulario de contacto para mi página web, y he creado un mini script que debe ejecutarse cuando se hayan rellenado correctamente los campos del formulario (no antes) y se presione el botón de submit.

Código:

  

    <script>
    function message() { 
    document.getElementById("demo").innerHTML = "Hemos recibido tu mensaje correctamente.<br />En breve nos pondremos en contacto contigo";
}
    </script>
...
      
<form action="#" id="consultanos" autocomplete="on" method="post" target="_self" onSubmit="message">
        <label>nombre *</label><br />
        <input type="text" class="datos" required /><br />
        
        <label>apellidos *</label><br />
        <input type="text" class="datos" required /><br />
               
        <label>población</label><br />
        <input type="text" class="datos" /><br />
        
        <label>email *</label><br />
        <input type="email" class="datos" required /><br />
        
        <label>asunto</label><br />
        <input type="text" class="datos" /><br />
        
        <label>consulta *</label><br />
        <textarea id="cuerpo" required ></textarea>
        <br />
        <br />
	<input type="submit" id="botonenvio" value="enviar">
        <p id="demo"></p>
        </form>

Con el evento onSubmit, el texto del evento no se muestra al presionar el botón (se recarga la página... y eso es algo que no quiero). Si lo hago onClick y lo coloco dentro del submit si que sale el texto, pero no el momento que me gustaría (cuando el formulario esté correcto y se pueda enviar).

¿Cómo puedo hacer que el texto ("Hemos recibido tu mensaje correctamente...") se muestre solo cuando los campos estén rellenados correctamente y se pulse el botón de envío?

Mil gracias de antemano a quien dedique unos minutos a esta causa.

caricatos · #2 (**permalink**) 11/05/2014, 17:03

Hola:

Tal como tienes el código, no llamas a nada, porque falta el juego de paréntesis... cuando lo arregles y lo pruebes, seguimos...

Saludos

Italico76 · #3 (**permalink**) 11/05/2014, 17:06

Primero que todo te felicito por ser maquetadora.... CSS ha sido para mi siempre un imposible... lo odio profundamente jejeje

Segundo, SI se muestra el mensaje que tu quieres lo que pasa es que lo hace e inmediatamente (cuestion de milisegundos) se produce la redireccion con el envio de los datos a la pagina que tu especificas en action="..." y por eso no ves nada :)

Fijate que para eso normalmente se usa alert()

Código Javascript:

Ver original<html>
<head>
<script language="JavaScript">
 
    function message(){ 
        document.getElementById("demo").innerHTML = "Hemos recibido tu mensaje correctamente.<br />En breve nos pondremos en contacto contigo";
        alert("Tu formulario ha sido enviado!");
    }      
    
</script>       
</head>
<body>
<form action="#" id="consultanos" autocomplete="on" method="post" target="_self" onSubmit="message">
        <label>nombre *</label><br />
        <input type="text" class="datos" required /><br />        
        <label>apellidos *</label><br />
        <input type="text" class="datos" required /><br />
               
        <label>población</label><br />
        <input type="text" class="datos" /><br />
        
        <label>email *</label><br />
        <input type="email" class="datos" required /><br />
        
        <label>asunto</label><br />
        <input type="text" class="datos" /><br />
        
        <label>consulta *</label><br />
        <textarea id="cuerpo" required ></textarea>
        <br />
        <br />      
    <input type="submit" id="botonenvio" value="enviar" onclick="message();">
        <p id="demo"></p>
        
</body>
</html>

Prueba y veras

al_limon · #4 (**permalink**) 12/05/2014, 02:17

Hola caricatos!

Una de mis abuelas era de Torremolinos!! (paisano!)

Bueno, dejando eso a un lado, gracias por responderme. De paso te pregunto, ¿Para lo que pretendo hacer es necesario que haya una función? ¿Cual podría venirme bien? Perdona mi ingenuidad va en relación con mi ignorancia sobre el tema ^_^'

Saludos!

al_limon · #5 (**permalink**) 12/05/2014, 02:35

Hola Italico76,

Antes que nada, gracias por tu ayuda, y si algún día necesitas resolver algo sobre CSS no dudes en preguntarme :)

Alert no me encaja (por cuestiones de diseño, esas cuestiones horribles que a veces te amargan la existencia...jeje), de ahí que quiera que se muestre el mensaje en la parte inferior al lado del submit. ¿Quizá lo que ofusca mi propósito sea la acción de envío? O quizá la solución es que la acción cargue la misma página con el mensaje fijo y me deje de javascript?

Bueno, de nuevo gracias.

Un saludo!

Italico76 · #6 (**permalink**) 12/05/2014, 06:04

Cita:

Iniciado por al_limon

¿Quizá lo que ofusca mi propósito sea la acción de envío? O quizá la solución es que la acción cargue la misma página con el mensaje fijo y me deje de javascript?

Hola, hablemos de "usabilidad" :)

Claro que puedes usar "Ajax" o en la práctica Ajaj (lo que es basicamente JavaScript + JSON + lenguaje del lado del servidor como PHP o ASP.NET o Java, etc) y con eso logras el efecto de enviar datos sin moverte de la pagina (sin recargar)

Pero ya sea recargando la pagina del formulario o enviando con "Ajax" me parece que no es buena idea dejar al usuario en la pagina del formulario luego de enviarlo exitosamente porque usualmente al enviar un formulario tu sacas de ahi al usuario (y la "usabilidad" se da porque el sitio tiene un comportamiento "predecible")

(Ajax se utiliza solo para mostrar errores en el formulario haciendo validaciones del lado del servidor (PHP / JAVA / ASP.NET / PYTHON / PERL /etc), validaciones que no podrias hacer en Javascript como por ejemplo si ese nombre de usuario o contraseña ya estan registrados o bien para realizar algun proceso tambien donde necesites algo que no encuentres del lado del cliente. Lo que NO harias es enviar el formulario y en caso de exito quedarte en esa pagina si el resultado es exitoso excepto sea un formulario especial para ingresar en forma secuencial N-cantidad de productos en una base de datos, por ejemplo)

Mas bien creo, deberias enviarlo a una pagina distinta (como un dashboard o el index) especificada en action="pagina.php" donde muestras ese mensaje que quieres ;)

formulario --> dashboard ó el index