如何用HTML+Jquery实现提交随机问题答案时生成对应邮件主题

修改思路 #

原静态mailto链接无法动态替换主题和正文，我们需要通过jQuery绑定点击事件，实时获取当前显示的问题和用户输入的答案，再构造并打开动态邮件链接。

步骤1：调整HTML结构 #

移除包裹提交按钮的<a>标签，直接为提交按钮绑定点击事件：

<div class="text_big_full_width">
</div>

<div id="form_contact_question">
    <label for="type">Type</label>
    <input type="text" id="form_type" name="form_contact">
    <input type="submit" id="submit-btn" value="Submit">
</div>

步骤2：编写jQuery逻辑 #

在原有随机显示问题的代码基础上，添加提交按钮的事件处理：

var textToShow = ['What’s your current mood, as a drink.', 'Tell me something weird about yourself', 'What do you think is overrated? And what is underrated?', 'If you had to give your car a name, what would you call it?', 'Who should aliens talk to first when they land on Earth?', 'Complete this sentence: I just won the lottery! If you are looking for me tomorrow, I will be ___.', 'Dishes inside or outside the sink?']

$(document).ready(function() {
    // 随机获取并存储当前问题，避免点击时重复随机导致不一致
    var currentQuestion = textToShow[Math.floor(Math.random()*textToShow.length)];
    $(".text_big_full_width").html(currentQuestion);

    // 绑定提交按钮点击事件
    $("#submit-btn").click(function(e) {
        // 阻止表单默认提交行为
        e.preventDefault();
        // 获取用户输入的答案
        var userAnswer = $("#form_type").val().trim();
        
        // 空输入提示（可选）
        if (!userAnswer) {
            alert("请输入你的答案！");
            return;
        }
        
        // 构造编码后的mailto链接，避免特殊字符破坏链接结构
        var mailtoLink = `mailto:hello@corinakoch.ch?subject=${encodeURIComponent(currentQuestion)}&body=${encodeURIComponent(userAnswer)}`;
        // 打开系统邮件客户端
        window.open(mailtoLink);
    });
});

关键细节说明 #

• 使用encodeURIComponent对主题和正文编码，处理空格、问号等特殊字符，保证链接有效性
• 提前存储currentQuestion变量，确保提交时获取的是页面显示的当前问题
• 增加空输入判断，优化用户提交体验

内容的提问来源于stack exchange，提问作者Corina Koch