使用模态表单中的条目填充电子邮件

Question

我有一个模态表单（请参阅模态表单的 HTML 片段 - 这只是整个页面的一小部分 HTML）以允许用户提交新的 link对我来说。这是我在共享驱动器上为我的团队维护的本地 HTML 文件，我们无权访问服务来托管它，所以当提交新的 link 时，我直接进去并用新的 link 更新 HTML。

我希望能够从模态正文的每个字段中获取值来填充电子邮件的正文，每个字段都像这样在自己的行中：

名称：[在名称字段中输入的值]
URL：[在 URL 字段中输入的值]
描述：[在描述字段中输入的值]
类别：[从 NewCat 下拉字段中选择的值]

我还希望主题行填充 "New Link Submitted" 或类似内容。

  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">&times;</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>

Answer 1

首先，您的 HTML 代码中存在一些错误（input 标签未正确关闭），我设法更正了它们。

您不需要 form 标签来实现您的目标，您可以使用它，但 a 标签就足够了。因此，我将 <input type="button" id="submit_link_button" value="Submit" onclick="emailLink()"> 改为 <a href="" id="contact-link">Send</a> 标签，该标签具有接受 'mailto' 链接的 href 属性，并且该属性将由 JavaScript 填充所需的信息，我给了它一个 id="contact-link" 以通过 JavaScript.

引用它

You used to use an 'inline event handler' in the input with type="button"(the one that will be replaced by an a tag) which is a bad practice. Instead, it's better to use the built-in addEventListener method to attach an event handler to whatever element you want. Learn more about addEventListener method.

这是一个可运行的片段，说明了所有内容。

// 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">&times;</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>

Learn more about the encodeURI method.

Ps: 为了使所有这些正常工作，用户必须配置他的默认邮件应用程序，否则什么也不会发生。

希望我能把你推得更远。

使用模态表单中的条目填充电子邮件

Populate email with entries from modal form

html

mailto

subject

html-email