[RISOLTO] Input dinamici

[Furion]

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 :fonzie:

 

[criric]

Ciao, puoi provare cosi

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(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"/><br/>
b <input type="text" size="2" name="b" value="0" class="number"/><br/>
c <input type="text" size="2" name="c" value="0" class="number"/><br/>
d <input type="text" size="2" name="d" value="0" class="number"/><br/>
e <input type="text" size="2" name="e" value="0" class="number"/><br/>

è solo una bozza, mancano i controlli se per caso vengono inseriti caratteri non numerici e non ho testato per bene
in ogni caso prima di inserire nel db devi ricontrollare i valori lato server

 

[Furion]

Ti ringrazio tantissimo, funziona! Sarebbe possibile invece dell'input type="text" usare il type="number"? lo modificherei io ma non mi è molto chiaro quello script

 

[criric]

non esiste il type "number" in html
se vuoi evitare che venga inserito del testo devi creare un funzione apposta
prova a guardare questa

 

[Furion]

Ehm veramente esiste...è stato inserito con l'html5...provare per credere

 

[criric]

già provato : con Firefox 24.0
risultato : nessun effetto
non riconoscendo il type il browser mette quello di default : text

edit
ok li ho visti ma funzionano solo su opera e chrome, direi quindi quasi inutili
edit edit
se vuoi cmq provare sostituisci keyup con onclick

 

[Furion]

edit edit
se vuoi cmq provare sostituisci keyup con onclick

l'avevo provato ma non va comunque mi accontento del tuo script :fonzie: ultima cosa: se volessi scrivere il numero massimo nella pagina in modo che si aggiorni in automatico ogni volta che cambia, come dovrei fare? :love:

 

[criric]

l'avevo provato ma non va

ho sbagliato la sntassi corretta non è onclick ma solo click

$(".number").click(function(){

si aggiorni in automatico ogni volta che cambia

chi lo cambia?

 

[Furion]

ho sbagliato la sntassi corretta non è onclick ma solo click

$(".number").click(function(){

chi lo cambia?

quando l'utente per esempio su input A scrive 1 il massimo diventa 4 giusto? quindi io vorrei mostrare il massimo da qualche parte nella pagina e aggiornarlo in maniera dinamica facendo vedere che passa da 5 a 4...non so se mi sono espresso bene!

 

[criric]

dovresti provare a capirlo però
potresti per ogni riga di codice commentare cosa fa secondo te : è un buon esercizio
comincio io

<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").keyup(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" value="0" class="number"/><br/>
b <input type="number" size="2" name="b" value="0" class="number"/><br/>
c <input type="number" size="2" name="c" value="0" class="number"/><br/>
d <input type="number" size="2" name="d" value="0" class="number"/><br/>
e <input type="number" size="2" name="e" value="0" class="number"/><br/>

 

[Furion]

dovresti provare a capirlo però
potresti per ogni riga di codice commentare cosa fa secondo te : è un buon esercizio
comincio io

si ci sto provando ma già mi era ostico il javascript, figurati il jquery funziona! ti ringrazio di cuore per il tuo aiuto!