如何将HTML输入框值填充SMTP.js发送的邮件Body字段

核心实现思路 #

无需新增额外依赖，在邮件发送函数执行时，直接读取两个文本输入框的实时输入值，按照指定的正文格式拼接完成后，赋值给Email.send配置项的Body字段即可。

具体操作步骤 #

• 按输入框的name属性读取实时值：因为两个输入框已经分别设置了name="fname"、name="lname"，不需要额外绑定id，直接通过DOM选择器获取元素、读取value属性就能拿到用户输入的内容，加trim()可以自动去掉输入内容前后的冗余空格：
  • 读取fname输入值：document.getElementsByName('fname')[0].value.trim()
  • 读取lname输入值：document.getElementsByName('lname')[0].value.trim()
• 用模板字符串拼接目标格式的正文：将两个读到的值代入指定文案，直接替换原代码中为空的Body字段。

修改后的完整代码 #

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Sending Mail</title> 
    <script src="https://smtpjs.com/v3/smtp.js"></script> 
    <script type="text/javascript"> 
        function sendEmail() { 
            // 读取两个输入框的实时输入值
            const fnameVal = document.getElementsByName('fname')[0].value.trim();
            const lnameVal = document.getElementsByName('lname')[0].value.trim();
            Email.send({ 
                Host: "smtp.gmail.com", 
                Username: "", 
                Password: "", 
                To: '', 
                From: "", 
                Subject: "", 
                // 按要求拼接正文内容
                Body: `Hey, my name is ${fnameVal} ${lnameVal}`,
            }) 
            .then(function (message) { 
                alert("Mail has been sent successfully") 
            }); 
        } 
    </script> 
  </head> 

  <body> 
    <form method="post"> 
     <input type="text"  name="fname">  
     <input type="text"  name="lname">
        <input type="button" value="Send Mail"
            onclick="sendEmail()" /> 
    </form> 
  </body> 
</html>

注意事项 #

• 代码中Host、Username、Password、To、From、Subject等配置项，需要替换为你自己的SMTP服务账号信息、真实收件人/发件人地址、自定义邮件主题后，才能正常发送邮件。
• 因为发送按钮是type="button"，不会触发默认的表单提交跳转，不需要额外添加阻止表单默认行为的代码。

内容的提问来源于stack exchange，提问作者Jeff bozc