Add a User Generated subject to “mailto:”

Question

I am a beginner in HTML/CSS and JavaScript and I need help with working on my final project because I'm not finding much help on the internet. All of my searching keeps bringing me to the same thing, which shows me how to add a subject by using this:

?subject=Subject You Selected

This is a great way to add a subject line to an email, but how can I do a subject line that the user has entered from the textbox on the web page. Can I also do the same for the body content as well?

Sorry I forgot to add my code

HTML:

<form id="email_form" name="email_form" action= "sent/sent.html" method="get">
<label for="email_address1"id="label">Email Address:</label>
<input type="text" id="email_address1" name="email_address1"</label>
<span id="email_address1_error">*</span><br><br>

<label for="emal_address2"id="label">Re=Enter Email Address:</label>
<input type="text" id="email_address2" name="emaill_address2">
<span id="email_address2_error">*</span><br><br>

<label for="name"id="label">Your Name:</label>
<input type="text" id="name" name="name">
<span id="name_error">*</span><br><br>

<label for="subject"id="label">Subject:</label>
<input type="text" id="subject" name="subject">
<span id="subject_error">*</span><br><br>

<label for="message" id="label">Message:</label>
<input type="text" id="message" name="message">
<span id="message_error">*</span><br><br>

<label id="label">&nbsp;</label>

<input type="button" id="join_list" value="Submit">
</form>

JS:

var $=function(id){

return document.getElementById(id);
}
var joinList=function (){
var emailAddress1=$("email_address1").value;
var emailAddress2=$("email_address2").value;
var Name=$("name").value;
var Subject=$("subject").value;
var Message=$("message").value;
var isValid=true;
var Toemail="josephdouso@msn.com;joseph.douso@my.liu.edu";
var CCemail="Research@drscovetta.net";


if(emailAddress1=="")
{
    $("email_address1_error").firstChild.nodeValue="This feild is required.";
    isValid=false;
}
else
{
    $("email_address1_error").firstChild.nodeValue="";
}

if(emailAddress2=="")
{
    $(email_address2_error).firstChild.nodeValue="This feild is required.";
    isValid=false;
}
else if (emailAddress1!==emailAddress2)
{
    $(email_address2_error).firstChild.nodeValue="The email addresses must match";
    isValid=false;
}
else
{
    $("email_address2_error").firstChild.nodeValue="";
}

if(Name=="")
{
    $("name_error").firstChild.nodeValue="This feild is required.";
    isValid=false;
}
else
{
    $("name_error").firstChild.nodeValue="";
}
if(Subject=="")
{
    $("subject_error").firstChild.nodeValue="This feild is Required";
    isValid=false;
}
else
{
    $("subject_error").firstChild.nodeValue="";
}
if(Message=="")
{
    $("message_error").firstChild.nodeValue="This feild is requried";
    isValid=false;
}
else
{
    $("message_error").firstChild.nodeValue="";
}



if (isValid)
{

var mailto_link = 'mailto:' + Toemail + '?cc=' + CCemail + '&subject=' + Subject + '&body=' + Message;


 win = window.open(mailto_link, 'sent.html');

}


}
window.onload=function()
{
$("join_list").onclick=joinList;
$("email_address1").focus();

}

In short, the JS is going to check to see if both email entries are correct, then its going to check to see if the other elements has something in them. Once the verification is complete, I want JS to send the message with all the details that the user has entered on the site. Specifically, I want the client side email application to open and be populated with the data that was entered by the user on the web page. Im pretty sure the code is going to go into the last "if statement"

I have updated my code to reflect the help from "nevermind". The webpage now opens the client side email application and fills populates the info needed.

Answer 1

Here is one possible way. I have just slightly modified code from (he uses jQuery, i made it vanilla JS): http://fiddle.jshell.net/james2doyle/66PxB/ so, credits to mr Doyle .

HTML:

<form>
Subject:<input id="subject"/>
Message:<input id="message" />
</form>
<button id="sender">Send email</button>

JS:

document.getElementById('sender').addEventListener("click", sendEmail);

    function sendEmail() {
    var email = 'someemail@gmail.com';
    var message = document.getElementById('message').value;
    var subject = document.getElementById('subject').value;
    var mailto_link = 'mailto:' + email + '?subject=' + subject + '&body=' + message;

        win = window.open(mailto_link, 'emailWindow');
        if (win && win.open && !win.closed) win.close();

    }

https://jsfiddle.net/d6x0v3ov/

Answer 2

Here is how to do it

 var email = 'someone@email.com'; var subject = 'your subject'; var body = 'body message' var url = 'mailto:' + email + '?subject=' + subject + '&body=' + body; document.body.innerHTML = '<a href="' + url + '">Test link</a>'; 

run the code snippet open the link in new tab

Answer 3

This is pretty simple with jquery, if you don't mind using it.

HTML:

<input id="subject" type="text" />
<button id="add_subject">
Add subject
</button>
<a id="send_link" href="mailto:nomai1.com?subject=free beer">Send</a>

JS:

$(document).ready(function() {
  $("#add_subject").on("click", function() {
      $("#send_link").attr("href", "mailto:nomai1.com?subject="+$("#subject").val());
  });
});