[RISOLTO] Input dinamici

Furion · 23 Ott 2013

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 · 23 Ott 2013

Ciao, puoi provare cosi

HTML:

<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 · 23 Ott 2013

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 · 23 Ott 2013

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 · 23 Ott 2013

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

criric · 23 Ott 2013

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 · 23 Ott 2013

criric ha scritto:
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 · 23 Ott 2013

l'avevo provato ma non va

ho sbagliato la sntassi corretta non è onclick ma solo click

Codice:

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

si aggiorni in automatico ogni volta che cambia

chi lo cambia?

Furion · 23 Ott 2013

criric ha scritto:
ho sbagliato la sntassi corretta non è onclick ma solo click

Codice:

$(".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 · 24 Ott 2013

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

HTML:

<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 · 24 Ott 2013

criric ha scritto:
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!

[RISOLTO] Input dinamici

Furion

Utente Attivo

criric

Super Moderatore

Furion

Utente Attivo

criric

Super Moderatore

Furion

Utente Attivo

criric

Super Moderatore

Furion

Utente Attivo

criric

Super Moderatore

Furion

Utente Attivo

criric

Super Moderatore

Furion

Utente Attivo

Discussioni simili

[RISOLTO] Input dinamici

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Discussioni simili

Privacy & Transparency

Privacy & Transparency