将用户生成的主题添加到“mailto:”

时间:2016-12-10 09:10:11

标签: javascript html css mailto

我是HTML / CSS和JavaScript的初学者,我需要帮助处理我的最终项目,因为我在互联网上找不到太多帮助。我的所有搜索都让我一直在做同样的事情,它向我展示了如何使用这个来添加一个主题:

?subject=Subject You Selected

这是向电子邮件添加主题行的好方法,但如何从网页上的文本框中输入用户输入的主题行。我也可以为身体内容做同样的事吗?

抱歉,我忘了添加我的代码

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();

}

简而言之,JS将检查两个电子邮件条目是否正确,然后检查其他元素是否包含其中的内容。验证完成后,我希望JS发送包含用户在网站上输入的所有详细信息的消息。具体来说,我希望客户端电子邮件应用程序打开并填充用户在网页上输入的数据。我很确定代码将进入最后的“if语句”

我已更新我的代码以反映“nevermind”的帮助。该网页现在打开客户端电子邮件应用程序,填充填充所需的信息。

3 个答案:

答案 0 :(得分:1)

这是一种可行的方法。 我只是略微修改了代码(他使用jQuery,我把它变成了vanilla JS): http://fiddle.jshell.net/james2doyle/66PxB/ 所以,归功于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/

答案 1 :(得分:0)

以下是如何操作

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>';

运行代码段打开新标签页中的链接

答案 2 :(得分:0)

如果您不介意使用jquery,这非常简单。

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());
  });
});
相关问题