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

On submit, gather text from inputs and display it in a separate textarea

本文关键字：文本 显示 区域 单独 提交 输入      更新时间：2023-09-26

项目:一个可编辑的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模板)有p个标签，它们有自己的id:

 <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就是问题所在

假设您有一个称为write的function，它期望有一个id和一个text。我假设您已经知道如何实现它，并且当您提到input时，您指的是textarea。

$("#myForm").submit(function() {
    $(this).find("textarea").each(function() {
        write($(this).attr("id"), $(this).val());
    });
});

第一行为form创建submit处理程序，第二行迭代form中的textarea元素，第三行为textarea元素调用write。请注意，如果您没有为form元素定义name s，它们将不会在submit上提交给服务器，并且请注意，当您使用javascript时，this指的是您所在的function。

相关文章：