Question

项目：可编辑的HTML电子邮件模板

目标：创建一组用户友好的输入，在表单提交时，收集输入的文本并将其插入指定的p标记之间。制作电子邮件模板的代码位于页面底部的文本区域中，用户可以从中复制HTML并将其粘贴到电子邮件中，而无需进入HTML进行更改。表单中的每个输入都有一个ID，HTML中我们希望输入文本出现的各个标签也是如此

以下是表格：

<body>
<div id="content"> 
<div id="field">
    <form id="myForm" action="">
        <h2> Header </h2>
        <textarea id="header" cols="40" rows="5"></textarea> 
        <h2>Draft Details </h2>
        <textarea id="draft" cols="40" rows="5"></textarea>  
        <h2>Event 1 Image (left)</h2>
        <input id="ev1Img" type="file">
        <h2>Event 1 Details </h2>
        <textarea id="ev1Det" cols="40" rows="5"></textarea>
        <h2>Event 2 Image (right)</h2>
        <input id="ev2Img" type="file">
        <h2>Event 2 Details</h2>
        <textarea id="ev2Det" cols="40" rows="5"></textarea>
        <button type="submit">Generate Email Code</button>

    </form>
</div>

底部的文本区域（包含HTML模板）包含带有自己ID的p标记：

 <p id="Xheader"></p> ...etc

我正在尝试使用Javascript和Jquery来获取输入数据并在HTML中填充我的p标签：

    <script> 

       var dataY = document.getElementById("header", "draft", "ev1Det", "ev2Det").text();
       var dataX = document.getElementById("Xheader", "Xdraft", "Xev1Det","Xev2Det").text();
       document.ready(function() {
          document.getElementById("button").click(function() {
            dataX.text() = dataY.text();
          });
       });

    </script>

有哪些解决方案可以使这项工作？我是在正确的轨道上吗？我确定我的JS / JQ就是问题所在

Answer 1

假设您有一个名为function的{{1}}，其中需要write和id。我会假设您已经知道如何实现这一点，而当您提到text时，您的意思是textarea。

input

第一行为$("#myForm").submit(function() { $(this).find("textarea").each(function() { write($(this).attr("id"), $(this).val()); }); });创建submit处理程序，第二行为form内的textarea元素和第三行调用form {1}}元素。请注意，如果您没有为write元素定义textarea，则不会在name上将其提交给服务器，并注意当您使用javascript时{{1} }}指的是你所在的form。

在提交时，从输入中收集文本并将其显示在单独的文本区域中

1 个答案: