back to basics.

i have 3 form elements:

Code:
<form name="mainform" id="mainform">

<select name="title" id="title">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
</select><br />

First name <input type="text" name="firstname" id="firstname" /><br />

Last name <input type="text" name="lastname" id="lastname"/><br />



Passenger name <input type="text" name="paxname" id="paxname" />

</form>
when user chooses a TITLE from title drop down this should update paxname with the chosen value and a space

when the user types a FIRST NAME into the first name textbox this should update the paxname with the value and a space

when the user types a LAST NAME into the last name textbox this should update the paxname with the value

therefore at the end of the process the paxname will have the full name of the person in order with spaces in between. also i would like the first name and last name values to be changed to proper case ie John Smith once placed into paxname

the update process does not have to be instantaneous, it can perhaps update the paxname textbox when the focus is gone from the field in question, dont mind how it works as long as it updates.


thanks, hopefully this is quite straightforward. also i would prefer a small bit of JS which i can add to the form element rather than a function if possible