Question

我有一个模态表单（请参见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">&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>，它具有href属性，该属性接受“ mailto”链接，并且该属性将由所需的JavaScript填充信息，我给了它id="contact-link"，以供JavaScript引用。

您以前在input和type="button"（将由a标记替换）中使用“内联事件处理程序”，这是一种不好的做法。相反，最好使用内置的addEventListener方法将事件处理程序附加到所需的任何元素。 Learn more关于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">&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方法。

Ps ：为了使所有这些工作正常进行，用户必须配置其默认的邮件应用程序，否则将不会发生任何事情。

希望我进一步推动了你。

使用模式形式的条目填充电子邮件

1 个答案: