"Learn the steps to include a success message in an HTTP POST response once a button has been

Currently, I am utilizing nodemailer along with express...

I aim to incorporate a text message and loading indicator on the front-end to indicate whether the form submission is in progress or not.

.ts

  deliverEmail(value) {    
    console.log('email has been sent');    
    // this.form.reset();
    const info = {
        to: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5820202020183f35393134763b3735">[email protected]</a>',
        subject: this.name,
        txt:  'Email:' + this.email + 
              'Name:' + this.name + 
              'Message:' + this.message
    };
    return this.http.post('http://localhost:3000/api/mail/contact', info).subscribe(      
      data => console.log(data)      
    );
  }

Answer №1

Give this a shot:

sendMessage(value) {    
    console.log('message sent');    
    // this.form.reset();
    const details = {
        to: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7bfbfbfbf87a0aaa6aeabe9a4a8aa">[email protected]</a>',
        subject: this.name,
        txt:  'Email:' + this.email + 
              'Name:' + this.name + 
              'Message:' + this.message
    };
    return this.http.post('http://localhost:3000/api/mail/contact', details).subscribe(      
      success => {alert(success)}, Error => {alert("failed to send message")}    
    );
}

You can also implement bootstrap 4 alerts(or any other alternative): https://www.w3schools.com/bootstrap4/bootstrap_alerts.asp

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

Troubleshooting a Compatibility Problem Between Django and JavaScript

I am trying to dynamically insert a variable into a URL within the code snippet provided, but I keep encountering an error. function initializeDataTable(id){ var columnSize = $('table th').size(); $('#table').dataTable({ ...

Is it possible to convert checkbox values from a form into a JSON format?

HTML snippet : <form class="form-horizontal" id="addpersons" style="padding:20px;"> <fieldset class="scheduler-border"> <!-- Form Title --> <legend class="scheduler-border">Information</legend> <!-- First Name input-- ...

Show the content of a list from a different URL on a webpage using HTML with the

My current task involves retrieving JSON data using Jquery and then displaying the names in a simple HTML list. Typically, the JSON files I work with have a straightforward format like: [ {a:1,b:2},{a:3,b:4}] However, this time, the JSON file is hosted ...

Experiencing difficulties applying a condition in a mongoDB projection

Imagine a scenario where I have a separate collection named 'Collection1' containing the following data: userID: "1" container:[ {"item" : "false", "price" : NumberDecimal("80"), "sizes" : "S", "arrayIndex" : NumberLong(0) } {"item" : ...

Troubleshooting a simple test issue with React AXIOS post in an Express environment

I have successfully created a React front end and used a basic boilerplate to connect it with Express. However, I am now faced with the challenge of setting up a simple RESTful API, and the myriad of options available is overwhelming. My goal is to establi ...

The checkbox generated from the JSON is failing to display the alert when it is clicked

I have been trying to pass checkbox input from JSON into HTML. When I click on the checkbox, an alert should pop up, but it's not working. Here is my code: $aroundCheck='<div id="content">'; foreach ($checkLocation as $checkLocation) ...

Tips on resolving the distinct key issue in React and eliminating it

Attention all React beginners! I'm encountering an issue that states: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `resultTable`. See https://fb.me/react-warning-keys for more information. ...

An issue has been encountered with the Vue Router within the Micro Front End/Web Components setup, displaying the error message: "Uncaught TypeError:

I encountered an issue that I need help with. Here is the scenario: I have built a Vue application called my-admin micro app consisting of 4-5 screens/components (manage user, manage notifications, manage roles, etc.). I created a router.js file where I d ...

The context parameter in Next Js' getStaticProps method gives back the values of "locales", "locale", and "defaultLocale" as undefined

Having an issue with the context parameter from Next Js's getStaticProps function. When I console log it, I am getting "{ locales: undefined, locale: undefined, defaultLocale: undefined }". Even though I am using getStaticProps inside the pages folde ...

Retrieve data from a JSON file to assign to a variable, then access another API to retrieve a second

I am completely new to the world of javascript and json. My previous experience with javascript was quite minimal, about 12 years ago. So, please bear with me as I try to explain my current issue. The problem I am facing involves retrieving a second API UR ...

Issue with the form as the data is not being submitted

I am currently working on implementing a form with an autocomplete feature that fetches data from a backend in JSON format. Additionally, there are input fields within the form that read from state. My goal is to make the page function as follows: 1- The u ...

Utilizing JavaScript to retrieve data from a JSON-parsed SOAP envelope

Welcome to the exciting world of development! This is my first post, so please bear with me if I ask a seemingly silly question. Currently, I am utilizing Xml2js for sending a SOAP request and then converting the response into JSON format. However, I&apos ...

A guide on integrating MySQL table data into React card elements

After successfully populating a React table within a card (see first code snippet below) with MySQL table data, I am now faced with the challenge of populating a card's information with the same SQL data. The image below displays how cards are curren ...

Error encountered during npm installation: Unable to connect, ECONNREFUSED at address 127.0.0.1:808

Just embarking on my first Node.js app development journey, I encountered an error while trying to install Express through npm: Error: connect ECONNREFUSED 127.0.0.1:8080 at Object.exports._errnoException (util.js:870:11) at exports._exceptionW ...

Maximizing Efficiency: Top Techniques for Emphasizing Grid Rows with jQuery

Currently, I am facing an issue with the jQuery code I am using to highlight the selected row in my grid. It seems to be taking longer than anticipated to select the row. Does anyone have suggestions on how I can optimize this code for better performance? ...

What is the best way to set up prettier in VSCODE so that it organizes jsx attributes across multiple lines?

My preference is for the following syntax: <input id="inputForEmail" type="email" className="form-control" aria-describedby="Enter email address" placeholder="Enter emai ...

Issue encountered while attempting to run next.js with express in a local development setup

Struggling to set up next.js with express and node.js. Encountering an error in the terminal when attempting to run a local server with express and node. The issue arises when using 'npm run dev' on the command line. My Package.json configuratio ...

Manipulate Angular tabs by utilizing dropdown selection

In my latest project, I have developed a tab component that allows users to add multiple tabs. Each tab contains specific information that is displayed when the tab header is clicked. So far, this functionality is working perfectly without any issues. Now ...

Angular's directives do not trigger the 'viewContentLoaded' event

I recently created a 'light-gallery' directive that relies on the jquery.lightgallery.js plugin to initialize the $.fn.lightGallery() functions. It is crucial for these functions to be executed after the directive template has been compiled and l ...

Having trouble sending data from the controller to the view in Laravel 8

I am struggling to display data retrieved from the database in my view through the controller. Despite trying various solutions found on similar questions, none of them seem to be effective. My main goal is to showcase a list of employees on my admin page. ...