Dynamic text area using javascript and forms

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.

Brigand · Accepted Answer · 2013-07-09 16:55:31Z

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

This works great, thank you. I will have to check out Knockout, thanks for your suggestion.
One more quick question, the above works for one input, but how would you add additional inputs/forms? I have tried duplicating the ko.observable variable and the self.Email function, but with no luck. If I create a separate function, how would you add this to the text area?
I updated the code to also have an XYZ variable. Find it and, replace it with whatever you want. It appears in 4 places. The HTML, bound to an input; the template, as raw text (in my oversimplistic templating language, as opposed to this or this); and in the Email function. Lastly the ViewModel as an observable.
Thanks for your quick response, but this still isn't working. Have you tried running the new code? For whatever reason with a second variable, the function doesn't seem to run.

Pevara · Accepted Answer · 2013-07-08 22:21:09Z

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/

Mr.Web · Accepted Answer · 2013-07-08 22:26:27Z

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

Collectives™ on Stack Overflow

Dynamic text area using javascript and forms

3 Answers 3

demo

4 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Related