使用SMTP.js发送邮件：客户端集成、常见问题与最佳实践指南

if (signupStudents === 1) {
    var send = function() { /* ... */ };
} else {
    var send = function() { /* ... */ };
}

}).then(
    window.location.replace("/sucuss.html"),
);

Body : "Parent Name " + document.getElementById ("parent-name"),

<script src="https://smtpjs.com/v3/smtp.js"></script>
<!-- ... 其他HTML内容 ... -->
<div class="info-content-blocks">
    <form onsubmit="sendEmail(); resetForm(); return false;"> <!-- 修改函数名以避免冲突，并假设resetForm()存在 -->
        <div id="students">
            <h3>Parent First and Last Name</h3>
            <input placeholder="Type your first and last name here" required id="parent-name">
            <h3>Child (1) First and Last Name</h3>
            <!-- 为第一个学生输入框添加ID，并保持命名规范一致 -->
            <input placeholder="Type your child's first and last name here" required id="signup-students-input-1">
        </div>
        <br><br><button class="standard-button" id="new-student" type="button">New Student</button><br><br>
        <h3>Parent Email Address</h3>
        <input placeholder="Type your email address here" required id="parent-email"> <!-- 添加ID以便获取值 -->
        <h3>Parent Phone Number (For Emergency Contact Only)</h3>
        <input placeholder="Type your phone number here" required id="parent-phone"> <!-- 添加ID以便获取值 -->
        <p>Please pay $<span id="cost">39</span> cash after your childs first class.</p>
        <button class="standard-button" type="submit">Enroll</button>
    </form>
</div>
<!-- ... 其他HTML内容 ... -->

// 全局变量，跟踪学生数量
var signupStudents = 1; 

// 动态添加学生输入框的函数
var newStudentBtnOnClick = function () {
    signupStudents++;
    let studentsDiv = document.getElementById("students");
    let costSpan = document.getElementById("cost");

    let newStudentHeading = document.createElement("h3");
    newStudentHeading.innerHTML = "Child (" + signupStudents + ") First and Last Name";

    let newStudentInput = document.createElement("input");
    newStudentInput.placeholder = "Type your child's first and last name here";
    // 确保ID是唯一的且可预测，以便后续获取
    newStudentInput.id = "signup-students-input-" + signupStudents; 
    newStudentInput.required = true; // 新增的输入框也应是必填的

    studentsDiv.appendChild(newStudentHeading);
    studentsDiv.appendChild(newStudentInput);

    costSpan.innerHTML = signupStudents * 39;
};

// 为“New Student”按钮添加事件监听器
document.getElementById("new-student").addEventListener("click", newStudentBtnOnClick);

// 定义一个统一的邮件发送函数，在表单提交时调用
var sendEmail = function() {
    // 阻止表单默认提交行为，因为我们在onsubmit中已经返回false
    // event.preventDefault(); // 如果在onsubmit中没有return false，这里需要

    // 获取父级姓名
    let parentName = document.getElementById("parent-name").value;
    let parentEmail = document.getElementById("parent-email").value;
    let parentPhone = document.getElementById("parent-phone").value;

    // 构建邮件正文
    let emailBody = `Parent Name: ${parentName}\n`;
    emailBody += `Parent Email: ${parentEmail}\n`;
    emailBody += `Parent Phone: ${parentPhone}\n\n`;
    emailBody += `Registered Children:\n`;

    // 动态收集所有学生姓名
    for (let i = 1; i <= signupStudents; i++) {
        let studentInput = document.getElementById("signup-students-input-" + i);
        if (studentInput && studentInput.value) {
            emailBody += `Child (${i}) Name: ${studentInput.value}\n`;
        }
    }

    // 根据signupStudents的数量决定Subject或其他内容（如果需要）
    let subject = "New Intermediate Signup";
    if (signupStudents > 1) {
        subject = `New Intermediate Signup - ${signupStudents} Children`;
    }

    // SMTP.js配置信息
    // 注意：这里的凭据是直接暴露在客户端的，生产环境应考虑后端代理
    const smtpConfig = {
        Host : "smtp.elasticemail.com",
        Username : "your_smtp_username@example.com", // 替换为您的Elastic Email用户名
        Password : "your_smtp_password", // 替换为您的Elastic Email密码
        To : "recipient@example.com", // 替换为接收邮件的邮箱
        From : "sender@example.com", // 替换为发送邮件的邮箱
        Subject : subject,
        Body : emailBody
    };

    // 发送邮件
    Email.send(smtpConfig)
    .then(function(message) {
        console.log("Email sending status:", message);
        if (message === "OK") { // 检查邮件发送状态
            alert("Signup successful! Redirecting...");
            window.location.replace("/sucuss.html"); // 邮件发送成功后才重定向
        } else {
            alert("Failed to send email: " + message + ". Please try again.");
            // 可以在这里添加更详细的错误处理，例如显示错误信息给用户
        }
    })
    .catch(function(error) {
        console.error("Email sending failed:", error);
        alert("An error occurred while sending the email. Please check your network and try again.");
    });
};

// 如果onsubmit中包含resetForm()，需要定义该函数
var resetForm = function() {
    document.getElementById("parent-name").value = "";
    document.getElementById("parent-email").value = "";
    document.getElementById("parent-phone").value = "";

    // 移除动态添加的学生输入框
    let studentsDiv = document.getElementById("students");
    while (studentsDiv.children.length > 3) { // 假设前3个是Parent Name H3, Input, Child(1) H3
        studentsDiv.removeChild(studentsDiv.lastChild);
    }
    document.getElementById("signup-students-input-1").value = ""; // 清空第一个学生姓名
    signupStudents = 1; // 重置学生计数
    document.getElementById("cost").innerHTML = "39"; // 重置费用
};