EmailJS Function Problem: Lack of API Response and Console.log Results

There seems to be an issue with the emailJS library. Despite creating a function to send a copy of a transaction via email using emailJS, there is no response from the API and nothing showing up in the console.log. It appears that the function may not even be getting called. I can't pinpoint what went wrong, but I suspect it's a simple fix that I might have missed.

Below is the config.js file which includes user keys and the mailer function. I've removed the keys for privacy reasons:


// Function to send email
function sendEmail(name, address, city, state, zip, phone, email, amount) {
    // Initialize EmailJS with your user ID
    emailjs.init("public-key-here");
  
    // Create the email parameters
    var templateParams = {
      name: name,
      address: address,
      city: city,
      state: state,
      zip: zip,
      phone: phone,
      email: email,
      amount: amount
    };
  
    // Send the email using EmailJS
    emailjs.send("service_ID", "template_ID", templateParams)
      .then(function(response) {
        console.log("Email sent successfully");
        alert("Mail sent successfully");
      }, function(error) {
        console.log("Email failed to send", error);
        alert("Error sending mail");
      });
  }
  

Here is where the send email function is being called on the payment page:


// Send email and save order details
sendEmail(name, address, city, state, zip, phone, email, amount);
localStorage.setItem('orderDetails', JSON.stringify({
  amount: parseFloat(amount),
  name: name,
  address: address,
  city: city,
  state: state,
  zip: zip,
  phone: phone,
  email: email
}));

I am not receiving any output in my console.log or alerts indicating whether the email was successful or not. Any assistance would be greatly appreciated.

Answer №1

Great news! I finally figured out the solution to my problem. It turns out, by simply wrapping the window.location.href function in a setTimeout() with a 3-second delay, I was able to successfully redirect users to the thank-you page after payment submission. This small change made everything work flawlessly. Apologies for not sharing the full code earlier, but the issue actually stemmed from a separate function on my payment page responsible for navigating users to a new page post-payment. The timing of the emailjs function was off due to the success page loading too quickly, resulting in missed emails and console.log output.

setTimeout(function() {
  window.location.href = "thankyou.html";
}, 3000);  // Delay redirection by 3 seconds

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bring life to the process of adding and removing DOM elements through animation

I am seeking to provide an engaging and interactive experience for my users while ensuring responsiveness. To achieve this goal, I have decided to learn more about web development by creating a card game. My current setup involves clickable elements that ...

What is the best way to generate a JSON file from an object?

I am currently exploring ways to generate a JSON file (versions.json) containing keys and values from an object in JavaScript. The object I have is as follows: ["V1_config-interfaces.json","V2_config-interfaces.json","V3_config-interfaces.json","versions. ...

When using window.open in Chrome on a dual screen setup, the browser will bring the new window back to the

When using the API window.open to open a new window with a specified left position in a dual screen setup (screen1 and screen2), Chrome behaves differently than IE and FF. In Chrome, if the invoking screen is on the right monitor, the left position always ...

Using a form tag within a table in HTML5

Can someone help me figure out how to integrate a form with the "Get" method into a table? The table includes a text field, and upon submitting the form, it should initiate validation. The validation process currently works correctly, however, when submi ...

To collapse a div in an HTML Angular environment, the button must be clicked twice

A series of divs in my code are currently grouped together with expand and collapse functionality. It works well, except for the fact that I have to click a button twice in order to open another div. Initially, the first click only collapses the first div. ...

Navigate to a designated file path on my computer by incorporating either an anchor tag or an input tag

One of my objectives is to create a link or button that, when clicked, will open a specific location on my computer. I am unable to utilize jQuery for this task but can use JavaScript. I attempted to achieve this by using an input tag with the following c ...

Angular JS Troubleshooting: Application Not Functioning Properly

I've been learning AngularJS on codeSchool and I ran into an issue with my simple hello world app. It was working fine at first but then stopped completely. I can't seem to find the bug, so any help would be appreciated. Here is the HTML code: & ...

Exploring Ways to Modify a .txt File with Javascript or jQuery Forms

Looking for a way to access a .txt file offline in the browser and display its data in different form fields for each line. Any tutorials available for this? ...

The focus() function fails to execute properly in Vue for NativeScript when v-for is used

One of the challenges I'm facing involves setting focus on the first textfield when a button is pressed. I found a code snippet in the playground without using v-for and it works perfectly fine. However, as soon as I introduce v-for into the code, e ...

In Javascript, delete everything following a colon except for specific words

I have an address in the following format: "8 51209 Rge Rd 950 Road: Rural Parkland County House for sale : MLS®# E4125520" What I want to do is remove everything after the colon, but keep "Rural Parkland County" intact. So the modified address should l ...

What could be causing the user object to be undefined in the NextAuth session callback function?

I'm experiencing an issue with NextAuth while trying to implement signIn with Discord provider. My goal is to add the userID into the session object using the session callback, but I keep encountering an error message stating: [next-auth][error][JWT ...

Is it possible to include more than one ng-app directive on a single HTML page in AngularJS?

When working with Angular JS, I've noticed that I only get the desired output if I remove either the ng-app directive for demo1 or the models. It seems like having two ng-app directives active at the same time causes issues. As a beginner in Angular J ...

Ways to turn off context menu for mobile devices like smartphones and tablets?

I have come across a variety of JavaScript and jQuery scripts on the internet that claim to disable right-click and context menus, but none of them seem to work properly on mobile devices. Can anyone offer advice on how to accomplish this task effectivel ...

Tips for transferring a JSON object from an HTML document to a JavaScript file

Here is the code snippet: <script id="product-listing" type="x-handlebars-template"> {{#each productsInCart}} <tr> <td> <div class="imageDiv"> <img ...

Difficulties encountered when initiating CRA using npm start

Hi everyone! I'm dealing with a frustrating issue; every time I try to run npm start I keep encountering the error message below: events.js:288 throw er; // Unhandled 'error' event ^ Error: spawn cmd ENOENT To resolve this probl ...

Tips for using Cypress to confirm that an HTML element's height or width exceeds a specific value

This thread on Github demonstrates the method for using Cypress to verify that an element has a specific height. cy.get(mainMenu).should('have.css', 'height', '55px') How can I utilize Cypress to confirm that an element exce ...

The angular controller function fails to pass along its results to another function

Within my controller, I have a function that initializes two empty objects, $scope.orderHistory and $scope.results. The function, named getHistory, takes in parameters max and offset. $scope.orderHistory = {}; $scope.results = {}; var getHistory = functi ...

How to create a smooth and continuous scrolling effect in the Twitter Bootstrap Carousel?

I've implemented a carousel with 8 images using Twitter Bootstrap 3. Currently, the carousel displays 4 images at a time before jumping to the next set of 4. Is there a way to modify it so that the carousel scrolls continuously and slowly through all ...

The log function in React's onClick event is triggered when the state is reset to the same value after being updated

import React from "react" import { useState } from "react" export default function App() { const [count, setCount] = useState({ c: 0 }) console.log(new Date().toString()) console.log(`The output of the object is ${count.c}`) r ...

Tips for updating nested data in mongoose with 2 unique identifiers?

Is there anyone out there with experience in making a Node push function work on nested objects beyond just one level? I'm looking to delve deeper into a second id within the DB model. // Functional code for updating a user at one level with one id ...