如何在提交时使用 emailjs 将表单信息发送到我的电子邮件？答案

【问题标题】：How do I send my form information, on submit, to my email with emailjs?如何在提交时使用 emailjs 将表单信息发送到我的电子邮件？
【发布时间】：2020-11-25 15:58:52
【问题描述】：

我正在处理我的项目，我有一个表格，您填写您的姓名和电子邮件，然后按提交。到目前为止，一切都很好。问题是当用户按下“提交”时，我试图将表单中填写的信息（姓名和电子邮件）转到我的个人电子邮件。我目前正在使用 Emailjs，因为它是我的学校推荐的，但它不起作用，我不明白我做错了什么。这是我到目前为止所做的：

//I put this is the end of the <head> section

<script type="text/javascript" src="https://cdn.emailjs.com/sdk/2.2.4/email.min.js"></script>
    <script type="text/javascript">
        (function() {
            emailjs.init("user_"); //it has my user ID, just didn't want to share
        })();
</script>

//this is the form

<form id="testform" onsubmit="return sendMail(this);">
           <div class="box">
                 <label for="fullname" class="form-tag">Name</label>
                 <input type="text" name="name" id="fullname" class="form-control" required/>
                 <label for="emailaddress" class="form-tag">Email</label>
                 <input type="email" name="email" id="emailaddress" class="form-control" required/>
                 <div class="button">
                   <button id="submit" type="button" class="btn btn-light btn-lg">Submit</button>
                 </div>
            </div>
</form>

//这是在结束之前

<script src="assets/js/sendEmail.js"></script>

//sendEmail.js

function sendMail(contactForm) {
    emailjs.send("gmail", "yourjourney", {
        "from_name": contactForm.name.value,
        "from_email": contactForm.emailaddress.value,
    })
    .then(
        function(response) {
            console.log("SUCCESS", response);
        },
        function(error) {
            console.log("FAILED", error);
        }
    );
    return false;  // To block from loading a new page
}

【问题讨论】：

您遇到的错误是什么？
@elnatanvazana 我没有收到错误消息。但我也没有收到电子邮件。

标签： javascript forms email

【解决方案1】：

所以您的代码中有两个问题。首先，您的按钮是类型提交旁边的类型按钮。其次，您使用 return false 这意味着您停止提交过程。

为了让您无需重新加载页面即可使其工作，您无需创建表单。会和学校教你的有点不同，但我希望它会有所帮助。

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js'></script>
    <script type='text/javascript'>
        (function () {
            emailjs.init('user_ID');
        })();
    </script>
    <title>Document</title>
</head>
<body>
    <div class="box">
        <label for="fullname" class="form-tag">Name</label>
        <input type="text" name="name" id="fullname" class="form-control" required />
        <label for="emailaddress" class="form-tag">Email</label>
        <input type="email" name="email" id="emailaddress" class="form-control" required />
        <div class="button">
            <button id="button" type="button" class="btn btn-light btn-lg">Submit</button>
        </div>
    </div>

    <script src="assets/js/sendEmail.js"></script>
</body>
</html>

JS（sendEmail.js 文件）：

//Getting the name and email from the DOM
let fullName = document.getElementById('fullname').value
let email = document.getElementById('emailaddress').value
//Getting the button from the DOM
let submitButton = document.getElementById('button') 

//Add event listener on click to the button - notice i added the event as argument to the function
submitButton.addEventListener('click', function(event){

    //prevent the reload of the page. here i prevent the event.
    event.preventDefault()

    //Sending the email with the name and email
    emailjs.send("gmail", "yourjourney", {
        "from_name": fullName,
        "from_email": email,
    })
        .then(
            function (response) {
                console.log("SUCCESS", response);
                
            },
            function (error) {
                console.log("FAILED", error);
                
            }

        );
})

如果您必须拥有表格及其作业部分或其他内容，请告诉我，以便我可以根据您所学的内容更改代码。

【讨论】：

我在控制台中得到了这个：sendEmail.js:8 Uncaught TypeError: $(...).addEventListener is not a function at sendEmail.js:8
我编辑了答案。请复制粘贴相同的代码到 HTML 和 js 代码到 sendEmail.js 文件，并告诉我它是否仍然给出和错误。不要忘记在 HTML 头函数中更改 USER_ID

【解决方案2】：

//Getting the button from the DOM
let submitButton = document.getElementById('button') 

//Add event listener on click to the button - notice i added the event as argument to the function
submit.addEventListener('click', function(event){

    //prevent the reload of the page. here i prevent the event.
    event.preventDefault()

    //Getting the name and email from the DOM
    let fullName = document.getElementById('fullname').value
    let email = document.getElementById('emailaddress').value

    //Sending the email with the name and email
    emailjs.send("gmail", "yourjourney", {
        "from_name": fullName,
        "from_email": email,
    })
        .then(
            function (response) {
                console.log("SUCCESS", response);
                
            },
            function (error) {
                console.log("FAILED", error);
                
            }

        );
})

感谢@elnatan vazana 帮助我！
我的用户 ID 不正确，所以我更改了它，现在它可以正常工作了。我能够收到提交到表单的信息。

【讨论】：

欢迎您。如果我的回答对您有帮助，那么如果您选择它作为您问题的答案（但在答案旁边标记 V），那就太好了。我很高兴它在你的编码之旅中工作好运。