如何将文本区域的内容添加到电子邮件正文

Question

您好：我在 html 中创建了一个带有表格的表单，使用 select 在选项之间进行选择。一个选项是“其他”，它会生成一个新的文本区域输入字段。表格完成后，用户可以通过电子邮件将其发送给自己。除了新的“其他”类别之外，我可以让它适用于所有选择选项。它没有将新文本添加到电子邮件正文中，而是声明“[object HTMLTableCellElement]”。我一直试图让它工作但一直无法解决它或找到对我有帮助的答案 - 作为编码的相对新手，我不禁认为我遗漏了一些明显的东西......任何帮助或建议都会很棒，谢谢

`

通过电子邮件发送新输入

    <form action="#" method="post" id="myForm">
        <table id="myTable">
            <tr>
                <td><select name="variableList" id="variableList" class="select">
                <option value="" disabled selected>Please choose...</option>    
                <option value="Var 1">Var 1</option>
                <option value="Var 2">Var 2</option>
                <option value="Var 3">Var 3</option>
                <option value="Other">Other...</option>
                </select></td>
            </tr>
            <tr>
                <td id="newVariable"></td>
            </tr>
            <tr>
                <td><input type="email" name="email" id="emailID" placeholder="Your email address..."></td>
            </tr>
            <tr>
                <td><button type="button" class="buttons" onclick="sendEmail()" id="sendEmail()">Email</button></td>
            </tr>

        </table>
    </form>`

这是javascript：

        document.getElementById("variableList").addEventListener("change", generateTxtBox);

        var x = 1;

        function generateTxtBox(){
                //Create new input textarea if "Other" is selceted from list of options
                if (x==1 && document.getElementById('variableList').value == "Other") {
                var input = document.createElement("input");
                input.setAttribute('type', 'textarea');
                input.setAttribute('placeholder', 'Your new variable...');
                var parent = document.getElementById("newVariable");
                parent.appendChild(input);
                x += 1;
                }
        }

        function sendEmail(){
            var email = document.getElementById("emailID").value;
            var subject = "Email variables";
            var variableList = document.getElementById("variableList").value;
            document.getElementById("newVariable").addEventListener("change", getText);
                function getText(){
                    document.getElementById("newVariable").textContent = newVariable;
                }
            if (document.getElementById('variableList').value == "Other"){
                window.location = "mailto:" + email + "?subject=" + subject + "&body=" + newVariable;
            } else {
            window.location = "mailto:" + email + "?subject=" + subject + "&body=" + variableList;
            }    
        }

Answer 1

分配的工作方式如下：variable = [new value];

接下来，您将在“发送”电子邮件之前添加一个事件侦听器，这意味着您设置为处理程序的函数永远不会运行。即使它确实运行了，但顺序是错误的。

最后，newVariable 实际上是您拥有的<td> 的id，这意味着您将表格单元格的文本表示形式添加为body 到电子邮件链接。

document.getElementById("variableList").addEventListener("change", txtBox);

function txtBox() {
  // show textarea if "Other" is selected from list of options
  document.getElementById("txtBoxRow").style.display = this.value == "Other" ? "table-row" : "none";
}

function sendEmail() {
  var email = document.getElementById("emailID").value;
  var subject = "Email variables";
  var variableList = document.getElementById("variableList").value;
  var body = variableList == "Other" ? document.getElementById("newVariable").value : variableList;
  window.location = "mailto:" + email + "?subject=" + subject + "&body=" + body;
}

#txtBoxRow {
  display: none
}

<table id="myTable">
  <tbody>
    <tr>
      <td>
        <select id="variableList" class="select">
          <option value="" disabled selected>Please choose...</option>
          <option>Var 1</option>
          <option>Var 2</option>
          <option>Var 3</option>
          <option value="Other">Other...</option>
        </select>
      </td>
    </tr>
    <tr id="txtBoxRow">
      <td>
        <textarea id="newVariable"></textarea>
      </td>
    </tr>
    <tr>
      <td>
        <input type="email" name="email" id="emailID" placeholder="Your email address...">
      </td>
    </tr>
    <tr>
      <td>
        <button class="buttons" onclick="sendEmail()">Email</button>
      </td>
    </tr>
  </tbody>
</table>