2017-06-22 37 views
0

您好:我創建了一個HTML格式的表格,使用select在選項之間進行選擇。一種選擇是生成新的文本區域輸入字段的「其他」。一旦表格完成,用戶可以通過電子郵件發送給他們自己。除了新的「其他」類別之外,我可以將其用於所有選擇選項,而不是將新文本添加到電子郵件正文中,它指出「[object HTMLTableCellElement]」。我一直試圖讓這個工作,但一直未能解決,或找到答案,可以幫助我 - 作爲一個相對的新手到編碼我不禁在想,我失去了一些東西明顯...任何幫助或建議將是巨大的,感謝如何將textarea的內容添加到電子郵件的正文

`

電子郵件新的輸入

<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; 
      }  
     } 

回答

2

分配的工作是這樣的:variable = [new value];

接下來,您要添加一個事件監聽器右側前「送」的電子郵件,這意味着你設置的處理程序永遠不會運行的功能。即使它運行,命令也是錯誤的。

最後,newVariable實際上是在id<td>你有,這意味着你要添加的表格單元格中的文本表示作爲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>

+0

是的,這是什麼,我搞清楚了,但是我還是太慢了。這應該是答案... – Schlumpf

+0

非常感謝克里斯G花時間解釋,我真的很感謝你 - 這工作非常好,我設法將其納入我正在工作的網站;可悲的是,我仍然有辦法去解決這個問題。 – Druloop

相關問題