2

Necesito resolver un problema, tengo un formulario muy sencillo que quiero enviar por mail a través del servicio EmailJS. Para ello le puse un onclick al botón enviar del formulario con la función Javascript send(). A continuación les dejo el código Javascript:

//Guardo los valores del formulario en variables
var name = document.getElementById('name').value;
var subject = document.getElementById('subject').value;
var email = document.getElementById('email').value;
var message = document.getElementById('message').value;

// Esta es la funcion que inicia el servicio EmailJS
(function(){
    emailjs.init("user_Hit3AKxYC1qvLfRZm2mBo");
})();

// Mi funcion para realizar la validacion y el envio del formulario
var send = function() {
    if (name !== "" && subject !== "" && email !== "" && message !== "") {
        // Esta funcion es la que envía el formulario por EmailJS
        emailjs.sendForm('gmail','contact_form','contact-form');
        document.getElementById('contact-form').reset();
        alert("Your message was sent successfully.");
    } else {
        alert('You must fill in all fields');
    }
};

Y acá el HTML del form:

    <form name="contact-form" id="contact-form" class="form col-md-8 col-center" method="post">
        <input type="text" name="name" id="name" placeholder="Name" required>
        <input type="text" name="subject" placeholder="Subject" id="subject" required>
        <input type="email" name="email" id="email" placeholder="E-mail" required>
        <textarea name="message" placeholder="Message" id="message" required></textarea>
        <div class="submit"> 
            <input type="submit" onclick="send()" name="submit" value="Send">
        </div>
    </form>

La validación que pretendo es, simplemente que controle que estén todos los campos con información válida.

Con este código siempre me retorna false y no me manda el formulario. Es un tema del if, pero no me doy cuenta dónde está el error.

2
  • En principio no parece haber nada raro. ¿Podrías poner la parte del código HTML donde se encuentran los campos del formulario? el 13 ene. 2017 a las 17:49
  • Gracias ahi lo agregue! Saludos! el 13 ene. 2017 a las 18:01

2 respuestas 2

1

Puede ser un problema en tiempo de ejecución.

Imagino que tu código Javascript está en un archivo js. Si estás cargando ese archivo js en el <head></head> puede que cuando invocas las declaraciones de name, subject, email, message se produzcan antes de que el navegador haya renderizado la página.

Tienes varias opciones:

  • Cargar el archivo js con el evento onload en el body.

  • Pasar la declaración de las variables dentro de la función, así:

// Esta es la funcion que inicia el servicio EmailJS
(function(){
    emailjs.init("user_Hit3AKxYC1qvLfRZm2mBo");
})();

// Mi funcion para realizar la validacion y el envio del formulario
var send = function() {

    //Guardo los valores del formulario en variables
    var name = document.getElementById('name').value;
    var subject = document.getElementById('subject').value;
    var email = document.getElementById('email').value;
    var message = document.getElementById('message').value;

    if (name !== "" && subject !== "" && email !== "" && message !== "") {
        // Esta funcion es la que envía el formulario por EmailJS
        emailjs.sendForm('gmail','contact_form','contact-form');
        document.getElementById('contact-form').reset();
        alert("Your message was sent successfully.");
    } else {
        alert('You must fill in all fields');
    }
};
1

Creo que el problema es que estás cargando el siguiente valor cuando se carga la página, y en ese momento los campos están vacíos.

var name = document.getElementById('name').value;

Luego, cuando ejecutás la función para enviar el mail, validás los campos vacíos.

Algo así debería funcionar:

//Esta es la función que inicia el servicio EmailJS
(function(){
    emailjs.init("user_Hit3AKxYC1qvLfRZm2mBo");
})();

//Mi función para realizar la validación y el envío del formulario
var send = function() {

    //Guardo los valores del formulario en variables
    var name = document.getElementById('name').value;
    var subject = document.getElementById('subject').value;
    var email = document.getElementById('email').value;
    var message = document.getElementById('message').value;
    if (name !== "" && subject !== "" && email !== "" && message !== "") {
        // Esta funcion es la que envía el formulario por EmailJS
        emailjs.sendForm('gmail','contact_form','contact-form');
        document.getElementById('contact-form').reset();
        alert("Your message was sent successfully.");
    } else {
        alert('You must fill in all fields');
    }
};
2
  • 1
    Tu respuesta en que mejora la de Nacho en la red? porque desde mi punto de vista son iguales
    – JuankGlezz
    el 13 ene. 2017 a las 18:23
  • Perfecto! se me había escapado ese detalle, funciona perfecto. Gracias! el 13 ene. 2017 a las 18:37

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.