我希望有一个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>
感谢帮助,谢谢!
您可以使用<a>
获得正常的href
链接,并随时更新subject
和body
的内容。当用户点击它时,将打开用户的默认邮件客户端,其中包含“收件人”,“主题”和正文填写的输入内容。请注意,主题和正文需要使用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> <--- This doesn't work from within a snippet, but does work on a page.</li>
</ul>
</div>
试试这个。很简单
$(document).ready(function(){
$('#submit').click(function(e) {
e.preventDefault();
mail_url = 'mailto:[email protected]?Subject=' + $('#subject').val() + '&Body=' + $('#body').val()
window.location = mail_url
});
});
我想我会避免使用表格。一个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>
这可能缺少主题和身体输入值所需的一些验证或转义,但这是一般的想法。