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

Question

I'm looking for a way to incorporate a bunch of form text inputs, and use the input from the forms to update a text area below the forms. The text area will be a chunk of HTML code to embed into the signature of an email.

For example, a user would enter their name and details into the forms, and after clicking a submit button, the page will generate a piece of HTML code for them to use in their email signature.

For the form I might have something like:

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

But I'm not sure how to use the values from the form to update a text field below. I've spent a good chunk of today trying to research this topic, but can't seem to turn anything up. Any help would be appreciated.

Answer 1

For something like this, a library may be nice. I personally recommend Knockout, but everyone has their preferences. This is how I would do it (not necessarily the best way for you).

demo

Your HTML is pretty much the same, just with an added template. The main difference is the data-bind attributes, which tell the elements what data to show. The valueUpdate key, says to update the variable after keydown , rather than blur (oposite of 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>

Those data-bind values match up with your JavaScript, and are updated every time the user types a character. You can learn Knockout on their webiste , or just modify this code as needed.

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

Not sure if this is what you mean, but this could be a solution:

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

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

Check it out here: Fiddle

The code basically is saying:

• $('#done').click on click of the button
• e.preventDefault(); don't do the usual action of sending the form but do what I say.
• var tag = "<p>" chooses the tag you want to add (paragraph)
• var split = tag.substring(1); removes the first < so we can later add a slash
• $('#res').val( gives the value to the id res of what is in the parenthesis wichi is the tag, the input the </ and the split: tag+$('#EmployeeName').val()+'</'+split

Answer 3

Not entirely sure if I understand the question, but this is what I came up with (using 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);
});

Should not be that hard to find documentation about online...

I set up a small fiddle to demonstrate: http://jsfiddle.net/jQ2Ya/