Ciao, sì, va usato JavaScript. Tieni comunque conto che puoi fare in mille modi.
Prima di tutto ti consiglio di dare un id a quegli elementi che intendi manipolare via script, così da facilitare l'operazione.
Se utilizzi già jQuery sul tuo documento, l'ideale sarebbe sfruttarlo anche per elaborare questa operazione. Qui ti indico comunque un modo in semplice JavaScript.
Dovrai utilizzare l'evento change dell'elemento select. Volendo puoi utilizzare il gestore onchange da inserire direttamente come attributo sul tag <select> e da cui richiamare, ad esempio, una tua funzione. Io personalmente non amo questo sistema, ma preferisco separare totalmente lo script dal codice HTML per una questione di ordine e stile. In questo caso però ti indico l'approccio più immediato, poi vedi tu come meglio organizzarti la cosa.
Per recuperare il testo dell'elemento option selezionato puoi utilizzare la proprietà selectedIndex (dell'elemento select) e quindi la proprietà text (della relativa option).
Ti basterà poi fare un submit per recuperare solo i primi tre caratteri.
Qui un esempio applicato al tuo caso:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<script type="text/javascript">
function aggiornaTipo(me){
document.getElementById('tipoCosto').value = me.options[me.selectedIndex].text.substring(0,3);
}
</script>
</head>
<body>
<form method='post' action='pagina.php'>
Commessa:
<select style='min-width: 100px;' name='idCommessa' onchange="aggiornaTipo(this)">
<option value='10'>Pippo</option>
<option value='20'>Pluto</option>
<option value='30'>Paperino</option>
</select>
Tipo di costo:
<input type='text' name='tipoCosto' style='width: 70px;' id='tipoCosto'>
</form>
</body>
</html>
Chiaramente è solo un esempio da cui partire ma, nel caso, potrebbe essere migliorato per adeguarlo opportunamente alle tue esigenze.
PS: occhio a questa riga nel codice che hai postato, noto che manca un apice alla fine:
codice:
<input type='text' name='tipoCosto' style='width: 70px;>