Reading and appending form data live with javascript.

Question

Hello. I have been searching for the solution to this problem for a while and have to come across an answer that is newbie-friendly enough for me to understand its implementation. Heres my situation:

I am creating a simple, little, Web-based document numbering system that takes data entered into a form and combines it to form a document number. An example would be: A user enters a, Class Code(CCC), Base Number(BBBB), and a Dash number (DDD). The resulting document number would be CCC-BBBB-DDD. Super simple. I have it writing all of this to the database and all that jazz. I would just like to add one user friendly add on.

I want a little live-generate string at the top that shows what the Document number will be as the user edits each field before they actually press submit. Kinda like this example: http://inimino.org/~inimino/blog/javascript_live_text_input

I know almost nothing about javascript so it would be really helpful to know, 1: what the script should look like, 2: And How that script is interfacing with the html form.

Heres what the form looks like:

        <form action="submit.php" method="post">
        Enter Title:<input type="text" name="title" size="20"><BR>
        Enter Class Code:<input type="text" name="class" size="20"><BR>
        Enter Base Number:<input type="text" name="base" size="20"><BR>
        Enter Dash Number:<input type="text" name="dash" size="20"><BR>
        <input type="submit" value="Submit">

Thanks so much for any help you can offer. I'm sure this isn't too hard for someone well versed.

Thomas

Answer 1

From what I'm understanding this should do what you describe.

$('#yourForm input').bind('keyup', function(e) {
    var docNum = 'Your Document Number: <br/>'+$('input[name="class"]').val() + '-' + $('input[name="base"]').val() + '-' + $('input[name="dash"]').val();
    $('#preview').html(docNum);
});​

For your second question, in how it interfaces with the HTML form. The first jQuery selector #yourForm input is going to look for any <input> that falls under a <form id='yourForm'>. It's then binding the keyup event to fire the function. The function takes the value from the <input> with the name value of class, base and dash as well as some formatting and creates a variable named docNum. docNum is then inserted into the element with the id set to preview, which in the Fiddle example is a div right above the form.

http://jsfiddle.net/nuY2M/

Answer 2

Include this html where you want the document number preview to display:

Document #:
<span id="classPreview"></span>
-
<span id="basePreview"></span>
-
<span id="dashPreview"></span>

Add this script to populate the values:

function updateDocNumPreviewPart(fieldName)
{
    var preview = document.getElementById(fieldName + "Preview");
    var field = document.forms[0][fieldName];
    preview.innerHTML = field.value;
}
function updateDocNumPreview()
{
    updateDocNumPreviewPart("class");
    updateDocNumPreviewPart("base");
    updateDocNumPreviewPart("dash");
}

Finally, add some code to your form fields to call the script:

<input ... onkeyup="updateDocNumPreview()" onchange="updateDocNumPreview()" />