使用表单数据预填充电子邮件

问题描述 投票:1回答:3

我希望有一个HTML表单,只使用JS / jQuery(没有PHP),从“主题”和“消息”字段中获取数据,并发送电子邮件。我不希望服务器发送电子邮件,因为HTML和JS是客户端,而不是服务器端。再说一遍,没有PHP。

但是,我确实希望它打开用户邮件客户端,但主题和正文预先填写了表单数据,并且预先填写了我的电子邮件地址。基本上,我需要一个更先进的mailto:[email protected]

这是我目前的联系表格:

<h2>Send a message</h2>
<form id="sendmsg">
    <div class="field">
        <label for="subject">Subject</label>
        <input type="text" name="subject" id="subject" value="" />
    </div>
    <div class="field">
        <label for="message">Message</label>
        <textarea name="body" id="body" rows="6"></textarea>
    </div>
    <ul class="actions">
        <li><input type="submit" id="submit" value="Submit" /></li>
    </ul>
</form>

我尝试了几次这样的尝试(在jQuery中):

<script>
    $(document).ready(function() {
        $('#submit').click(function() {
            $('#sendmsg').attr('action', 'mailto:[email protected]?subject=' + $('#subject').val() + '&body=' + $('#body').val());
            $('#sendmsg').submit();
        });
    });
</script>

感谢帮助,谢谢!

javascript jquery html email html-email
3个回答
2
投票

您可以使用<a>获得正常的href链接,并随时更新subjectbody的内容。当用户点击它时,将打开用户的默认邮件客户端,其中包含“收件人”,“主题”和正文填写的输入内容。请注意,主题和正文需要使用encodeURIComponent()进行编码。如果您有不同的电子邮件地址,则可能还需要对其进行编码。

由于出于安全原因Stack Overflow封装片段的方式,“发送电子邮件”按钮在以下代码段中不起作用。它适用于普通页面。你可以在this JSFiddle尝试一下。

$(document).ready(function() {
    //Save references to elements. Don't do DOM walks in event handlers when not needed.
    var $sendEmailEl = $('#send-email');
    var $subjectEl = $('#subject');
    var $bodyEl = $('#body');
    function updateEmailLink() {
        $sendEmailEl.attr('href', 'mailto:[email protected]?' +
            'subject=' + encodeURIComponent($subjectEl.val()) +
            '&body=' + encodeURIComponent($bodyEl.val()));
        //console.log($sendEmailEl.attr('href'));
    }
    $('#subject,#body').on('input', updateEmailLink);
    updateEmailLink();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Send a message</h2>
<div id="sendmsg">
    <div class="field">
        <label for="subject">Subject</label>
        <input type="text" name="subject" id="subject" value="" />
    </div>
    <div class="field">
        <label for="message">Message</label>
        <textarea name="body" id="body" rows="6"></textarea>
    </div>
    <ul class="actions">
        <li><a id="send-email" href=""><button>Send email</button></a> &lt;--- This doesn't work from within a snippet, but does work on a page.</li>
    </ul>
</div>

1
投票

试试这个。很简单

$(document).ready(function(){
          $('#submit').click(function(e) {
            e.preventDefault();
            mail_url = 'mailto:[email protected]?Subject=' + $('#subject').val() + '&Body=' + $('#body').val()
            window.location = mail_url
        });
});

0
投票

我想我会避免使用表格。一个a标签是我们知道会起作用的,所以我会使用它(你仍然可以在你的html中有形式,以防它需要造型或其他)

<h2>Send a message</h2>
<form id="sendmsg" onsubmit="return false;">
    <div class="field">
        <label for="subject">Subject</label>
        <input type="text" name="subject" id="subject" value="" />
    </div>
    <div class="field">
        <label for="message">Message</label>
        <textarea name="body" id="body" rows="6"></textarea>
    </div>
    <ul class="actions">
        <li><input type="submit" id="submit" value="Submit" /></li>
    </ul>
    <a id="hiddenmailer" style="display: none;"></a>
</form>

<script>
    $(document).ready(function() {
        $('#submit').click(function() {
            var mailtotext = "mailto:[email protected]?subject=" + $('#subject').val() + "&body=" + $('#body').val());
            $('a#hiddenmailer').attr('href', mailtotext).click();
        });
    });
</script>

这可能缺少主题和身体输入值所需的一些验证或转义,但这是一般的想法。

© www.soinside.com 2019 - 2024. All rights reserved.