使用javascript和表单的动态文本区域

我正在寻找一种方法来合并一组表单文本输入，并使用表单的输入来更新表单下方的文本区域。文本区域将是嵌入电子邮件签名的HTML代码块

例如，用户将在表单中输入他们的姓名和详细信息，单击提交按钮后，页面将生成一段HTML代码，供他们在电子邮件签名中使用

对于表单，我可能会有如下内容：

<label for="EmployeeName">Full name:</label>
<input id="EmployeeName" type="text" maxlength="30" size="20"/>

全名：

---

但我不知道如何使用表单中的值来更新下面的文本字段。我今天花了很多时间试图研究这个话题，但似乎什么都没发现。任何帮助都将不胜感激。

不确定这是否是您的意思，但这可能是一个解决方案：

$('#done').click(function(e){
    e.preventDefault();
    var tag = "<p>";
    var split = tag.substring(1);
    $('#res').val(tag+$('#EmployeeName').val()+'</'+split);
});

$（“#完成”）。单击（函数（e）{
e、 预防默认值（）；
var tag=“”；
var split=标记子字符串（1）；
$（'#res'）.val（tag++（'#EmployeeName'）.val（）++'不完全确定我是否理解这个问题，但这就是我（使用jQuery）想到的：

//单击go按钮时
$（“#操作”）。单击（函数（）{
//根据输入值建立一些html
var html='+$（'#EmployeeName'）.val（）+''
html+=''+$（'#employee姓氏'）.val（）+''
//在文本区域设置它
$（'#result'）.html（html）；
});

应该不难找到关于在线的文档

我设置了一个小提琴来演示：
对于类似的东西，一个库可能很好。我个人推荐Knockout，但每个人都有自己的偏好。这是我将如何做的（不一定是对你最好的方式）

您的HTML几乎相同，只是添加了一个模板。主要区别在于
数据绑定
属性，这些属性告诉元素要显示哪些数据。
值更新
键表示在
键下
后更新变量，而不是
模糊
（焦点

的位置）

---

这很好，谢谢。我将不得不检查敲除，谢谢你的建议。还有一个简单的问题，上面的内容适用于一个输入，但是你如何添加额外的输入/表单？我已经尝试了复制ko.observable变量和self.Email函数，但没有成功。如果我创建一个单独的函数，你会如何添加它到文本区域？我更新了代码，使其也有一个XYZ变量。找到它，并用您想要的任何变量替换它。它出现在4个位置。绑定到输入的HTML；作为原始文本的模板（在我过于简单的模板语言中，与or相反）；和在电子邮件函数中。最后是可视模型。感谢您的快速响应，但这仍然不起作用。您尝试过运行新代码吗？无论出于何种原因，使用第二个变量，该函数似乎无法运行。

<label for="EmployeeName">Full name:</label>
<input id="EmployeeName" type="text" maxlength="30" size="20"/>
<button id="done">Done</button>
<textarea id="res"></textarea>

// when the go button is clicked
$('#action').click(function() {
    // build up some html based on the input values
   var html = '<h1>' + $('#EmployeeName').val() + '</h1>'
   html += '<h2>' + $('#EmployeeSurname').val() + '</h2>'
   // set it in the textarea
   $('#result').html(html);
});

<div>
<label for="EmployeeName">Full name:</label>
<input id="EmployeeName" type="text" maxlength="30" size="20" 
    data-bind="value: EmployeeName, valueUpdate: 'afterkeydown'" />
<label for="XYZ">A Label:</label>
<input id="XYZ" type="text" maxlength="30" size="20" 
    data-bind="value: XYZ, valueUpdate: 'afterkeydown'" />
</div>

<textarea disabled rows=20 data-bind="value: Email"></textarea>

<script type="text/html" id="signatureTemplate">
<h2>EmployeeName</h2>
<h2>XYZ</h2>
<h3>Company</h3>
<h3>My Position</h3>
</script>

var SignatureGenerator = function(){
    var self = this;

    self.EmployeeName = ko.observable('');
    self.XYZ = ko.observable('');

    self.Email = ko.computed(function(){
        return document.getElementById("signatureTemplate").innerHTML
        .replace("EmployeeName", self.EmployeeName());
        .replace("XYZ", self.XYZ());
    });
}

ko.applyBindings(window.app = new SignatureGenerator());