Ciao, per rendere un campo input non modificabile da utente puoi usare l'attributo readonly. Chiaramente qualche utente malintenzionato puo andare a modificare il valore per vie traverse sul browser, per cui è sempre buona norma fare opportuni controlli lato server dopo l'invio dei dati.
Inoltre, se si tratta di HTML5, per i campi input in cui vanno inseriti numeri sarebbe più consono adoperare type=number. La maggior parte dei recenti browser presenta uno stepper affianco ad un campo number in modo da facilitarne l'inserimento dei dati.
In tal caso però bisogna eliminare gli attributi size e maxlength, non sono consentiti in un campo di tipo number. Nel caso puoi specificare opportunamente gli attributi min e max.
Per fare un calcolo automatico, funzionale, puoi usare qualche riga di javascript che aggiorni il risultato in tempo reale, man mano che vengono inseriti i dati.
Ti posto un esempio in base alle tue indicazioni:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<script type="text/javascript">
var c1,c2,c3,c4,c5;
function calcola(){
var v1 = c1.value;
var v2 = c2.value;
var v3 = c3.value;
var v4 = c4.value;
c5.value = v1-v2-v3-v4;
}
// Al caricamento della pagina
window.onload = function(){
// I campi interessati al calcolo
c1 = document.form.campo1;
c2 = document.form.campo2;
c3 = document.form.campo3;
c4 = document.form.campo4;
c5 = document.form.campo5;
// Assegno un handler per richiamare la funzione calcola() automaticamente quando avviene una qualsiasi modifica dei valori nei campi
c1.onchange = c1.onkeypress = c1.onpaste = c1.oninput
= c2.onchange = c2.onkeypress = c2.onpaste = c2.oninput
= c3.onchange = c3.onkeypress = c3.onpaste = c3.oninput
= c4.onchange = c4.onkeypress = c4.onpaste = c4.oninput
= calcola;
// Se serve, puoi eseguire il calcolo ad apertura pagina per aggiornare il risultato nel caso i campi siano popolati in qualche modo preventivamente
calcola();
}
</script>
</head>
<body>
<form action="#" method="post" name="form">
<input type="number" name="campo1" value="">Campo 1<br>
<input type="number" name="campo2" value="">Campo 2<br>
<input type="number" name="campo3" value="">Campo 3<br>
<input type="number" name="campo4" value="">Campo 4<br>
<hr>
<input readonly type="text" name="campo5" value="">Campo 5<br>
<hr>
<input type="submit" value="Invia dati">
</form>
</body>
</html>
Chiaramente si può risolvere in tanti altri modi.
Rispondi quotando
Originariamente inviata da clasku
