0

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

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

对于表格，我可能有类似的东西：

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

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

4

3 回答 3

1

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

演示

您的 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 相匹配，并且每次用户键入字符时都会更新。您可以在他们的网站上学习 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());
于 2013-07-08T22:25:08.623 回答
0

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

$('#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>

在这里查看：小提琴

代码基本上是说：

  • $('#done').click点击按钮
  • e.preventDefault();不要执行发送表格的常规操作，而是按照我说的做。
  • var tag = "<p>"选择要添加的标签（段落）
  • var split = tag.substring(1);删除第一个<，以便我们稍后添加斜杠
  • $('#res').val(将值赋给括号中的 id res 的值，即标签、输入 the</和拆分：tag+$('#EmployeeName').val()+'</'+split
于 2013-07-08T22:18:49.137 回答
0

不完全确定我是否理解这个问题，但这是我想出的（使用 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/

于 2013-07-08T22:21:09.137 回答