代码之家 › 专栏 › 技术社区 › kroy2008

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

subject mailto html-email html

kroy2008 · 技术社区 · 7 年前

我有一个模态表单(参见模态表单的HTML片段-这只是整个HTML页面的一小部分),允许用户向我提交新的链接。这是一个本地HTML文件,我为我的团队维护在一个共享驱动器上,我们没有访问服务器来承载这个文件,所以当提交一个新链接时,我只是进去用新链接更新HTML。

我希望能够从填充电子邮件正文的模态正文的每个字段中获取值,每个字段都在自己的行中,如下所示:

URL:[在URL字段中输入的值]
Description:[在Description字段中输入的值]
类别:[从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">&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>

1 回复 | 直到 7 年前

ThS 7 年前

首先,你的工作中有一些错误 HTML input 标签没有正确关闭),我设法纠正他们。

你不需要一个 form 为了实现你的目标,你可以使用它,但是 a 标签就足够了。所以 <input type="button" id="submit_link_button" value="Submit" onclick="emailLink()"> <a href="" id="contact-link">Send</a> href 接受“mailto”链接的属性,该属性将由 JavaScript 我给了它一个 id="contact-link" JavaScript语言 .

输入 具有 type="button" 一 这是一个坏习惯。相反,最好使用内置的 addEventListener Learn more 关于 附加侦听器 方法。

下面是一个可运行的片段,它演示了所说的全部内容。

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

附言: