Sending mail through JavaScript clicking html submit button

Question

I am trying to send mail using JavaScript when submit button is clicked on the html webpage. Here is my HTML code...

<!DOCTYPE html>
<html>
    <style>
        .heading{
            justify-content: center;
            text-align: center;
        }
    </style>
<body>

   <h2 class="heading">Send e-mail to [email protected]:</h2>
   <textarea name="myText" id="myText">this is a mail</textarea>
   <button onclick="sendMail(); return false">Send</button>
</body>
</html>

Here is my sendMail function in JavaScript to process the email

 function myFunction(){
  var link="mailto:[email protected]"
  + "[email protected]"
  + "&subject=" + encodeURIComponent("This is my subject")
  + "&body="+encodeURIComponent(document.getElementsById('myText')).value
;

window.location.href = link;
}

I can not understand where I am doing wrong! Someone please suggest the right way

What this will do, essentially, is try to load a local email program to process the mailto link. That will likely work if the user has Outlook/Thunderbird/etc. configured properly, might work if they have something set up to route mailto links to the Gmail (or other web based email) web page or may not work at all. It is not actually using the browser to send email - just "set up" a message in an email application, if configured to to do so. — manassehkatz-Moving 2 Codidact
– manassehkatz-Moving 2 Codidact, Commented Aug 4, 2021 at 2:45
ok , i have a doubt, can u pls tell me what this line means in javascript "[email protected]" — Mrinal Anand
– Mrinal Anand, Commented Aug 4, 2021 at 2:51
cc = "Carbon Copy" which means that the email address should be included as another recipient. — manassehkatz-Moving 2 Codidact
– manassehkatz-Moving 2 Codidact, Commented Aug 4, 2021 at 2:54

Rifky Niyas · Accepted Answer · 2021-08-04 16:20:24Z

1

Edit - Send an email directly via JavaScript

If you are looking to send an email without using html mailto: there is a library called smtpJS. View a simplified tutorial here.

BUT I WOULD NOT SUGGEST TO USE YOUR PERSONAL EMAIL HERE

In your case you can use it like below

const sendMail = (e) => {
    e.preventDefault()
    const message = encodeURIComponent(document.getElementById('message').value)
    Email.send({
        Host : "smtp.yourisp.com",
        Username : "username",
        Password : "password",
        To : '[email protected]',
        From : "[email protected]",
        Subject : encodeURIComponent("This is my subject"),
        Body : message
    }).then(
      message => alert(message)
    ).catch( err => {
        alert(err)
    });
}

<!DOCTYPE html>
<html lang="en">
<body>
    <form method="post" onsubmit="sendMail(event)">
        <textarea name="message" id="message">Sample Text</textarea>
        <button type="submit">Send Email</button>
    </form>
    <script src="https://smtpjs.com/v3/smtp.js"></script>
</body>
</html>

You can setup your configuration as per your credentials. If you are using Gmail you can use the credentials mentioned in this article

Disclaimer

I did not test it out completely since I was reluctant to use my personal mail address and I do not have a mail address for production. Please do further research and edit this answer post if necessary

Old Answer

There were some errors in your code and here is the fixed code...

const sendMail = () => {
  const mailAdress = "[email protected]"
  const ccRecipients =  "[email protected]"
  const subject = encodeURIComponent("This is my subject")
  const body = encodeURIComponent(document.getElementById('myText').value)
  const  link= `mailto:${mailAdress}?cc=${ccRecipients}&subject=${subject}&body=${body}`
  window.location.href = link;
}

<!DOCTYPE html>
<html>
    <style>
        .heading{
            justify-content: center;
            text-align: center;
        }
    </style>
<body>

   <h2 class="heading">Send e-mail to [email protected]:</h2>
   <textarea name="myText" id="myText">this is a mail</textarea>
   <button onclick="sendMail()">Send</button>
</body>
</html>

First of all you haven't defined the function sendMail() in your JavaScript code and instead defined myFunction().

Second it's better to assign the mail address, cc recipients, subject and body as variables since they can be made dynamic or to easily change the hardcoded values. Next you can concatenate the variables using ES6 Template Literals to have in ease in reading and writing the code.

Thirdly, the below code is incorrect.

 encodeURIComponent(document.getElementsById('myText')).value

You should pass the value of text area to the encodeURIComponent() function. For that first you must get the value in text area by document.getElementsById('myText').value and pass that value into encodeURIComponent(). The corrected code will look like this

encodeURIComponent(document.getElementById('myText').value)

Also if you want to understand the use of HTML mailto, refer this article

edited Aug 4, 2021 at 16:20

answered Aug 4, 2021 at 3:10

Rifky Niyas

2,1061 gold badge15 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

23 Comments

Rifky Niyas Over a year ago

@Mrinal Anand Using const is a better approach to define the functions and the variables in JavaScript ES6. Specially here I used it to make the function immutable. So you don't have to worry about function being changed by other parts of code. Refer more in this answer

Mrinal Anand Over a year ago

yeah, that was a mistake, i mean that myFucntion() call , what i was trying to do is to send a mail from [email protected] to [email protected] when submit button is clicked....what else is needed

Rifky Niyas Over a year ago

I'll add some further explanation to the answer. I have corrected the errors in your code and given the corrected snippet. Does it work?

Mrinal Anand Over a year ago

i changed ccRecipient to [email protected] and mailAdress to [email protected], but it doesn't work

Rifky Niyas Over a year ago

Can you explain on how it does not work? Do you mean that email is not being sent?

|

Collectives™ on Stack Overflow

Sending mail through JavaScript clicking html submit button

1 Answer 1

Edit - Send an email directly via JavaScript

Old Answer

23 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit - Send an email directly via JavaScript

Old Answer

23 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related