Good luck with the smoking. Its a wonderful thing when you finally do. Takes a LONG time.....
OK.....
lets start with company name.

OK - Part One of the lesson:

Step one is to label the area where company name will display
so in the area of your 'card preview template'
this:
HTML Code:
<td rowspan="2">company_name </td>
becomes this:
HTML Code:
<td rowspan="2" id="companyName">company_name </td>
we are assigning an id to the table data cell.
Note that javascript does not deal with underscores, which is why I changed the id to be different than tour form var name.


Next on the input field:

before:
HTML Code:
 <td><input name="company_name" type="text" id="company_name" tabindex="5" size="25" maxlength="50" /></td>
after:
HTML Code:
 <td><input name="company_name" type="text" id="company_name" tabindex="5" size="25" maxlength="50" onChange="document.getElementById('companyName').innerHTML=this.value;" /></td>
onChange=
This instructs the browser to run this javascript whenever the data is changed and the focus leaves that field.

This is the cell we just labelled
document.getElementById('companyName')
This is the data that was entered
this.value
... and this takes that data and sticks it in the table cell
document.getElementById('companyName').innerHTML=t his.value;"

Simple eh? (G)

Some gotchas to observe.
Watch out for textarea. Linefeeds will need to be converted to break tags, and that gets tricky.
PHP handles underscores, Javascript does not. So there should be none in the id= attributes.