html - 使用模态表单中的条目填充电子邮件
问题描述
我有一个模态表单(请参阅模态表单的 HTML 片段 - 这只是整个页面 HTML 的一小部分),以允许用户向我提交新链接。这是我在共享驱动器上为我的团队维护的本地 HTML 文件,我们无权访问托管此文件的服务,因此当提交新链接时,我只需进入并使用新链接更新 HTML .
我希望能够从模态正文的每个字段中获取值来填充电子邮件的正文,每个字段都在它自己的行上,如下所示:
- 名称:[在名称字段中输入的值]
- URL:[在 URL 字段中输入的值]
- 说明:[在说明字段中输入的值]
- 类别:[从 NewCat 下拉字段中选择的值]
我还希望主题行填充“提交的新链接”或类似的内容。
var emailTO = "test@example.com"
var emailSubj = "New Link Submission"
var newName = document.getElementById("newName").value
var newURL = document.getElementById("newURL").value
var newDescrip = document.getElementById("newDescrip").value
var newCat = document.getElementById("newCat").value
var emailBody = newName % OA % OA newURL % OA % OA newDescrip % OA % OA newCat
function emailLink(){
/* ?????? */
}
<div id="myModal" class="modal" align="center">
<div class="modal-content">
<div class="modal-header">
<span id="close" class="close">×</span>
<h3>Submit New Link</h3>
</div>
<div class="modal-body">
<p>Name: <input type="text" class="newName" id="newName" value="newName" </p>
<p>URL: <input type="text" class="newURL" id="newURL" value="newURL" </p>
<p>Description: <input type="text" class="newDesrcip" id="newDesrcip" value="" </p>
<form>
<p>Category:
<select id="newCat" required>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C </option>
<option value="D"> D </option>
</select>
</p>
</form>
</div>
<br>
<input type="button" id="submit_link_button" value="Submit" onclick="emailLink()">
<!--
I would like to be able to grab the values from each field of the modal-body populate the body of an email, each on it's own line like this:
Name: [value entered in Name field]
URL: [value entered in URL field]
Description: [value entered in Description field]
Category: [value selected from NewCat dropdown field]
I'd also like the Subject line to populate with "New Link Submitted" or something like that.
-->
</div>
</div>
解决方案
首先,您的HTML
代码中有一些错误(input
标签未正确关闭),我设法纠正了它们。
你不需要一个form
标签来实现你的目标,你可以使用它,但一个a
标签就足够了。因此,<input type="button" id="submit_link_button" value="Submit" onclick="emailLink()">
我没有将其更改为具有接受“mailto”链接的属性的<a href="" id="contact-link">Send</a>
标签href
,并且该属性将由JavaScript
所需的信息填充,我给它一个id="contact-link"
引用它的JavaScript
.
input
您曾经在with中使用“内联事件处理程序”type="button"
(将被a
标记替换的事件处理程序),这是一种不好的做法。相反,最好使用内置addEventListener
方法将事件处理程序附加到您想要的任何元素。了解有关addEventListener
方法的更多信息。
这是一个可运行的片段,说明了所有内容。
// select the 'a' tag that has the mailto link to reference later in the code.
var contactLink = document.getElementById('contact-link');
// add click event listener to that 'a' tag.
contactLink.addEventListener('click', function() {
// get all the information required by getting the inputs and the select tags values.
var newName = document.getElementById("newName").value,
newURL = document.getElementById("newURL").value,
newDescrip = document.getElementById("newDesrcip").value,
newCat = document.getElementById("newCat").value,
/* the subject variable holds the subject of the email, change its value per your requirement. */
subject = 'New Link Submitted',
/* the queryString variable holds the email's subject and body to be used in the href attribute of the 'a' tag. the '\n' character is used to make a new line and it must be encoded, along with other special characters as the space, in a valid URL format, we'll be using the built-in 'encodeURI' method for that task. */
queryString = '?subject=' + subject + '&body=Name: ' + newName + '\nURL: ' + newURL + '\nDescription: ' + newDescrip + '\nCategory: ' + newCat,
/* the emailAddr variable holds the email which you want the email to be sent to. Change its value per your requirement. */
emailAddr = 'test@exemple.com';
/* assign the href attribute of the 'a' tag by the queryString variable's value prepended by the desired email adress, and encode all the resulted string in the URL format using the built-in 'encodeURI' method. */
this.href = window.encodeURI('mailto:' + emailAddr + queryString);
// just for testing to see the resulted href string. Delete this line in production phase.
console.log(this.href);
});
<div id="myModal" class="modal" align="center">
<div class="modal-content">
<div class="modal-header">
<span id="close" class="close">×</span>
<h3>Submit New Link</h3>
</div>
<div class="modal-body">
<p>Name: <input type="text" class="newName" id="newName" value="newName" / ></p>
<p>URL: <input type="text" class="newURL" id="newURL" value="newURL" / ></p>
<p>Description: <input type="text" class="newDesrcip" id="newDesrcip" value="" / ></p>
<p>
Category:
<select id="newCat" required>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C </option>
<option value="D"> D </option>
</select>
</p>
</div>
<br>
<!-- no Form tag is needed, and also the 'input' with 'type=button' is replaced by the next 'a' tag -->
<a href="" id="contact-link">Send</a>
了解 有关该
encodeURI
方法的更多信息。
ps:为了使这一切工作,用户必须配置他的默认邮件应用程序,否则什么都不会发生。
希望我把你推得更远。
推荐阅读
- angular - AAD身份验证后Angular 6重定向到实际组件而不是主页
- cmake - cmake_parse_arguments 存储空字符串
- react-native - 将世博会相机胶卷图像上传到服务器
- javascript - 将数组内的对象值显示为 HTML
- prestashop - Db::getInstance()->insert() 没有显示错误,不起作用
- python - 如何在python中的iterrows中找到列中的平均值
- flutter - 在脚手架主体中显示 TabBar
- javascript - 如何定位 DataTables 导出按钮组?
- java - 无法解析配置“:pushwoosh-react-native-plugin:classpath”的所有工件
- azure - 如何在 SonarQube 中重用项目