-
Input dinamici
Salve a tutti, io avrei bisogno di aiuto con uno script premesso che di javascript non ne so molto.
Lo script dovrebbe essere strutturato nel modo seguente:
a)Ho dei punti massimi per esempio 5,
b)Ho 5 input di tipo number i cui valori vanno da 0 a 5,
c)Ho un tasto per l'invio dei dati che saranno salvati su db.
Ora il mio problema è fare in modo che l'utente non possa impostare altri numeri negli input una volta raggiunto il numero massimo e quindi scalare dal massimo di volta in volta il valore impostato negli input, cioè se io ho 3 punti sull'input A e due sull'input B ho quindi esaurito i punti massimi e gli altri input C D E dovrebbero essere disabilitati o cose simili.
Ho provato disabilitando gli input con l'attributo disabled = true ma così facendo il valore degli input non viene preso :???:
Spero di essermi spiegato e un grazie di cuore a chi saprà aiutarmi :wink:
-
Ho risolto...posto il codice in caso servive a qualcuno:
html5 (con l'input type="number")
Codice:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
// al caricamento della pagina
$(document).ready(function() {
// inizializzo la variabile limite
var limite = 5;
var somma;
var val;
$(".number").change(function(){
val = parseInt($(this).val());
somma = 0;
$(".number").each(function(){
somma += parseInt($(this).val());
});
var resto = limite - somma > 0 ? limite - somma : 0;
$("#limite").html(resto);
if(somma > limite){
var diff = somma - limite;
$(this).val(val - diff);
}
})
});
</script>
Limite : <span id="limite">5</span><br/>
a <input type="number" size="2" name="a" min="0" max="5" value="0" class="number"/><br/>
b <input type="number" size="2" name="b" min="0" max="5" value="0" class="number"/><br/>
c <input type="number" size="2" name="c" min="0" max="5" value="0" class="number"/><br/>
d <input type="number" size="2" name="d" min="0" max="5" value="0" class="number"/><br/>
e <input type="number" size="2" name="e" min="0" max="5" value="0" class="number"/><br/>
html vecchio (con l'input type="text")
Codice:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
function char_consentiti(campo) {
var re = new RegExp("^[0-9]+$", "");
var valore = campo.value;
for ( var i = 0; i < valore.length; i++ ) {
if (!valore.charAt(i).match(re)) {
campo.value = valore.substring(0, i);
return;
}
}
}
$(document).ready(function() {
var limite = 5;
var somma;
var val;
$(".number").keyup(function(){
val = parseInt($(this).val());
somma = 0;
$(".number").each(function(){
somma += parseInt($(this).val());
});
if(somma > limite){
var diff = somma - limite;
$(this).val(val - diff);
}
})
});
</script>
a <input type="text" size="2" name="a" value="0" class="number" onkeyup="char_consentiti(this)" /><br/>
b <input type="text" size="2" name="b" value="0" class="number" onkeyup="char_consentiti(this)" /><br/>
c <input type="text" size="2" name="c" value="0" class="number" onkeyup="char_consentiti(this)" /><br/>
d <input type="text" size="2" name="d" value="0" class="number" onkeyup="char_consentiti(this)" /><br/>
e <input type="text" size="2" name="e" value="0" class="number" onkeyup="char_consentiti(this)" /><br/>