CODEWITHSUNDEEP
javascriptforms
icm
icm

Reputation: 71

Confirmation message not displaying on javascript contact form

I have used emailJS.com to create a contact form. The form is working with the code below:

<script type="text/javascript">

  window.onload = function () {
    document.getElementById('contact-form').addEventListener('submit', function (event) {
      event.preventDefault();
      emailjs.sendForm('gmail2', 'filtrastop', this);
      document.getElementById('contact-form').reset();
    });

    document.getElementById('form2').addEventListener('submit', function (event) {
      event.preventDefault();
      emailjs.sendForm('gmail2', 'filtrastop', this);
      document.getElementById('form2').reset();
    });
  }

</script>

I am trying to add a confirmation/error message that is displayed to the user when the form is submitted. After reading the docs (https://www.emailjs.com/docs/sdk/send-form/)

My code now looks like this, but I'm not seeing any messages? Please help!

<script type="text/javascript">

  window.onload = function () {
    document.getElementById('contact-form').addEventListener('submit', function (event) {
      event.preventDefault();
      emailjs.sendForm('gmail2', 'filtrastop', this).then(function (response) {
        console.log('SUCCESS!', response.status, response.text);
      }, function (error) {
        console.log('FAILED...', error);
      });
      document.getElementById('contact-form').reset();
    });

    document.getElementById('form2').addEventListener('submit', function (event) {
      console.log('SUCCESS!', response.status, response.text);
    }, function (error) {
      console.log('FAILED...', error);
    });
  }

</script>

Upvotes: 0

Views: 551

Answers (2)

icm
icm

Reputation: 71

Prabhat was very helpful taking through chat. We managed to get it working exactly as required!

Below is the updated version of the working code:

<script type="text/javascript">
(function(){
emailjs.init("user_##########");
})();
</script>
<script type="text/javascript">
window.onload = function () {
document.getElementById('contact-form').addEventListener('submit', function (event) {
event.preventDefault();
emailjs.sendForm('gmail2', 'filtrastop', this).then(function (response) {
if (response.status == 200 && response.text == 'OK')
alert('Your message has been sent Successfully..!!!');
else
alert('Sorry there was a problem. Please try again...!');
}, function (error) {
alert('Sorry there was a problem. Please try again...!!!');
});
document.getElementById('contact-form').reset();
});

document.getElementById('form2').addEventListener('submit', function(event) {
event.preventDefault();
emailjs.sendForm('gmail2', 'filtrastop', this).then(function (response) {
if (response.status == 200 && response.text == 'OK')
alert('Your message has been sent Successfully..!!!');
else
alert('Sorry there was a problem. Please try again...!');
}, function (error) {
alert('Sorry there was a problem. Please try again...!!!');
});
document.getElementById('contact-form').reset();
});
}

Upvotes: 1

Prabhat
Prabhat

Reputation: 802

Please check your 'form2' addEventListener(). Without calling emailjs.send() your directly use response object you'll get undefined error.You can use first emailjs.send() then use response object. Please check my code.

I have unable to comment so I add my code. Please give your all config key details and run and check my code.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/email.min.js">
</script>
<script type="text/javascript">
    (function () {
        emailjs.init("YOUR_USER_ID");
    })();

    window.onload = function () {
        document.getElementById('contact-form').addEventListener('submit', function (event) {
            event.preventDefault();
            var templateParams = {
                to_name: 'prabhat',
                from_name: 'Tapas',
                message_html: 'Please Find out the attached file'
            };

            emailjs.send('serviceID', 'templateID', templateParams)
                .then(function (response) {
                    if (response.status == 200 && response.text == 'OK')
                        alert('Your message has been sent Successfully..!!!');
                    else
                        alert('Sorry there was a problem. Please try again...!!!');
                }, function (error) {
                    alert('Sorry there was a problem. Please try again...!!!');
                });
            document.getElementById('contact-form').reset();
        });

        document.getElementById('form2').addEventListener('submit', function (event) {
            event.preventDefault();
            var templateParams = {
                to_name: 'prabhat',
                from_name: 'Padhy',
                message_html: 'Please Find out the attached file'
            };

            emailjs.send('serviceID', 'templateID', templateParams)
                .then(function (response) {
                    if (response.status == 200 && response.text == 'OK')
                        alert('Your message has been sent Successfully..!!!');
                    else
                        alert('Sorry there was a problem. Please try again...!!!');
                }, function (error) {
                    alert('Sorry there was a problem. Please try again...!!!');
                });
            document.getElementById('form2').reset();
        });
    }
</script>


<form id="contact-form">
    <button type="submit">Click Me</button>
</form>
<form id="form2">
    <button type="submit">Click Me</button>
</form>

Upvotes: 3

Related Questions