Question

我希望有一个HTML表单，只使用JS / jQuery（没有PHP），从＆＃34;主题＆＃34;和＆＃34;消息＆＃34;字段，并发送电子邮件。我不希望服务器发送电子邮件，因为HTML和JS是客户端，而不是服务器端。再说一遍，没有PHP。

但是，我确实希望它打开用户邮件客户端，但主题和正文预先填写了表单数据，并且预填充了我的电子邮件地址。基本上，我需要更高级的i。

到目前为止，这是我的联系表格：

:wq

我尝试了几次这样的尝试（在jQuery中）：

[inside this square brackets give a name to the followed acc.]
  name = github_username
  email = github_emailaddress
[any other name]
  name = github_username
  email = github_email
[credential]
  helper = osxkeychain
  useHttpPath = true

感谢帮助，谢谢！

Answer 1

您可以与<a>建立正常的href链接，并随时更新subject和body的内容。当用户点击它时，用该电子邮件打开用户的默认邮件客户端，其中包含＆＃34; To＆＃34;，＆＃34; Subject＆＃34;和身体填写你的输入内容。请注意，主题和正文需要使用encodeURIComponent()进行编码。如果您有不同的电子邮件地址，则可能还需要对其进行编码。

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

＆＃13;

$(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:contact@zane.sh?' +
            'subject=' + encodeURIComponent($subjectEl.val()) +
            '&body=' + encodeURIComponent($bodyEl.val()));
        //console.log($sendEmailEl.attr('href'));
    }
    $('#subject,#body').on('input', updateEmailLink);
    updateEmailLink();
});

＆＃13;

<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>

＆＃13;

Answer 2

试试这个。很简单

$(document).ready(function(){
          $('#submit').click(function(e) {
            e.preventDefault();
            mail_url = 'mailto:contact@zane.sh?Subject=' + $('#subject').val() + '&Body=' + $('#body').val()
            window.location = mail_url
        });
});

Answer 3

我想我会避免使用表格。 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:contact@zane.sh?subject=" + $('#subject').val() + "&body=" + $('#body').val());
            $('a#hiddenmailer').attr('href', mailtotext).click();
        });
    });
</script>

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

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

3 个答案: