Question

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

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

对于表格，我可能会有：

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

但我不确定如何使用表单中的值来更新下面的文本字段。我今天花了很多时间试图研究这个话题，但似乎无法改变。任何帮助将不胜感激。

Answer 1

对于这样的事情，图书馆可能会很好。我个人推荐Knockout，但每个人都有他们的偏好。我就是这样做的（不一定是最适合你的方式）。

demo

您的HTML几乎相同，只是添加了模板。主要区别在于data-bind属性，它告诉元素要显示的数据。 valueUpdate密钥表示在keydown之后更新变量，而不是blur（对等focus）。

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

这些data-bind值与您的JavaScript匹配，并在每次用户键入字符时更新。您可以在webiste上学习Knockout，或者根据需要修改此代码。

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());

Answer 2

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

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

HTML：

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

请在此处查看：Fiddle

代码基本上是这样说的：

$('#done').click
e.preventDefault();不执行发送表单的常规操作，而是执行我所说的内容。
var tag = "<p>"选择您要添加的标记（段落）
var split = tag.substring(1);删除了第一个<，以便我们以后可以添加斜杠
$('#res').val(给出括号内的id res的值wichi是标记，输入</和分割：tag+$('#EmployeeName').val()+'</'+split

Answer 3

我不完全确定我是否理解这个问题，但这是我提出的（使用jQuery）：

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

不应该很难找到有关在线的文档...

我设置了一个小小的小提琴演示：http://jsfiddle.net/jQ2Ya/

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

3 个答案:

demo