How to make a form-based formatted text generator with JS?

Question

I'd like to make a Javascript-based web form that would generate formatted output (BBcode to be exact) based on the inputs and selections done by the user. The output should be displayed on a separate text field for easy copying and usage.

I do know how to make the HTML-based form and how the result should look like, but I'm struggling with the JavaScript code needed to generate and format it.

EDIT: I have created the HTML form below, using this example. Now I would like to know how to use JavaScript to output text and format it to suit my needs.

<form name="example" action="#" onsubmit="checkit(); return false">
<table class="form">
<tr>
<td>Your name</td>
<td><input name="yourname" /></td>
</tr>

<tr>
<td>Who did you punish?</td>
<td><input name="punishedname" /></td>
</tr>

<tr>
<td>Punishment?</td>
<td><select name="punishment">
<option value='' selected="selected">--- Select ---</option>
<option value="mute">mute</option>
<option value="kick">kick</option>
<option value="ban">ban</option>
<option value="ipban">IP-ban</option>
</select>
</td></tr>

<tr>
<td>For how long?</td>
<td><input name="time" />
<select name="timeunit">
<option value='' selected="selected">--- Select ---</option>
<option value="minutes">minutes</option>
<option value="hours">hours</option>
<option value="days">days</option>
<option value="weeks">weeks</option>
</select></td>
</tr>

<tr><td colspan="2"><input type="submit" value="Submit form" /><br />
<input type="reset" /></td></tr>
<tr><td colspan="2"><textarea cols="30" rows="7" name="output">Output will be written here</textarea></td></tr>
</table>

Answer 1

You need javascript/PHP or any other languages.

To do in javascript .. First make provide id or name attribute to you input fields and other form elements. create a function which will be called by submitting form. Collect values from form fields to variables

var name = document.getElementById("id_attribute_value").value; //Collects value using id attribute
var name = document.getElementByName("name_attribute_value").valueOf; //Collects value using name attribute

now to display values (say in textarea)

document.getElementById("id_attribute").value = name + punishment + other_vars; //This will put all the collected values in that textarea

To do something like this in php Follow up this link http://www.w3schools.com/php/php_form_validation.asp