Generating Email Content with Javascript

Confession time: I'm a newbie when it comes to HTML and Javascript, but I'm eager to learn. Currently, I'm working on a little project that involves creating a simple HTML web form for employees to fill out and generate a standard email. While I've managed to get 97% of it working smoothly, I'm facing a roadblock with the final step. Check out the functioning Javascript snippet below:

function populateEmail() { 
    
    let bl = document.getElementById("blurb").value;
    let a = document.getElementById("reg").value;
    let b = document.getElementById("lvl").value;
    let c = document.getElementById("node").value;
    let i = document.getElementById("cust").value;

    let d = document.getElementById("rea").value;
    let e = document.getElementById("ma").value;
    let f = document.getElementById("start_dt").value.replace("T", " ");

    let g = document.getElementById("poc").value;
    let h = document.getElementById("appr").value;

    let m_to = "DL-ListOne; DL-ListTwo; DL-ListThree"
    let m_cc = "DL-ListFour; DL-ListFive;"
    
    let today = new Date();
    let dd = String(today.getDate()).padStart(2, '0');
    let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
    let yyyy = today.getFullYear();
    today = mm + '/' + dd + '/' + yyyy;
    
    let notify = document.getElementById("notify_lvl").value;
    
    let deap = '';
    if (notify == "Initial"){
        deap = "Activation ";
    }
    else if (notify == "Update"){
        deap = "Update ";
    }
    else{
        deap = "De-Activation ";
    }

    document.location.href = "mailto:" + encodeURIComponent(m_to) + "?cc=" + encodeURIComponent(m_cc)
    + " &subject=DEAP " + deap + encodeURIComponent(b) + ": Any Region " + today
    + " "
    + "&body=" 
    + "%0D%0A%0D%0A"
    + encodeURIComponent(bl) + "%0D%0A%0D%0A"
    + "Name: " + encodeURIComponent(a) + "%0D%0A"
    + "Activation – (" + encodeURIComponent(b)
    + "Current Impact = " + encodeURIComponent(c) + " modules, " + encodeURIComponent(i) + " customers) %0D%0A"
    + "Reason: " + encodeURIComponent(d) + "%0D%0A"
    + "Event Geographical Area: " + encodeURIComponent(e) + "%0D%0A"
    + "Event Start: " + encodeURIComponent(f) + "%0D%0A"
    + "POC: " + encodeURIComponent(g) + "%0D%0A"
    + "Approved by: " + encodeURIComponent(h) + "%0D%0A"

}

However, trouble struck when I attempted to incorporate the deap variable into the subject line - the email creation came to a screeching halt. I've experimented with different ways to include it, as shown below:

+ " &subject=DEAP " + deap + encodeURIComponent(b) + ": NE Region " + today

+ " &subject=DEAP " + encodeURIComponent(deap) + encodeURIComponent(b) + ": NE Region " + today

I even considered adding some extra characters or space to activate it, like this: + " " + after the deap variable.

To keep things concise, I've left out my cluttered HTML code, but if you need it, I'm more than willing to share. Also, I'm still struggling to load div from Javascript, as I aim to keep my code DRY (Don't Repeat Yourself).

Thank you for your time and assistance!

Answer №1

One reason for the issue is that deap is being declared within the if conditions:

if ('notify' == "Initial") {
  let deap = "Activation ";
} else if ('notify' == "Update") {
  let deap = "Update ";
} else {
  let deap = "De-Activation ";
}

console.log(deap);

To resolve this, you should declare it outside and assign values inside the if blocks:

let deap;

if ('notify' == "Initial") {
  deap = "Activation ";
} else if ('notify' == "Update") {
  deap = "Update ";
} else {
  deap = "De-Activation ";
}

console.log(deap)

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

Utilize separate environment variables for distinct environments within a React project

Is there a secure method to externalize all environment variables, including secret keys, for a React application within a DevOps setup? Our goal is to streamline the build process across different environments, each with its own unique set of environment ...

Incorporate Object names and Variable names in Javascript programming

I have an object named res and a variable named lea. I need to concatenate. For example: let lea = "abc"; let res = { abc:'steve' }; console.log(res.lea); So my output should be steve. I tried it like this: console.log(res.`${lea}`); ...

Transfer the value of a variable within the local scope to the dragstart event handler during the dynamic generation of an input element

After going through several similar questions, I couldn't find a solution that applies to my specific case. Here is the loop I am working with: $.each(data.modules, function(i, field) { let $li = $(`<li><div> Name: ${field.name}</div& ...

Tips for safeguarding the security of my PHP API when accessed through Ajax using OAuth2

I've developed a cross-origin ajax application that utilizes some personal APIs I created. Now, I'm looking to enhance the security measures so only my application has access to the API. After researching, I came across OAuth2 at OAuth2. I foll ...

Retrieving value from the parent scope using the conventional approach

Today I was puzzled by some unexpected behavior of AngularJS. While using console.log to log $scope, I noticed that there was no key attached to the scope named val1. However, when I used console.log($scope.val1), it returned a value as an object. After ...

Having trouble with the Three.js OBJ loader in CodePen?

Currently, I am experiencing a challenge with loading an OBJ file on Three.js. Oddly enough, the functionality seems to be working perfectly fine when I deploy the files on my server as demonstrated here: However, when attempting to run it on Codepen, I e ...

Tips for organizing data when parsing JSON in Javascript

I am facing a challenge with maintaining the order of JSON data that I am parsing using Javascript and displaying in an HTML SELECT element. The incoming data is already sorted, but I am encountering issues sustaining this order after decoding the JSON str ...

Replacing a div with another div can be achieved in a single swap

My goal is to swap one div with another div upon clicking using the provided code. It functions properly for a single instance. However, the issue arises when the class appears multiple times, causing all instances to change due to sharing the same class n ...

Build desktop-style applications using a unique user interface library and integrated development environment designed specifically for HTML, JavaScript

I am looking to create a desktop application using HTML, JavaScript, and AJAX for the purpose of making it available on multiple platforms. I was wondering if there is a UI library and web IDE similar to WebOS Enyo that I can use to build my HTML/AJAX app? ...

What are the steps to create a JSON file structured in a tree format?

Can you provide instructions on creating a JSON file in the following tree format? root child1 child11 child2 child21 child22 child3 child31 I am looking to generate a sample JSON file that adheres to the ...

The content in the div tag isn't showing up properly because of Ajax

I am facing an issue with my Ajax query. Even though I can retrieve the results by posting, they are not displaying in the designated div tag on mainInstructor2.php. Instead, the results are showing up on a different page - specifically, on InstructorStude ...

"The presence of the $_GET URL parameter following the execution of the pushstate

Running a WordPress website and facing the challenge of updating the URL server-side without reloading the page. On my homepage, there is a button triggered by this code: <button onclick="javascript:window.history.pushState('test','&apo ...

While the Navbar component functions properly under regular circumstances, it experiences difficulties when used in conjunction with getStaticProps

https://i.stack.imgur.com/zmnYu.pngI have been facing an issue while trying to implement getstaticprops on my page. Whenever I try to include my navbar component, the console throws an error stating that the element type is invalid. Interestingly, I am abl ...

Trouble accessing Silverlight site due to incomplete loading

There is a site known as that consists of a Silverlight application. Strangely, this site loads on all other computers except mine. I keep encountering the following error: An Error occurred in the Silverlight Application: String was not recognized as a ...

import shaders from next.js

In my web app built with next.js, I am utilizing WebGL to render a 2D scene. Currently, I have my fragment and vertex shaders hardcoded as strings in my JavaScript: var fragmentShaderSource = [ ` #ifdef GL_ES`, `precision highp float;`, ` #en ...

I'm having trouble getting PHP/AJAX to return the expected XML data - it keeps

I have a JavaScript script that looks like this: function showItems(type) { var xmlhttp = new XMLHttpRequest(); //creating object var call = "getitems"; xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState ...

Unable to update a property with a new value in Vue.js when using the keyup.enter event on an input element bound to that property

I am facing an issue with inputs that have the @keyup.enter event assigned to a method that is supposed to reset the value of variables bound to these inputs to null. Here is an example of my code: methods:{ clear: function () { this.somethin ...

What could be causing my jQuery switch not to function on the second page of a table in my Laravel project?

Having an issue with a button that is supposed to change the status value of a db column. It seems to only work for the first 10 rows in the table and stops functioning on the 2nd page. I'm new and could really use some help with this. Here's the ...

The debate between using backticks and colons in TypeORM queries

Lately, I've been crafting queries utilizing backticks const firstUser = await connection .getRepository(User) .createQueryBuilder("user") .where(`user.id = '${id}'`) .getOne(); However, in the typeorm documentatio ...

Dynamic Data Visualization using ChartJS with MySQL and PHP

I'm trying to create a line chart using chartJs that will display MySQL data. Specifically, I would like to use PHP to push the MySQL data to the chartJs. Here is an example of the MySQL table: id | page_views | visitors | month | ---------------- ...