Issue with closing newly opened window after utilizing mailto function in JavaScript

When I click the button to send an email, it is working fine but an extra window opens during the process and I am unable to close it even after trying the close method. This issue occurs in both IE 10 and IE 11.

Below is the code snippet:

<html>
<head>
<script type='text/javascript'>
    function sendMail(){

        var wi = window.open('mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92e1fdfff7fdfcf7d2f7eaf3ffe2fef7bcf1fdff">[email protected]</a>?subject=' + encodeURIComponent(document.getElementById("metric").value));
        wi.close();     
   }

</script>
</head>
<body>

<h4>Send e-mail to committee with below subject:</h4>

<form action="javascript:sendMail()" method="post" enctype="text/plain">

<select id="metric">

  <option value="test1">test1</option>
  <option value="test2">test2</option>
</select>
<br><br>

<input type="submit" value="Send">

<p></p>
</form>
</body>
</html>

Answer №1

In my opinion, this is not the correct approach to take.

A mailto: link will simply open the user's default email client. If you remove the attempt to close the window in your script, you will notice this behavior. However, to actually send a complete email with sender information, etc., the user would still need to manually trigger the send action in their email client.

Typically, the best practice is to send the request to the server and have the server utilize an SMTP service (which most servers have) to construct and send the email. The process is quite straightforward, although the specifics may vary depending on the server hosting your solution.

To the best of my knowledge, there is no pure JavaScript/server-less method to achieve this. This limitation is logical when considering potential security risks; allowing scripts on webpages to send out mass emails could easily be exploited by malicious individuals.

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

The error message "Unexpected character at line 2, column 1 of JSON data" is indicating an issue with parsing the JSON data

Here is the structure of my JSON string: {"Peter":"35","Ben":"37","Joe":"43"} This PHP code demonstrates how the data is formatted: class Products{ public function example(){ $results ...

Sharing a unique JSON message on Slack via a webhook

Is there a way to send a custom JSON message with indentation using a Slack webhook in a Node.js app? var Slack = require('slack-node'); var JsonMessage = process.argv[2]; webhookUri = "https://hooks.slack.com/services/XXXX/xxxx/xxxxxxxx"; sla ...

The technique of using Javascript x to escape characters is

I've come across a handful of other software programs that feature a similar construct: let str = '\x32\x20\x60\x78\x6e\x7a\x9c\x89'; As I experimented with the sequence of numbers and letters within ...

The JavaScript code is not being executed, as the address bar displays the function name instead

In my project, I have created numerous "js-classes" with various functions spread across different files. Unfortunately, the codebase is too large to share entirely. However, towards the end of the project, I encountered a bug where a specific function wa ...

Tips for vertically aligning arrows in slick slider in relation to the image with text below

As shown in the image, my arrows are positioned at the top 50% relative to the height of the slide container. [1]: https://i.sstatic.net/DjEZh.png ...

Looking for some essential reading to kickstart your learning journey in webOS/Mojo SDK development?

As I embark on my journey into webOS and the Mojo SDK, I am thoroughly enjoying the experience. However, I keep finding myself having to veer off course to learn about various topics like JSON, JavaScript, and more. In hindsight, I realize that it might ha ...

"Is there a way to initiate a WebKit animation once the webpage has finished loading

My header wrapper has an animation that I want to start only after the page has completely loaded. Unfortunately, it seems like the animation starts before the page finishes loading. I found a function on CSS Tricks that I am currently using here. The is ...

Substitute the Iframe element with Ajax technology

Currently, I am working on a project where I want to include previews of various websites within my own website. Right now, I am using Iframes to load the website previews and allow users to interact with them. For SEO purposes, I have decided to replace ...

Unusual occurrences when making several ajax requests to a single URL

I've encountered a peculiar scenario while working on a CherryPy server, and I'm seeking assistance in understanding the intricacies behind it. Here's the content of server.py: import cherrypy import os import threading class Root(object): ...

What is the correct way to utilize the WhatsApp API for sending messages?

Trying to incorporate WhatsApp API notifications into my app has been a challenge. Despite extensive research, I have yet to find an official solution. The existence of the WhatsApp API Business is known, but it currently remains in beta and caters to com ...

Exploring VueJs 3: Strategies for loading and implementing actions on a component before mounting

Briefly: Can a virtual node be created outside of the DOM to preload images, seek videos... without ever being mounted in the real DOM? Detailed version: I want to ensure that the next slide appears only when it is fully initialized for a slideshow in Vu ...

Ways to transfer variables between JavaScript files using a deferred function

I am encountering an issue while trying to retrieve a json object from another JS file. It appears to be a timing problem as the setTimeout function I added runs twice; first with the object correctly populated, and then again with the object becoming unde ...

Exploring the Fundamentals of XSS

Currently, my technology stack consists of Symfony2, Twig, and Doctrine. When it comes to securing my website, I am particularly concerned about preventing XSS attacks. However, despite taking precautions, I'm not sure what more I can do. Persisten ...

Activate a Transition Animation upon insertion into the DOM

I'm attempting to insert a new element into the DOM and then apply a new class to activate a transition animation. // -- 1 -- Circle is already present in the DOM // <div class="circle circle1 hwaccel"></div> $('.circle1').addCl ...

What term is used to describe this in recursion?

I am trying to understand the concept of reversing a linked list and I stumbled upon a peculiar scenario in which a recursive function doesn't "return" but instead just calls itself. It seems that the function processes data backwards after the recurs ...

ng-hide not refreshing

I've encountered an issue while trying to change the view being displayed through a broadcast in my application. Despite updating the model in the controller, the ng-show does not reflect the new state. To make the RegisterForm controller visible, I ...

Struggling to locate the element in Selenium using Python to submit a search query

I am a beginner with Selenium and I'm currently attempting to input text and click a submit button in order to navigate to the search result page. I have attempted: Finding an element by class name, but it doesn't work due to having a space. ...

When working with React JS and the react-select library, I am looking to automatically reset the options to their default value once

I am attempting to disable the select list after unchecking the checkbox and resetting the select value back to default, but currently it is retaining the last selected option. I am utilizing React-select for the select and options in this scenario. APP.j ...

Can a webpage be sent to a particular Chromecast device without using the extension through programming?

My organization has strategically placed multiple Chromecasts across our facility, each dedicated to displaying a different webpage based on its location. Within my database, I maintain a record of the Chromecast names and their corresponding URLs. These d ...

struggling with typing an object in react typescript - Element is assumed to have an 'any' type due to its type

Having trouble with the code snippet below: // if I remove the `any` below it breaks. const teams: any = { liverpool: <Liverpool />, manUtd: <ManUtd />, arsenal: <Arsenal />, }; export const TeamCrest = ({ team }: { team: ke ...