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? Commented el 13 ene. 2017 a las 17:49
  • Gracias ahi lo agregue! Saludos! Commented 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
    Commented el 13 ene. 2017 a las 18:23
  • Perfecto! se me había escapado ese detalle, funciona perfecto. Gracias! Commented el 13 ene. 2017 a las 18:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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