Salve a tutti;
su un sito ho la necessità che l'utente possa suddividere un cverto numero di punti (100) tra più caratteristiche aggiungendoli tramite campi number in un form. Come posso implementare una funzione che faccia in modo che oltre a visualizzare i punti rimanenti da assegnare, blocchi l'aggiunta quando questi sono a zero?
Prova a fare un esempio (anche con un immagine) perché non molto chiaro cosa ti serve
Cavicchi Andrea
Problemi con javascript, jquery, ajax clicca qui
Poniamo che l'utente debba creare un pg in un gioco di calcio. Al momento della creazione ha a disposizione 100 punti da distribuire tra le varie abilità disponibili. Quello di cui necessito è di visualizzare in real time i punti che rimangono da distribuire e quando questi sono arrivati a zero è necessario bloccarne l'assegnazione. Come posso fare ciò?
Ovviamente inserirò un controllo successivo tramite php che controllerà che i dati inviati trmite form e verificherà che la somma dei punti assegnati non sia superiore a 100.
Ciao, sicuramente stai chiedendo qualcosa di più che "implementare una funzione".
Ho buttato giù un po' di script per arrivare ad una soluzione presumibilmente valida.
Vedi un po' se questo esempio può darti lo spunto giusto:
Ho cercato di commentare al meglio lo script ma se hai bisogno di qualche chiarimento chiedi pure.codice HTML:<!DOCTYPE HTML> <html> <head> <title>Esempio</title> <meta charset="utf-8"> <style type="text/css"> /* qualche regola css */ #campoPuntiRestanti{color:blue} .campoInput{width:50px; margin:5px 0} </style> <script type="text/javascript"> // Definisco le variabili globali var puntiTotali = 100; var puntiRestanti; var campoPuntiRestanti; var campiInput; // Aggiorna il campo dei punti restanti function aggiornaPuntiRestanti(){ puntiRestanti = puntiTotali-totalePuntiUsati(); campoPuntiRestanti.innerHTML = puntiRestanti; } // Restituisce la somma dei valori utilizzati sui campi function totalePuntiUsati(campoEscluso){ // campoEscluso rappresenta il campo in fase di modifica, sarà quindi escluso dal conteggio se specificato var tot = 0; var i = campiInput.length; while(i--) { if(campoEscluso!==campiInput[i]) tot += parseInt(campiInput[i].value); } return tot; } // Controlla il campo modificato e ne convalida il valore inserito function controllaValoreCampo(campo){ var val = parseInt(campo.value)||0;// Converto l'input in un valore numerico intero campo.value = Math.max(0,Math.min(puntiTotali-totalePuntiUsati(campo)||0,val));// Limito il valore tra 0 e il valore massimo consentito attualmente per questo campo aggiornaPuntiRestanti(); } // Inizializzazione window.onload = function(){ campoPuntiRestanti = document.getElementById("campoPuntiRestanti"); campiInput = document.getElementsByClassName("campoInput"); var i = campiInput.length; while(i--) { campiInput[i].onchange = function(){controllaValoreCampo(this)}; controllaValoreCampo(campiInput[i]); } } </script> </head> <body> <form action=""> <b>Punti restanti: <span id="campoPuntiRestanti"></span></b> <hr> <br><label for="A">Caratteristica A</label> <input id="A" class="campoInput" type="number" > <br><label for="B">Caratteristica B</label> <input id="B" class="campoInput" type="number" > <br><label for="C">Caratteristica C</label> <input id="C" class="campoInput" type="number" > </form> </body> </html>
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Altra ipotesi http://webandylab.altervista.org/f100.php
Cavicchi Andrea
Problemi con javascript, jquery, ajax clicca qui
Grazie ad entrambi; avrei però alcune domande:
Killer: non capisco come fai a far aggiornare il tutto ogni volta che viene modificato il valore senza usare onChange e non ho capito bene come dovrebbe funzionare la funzione controllaValoreCampo
Andrea: anche te come fai a far aggiornare il tutto senza onChange? Posso sostituire i campi text con campi number?
Rileggi il codice, dimmi cosa vedi in questa riga
codice:campiInput[i].onchange = function(){controllaValoreCampo(this)};
No
Uso proprio onchange ma questo viene assegnato direttamente nello script; vedi il blocco di codice sotto Inizializzazione.non capisco come fai a far aggiornare il tutto ogni volta che viene modificato il valore senza usare onChange
Nel ciclo while assegno l'evento onchange ad ogni elemento di campiInput (che è un nodeList dei campi con classe "campoInput").
Quella funzione viene richiamata esattamente al verificarsi dell'evento onchange (impostato sempre su Inizializzazione). Oltre a controllare il valore del campo, fa una serie di "aggiustamenti" per correggere automaticamente eventuali valori non consentiti. In sostanza correggere l'inserimento di eventuali caratteri non numerici e limita il valore tra 0 e gli attuali punti rimanenti. Se non ti è chiaro il funzionamento di qualche parte in particolare, dentro questa funzione, fammi sapere.e non ho capito bene come dovrebbe funzionare la funzione controllaValoreCampo
Mi permetto di rispondere al posto di Andrea (eventualmente chiarirà meglio lui se lo ritiene opportuno).Andrea: anche te come fai a far aggiornare il tutto senza onChange?
Giusto per precisare, tieni presente che in questo caso Andrea ha utilizzato jQuery mentre il mio esempio è semplice javascript.
Sostanzialmente ad ogni campo sono stati impostati due eventi attraverso il metodo "on":
- keyup: si verifica quando viene rilasciato un qualsiasi tasto della tastiera. Questo fa in modo di lanciare una funzione direttamente durante la digitazione sul campo, a differenza di onchange che invece si verifica solo dopo la perdita del focus del campo in questione.
Diciamo che con keyup si può avere un controllo in tempo reale. Personalmente ho scelto di utilizzare onchange nel mio esempio perché, oltre il controllo del superamento dei punti, avvengono delle ulteriori correzioni che ho preferito che siano eseguite dopo l'inserimento completo del valore.
- blur: si verifica quando l'elemento, sul quale è applicato, perde il focus. In questo caso è stato utilizzato per controllare che i campi non contengano valori vuoti.
Certo che sì. Andrea confermerà.Posso sostituire i campi text con campi number?
Basterà modificare, nelle varie parti dove è utilizzato, il selettore jQuery in una cosa del genere $("input:number") anziché "input:text". Ovviamente andrà sistemata opportunamente anche la parte html e css.
E' chiaro che in questo caso sia più confacente un campo di tipo number per il tipo di utilizzo che ne stai facendo, ma tieni presente che su diversi browser la differenza è praticamente nulla. Al momento giusto qualcuno (tra quelli che ho provato personalmente), ad es. chrome, aggiunge uno stepper sui campi number, ma per il resto vengono considerati alla stregua dei campi di tipo text (che io sappia). Ad esempio in un campo number sarà possibile inserire comunque qualsiasi carattere anche se non numerico. Per questo motivo sarebbe opportuno, via script, fare dei controlli o prevenire in qualche modo l'inserimento di valori non consentiti.
Sarebbe anche possibile integrare un qualche apposito plugin (ce ne sono vari in jQuery) per ottenere un numeric-stepper crossbrowser così da rendere più funzionale il tutto. Ovviamente prendila giusto come un'idea;
EDIT: tampertools mi ha anticipato sul primo punto
Ultima modifica di KillerWorm; 30-04-2014 a 16:35
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Cambiare con number si è possibile ma si dovrà apportare delle modifiche allo script non c'è onchange perché usa altri eventi onkey gestiti da jquery
Cavicchi Andrea
Problemi con javascript, jquery, ajax clicca qui
Grazie a tutti davvero; penso che però utilizzerò il metodo che mi ha esposto Killer; l'ho già aggiunto e funziona alla perfezione.
Un'ultima cosa: se dovessi impostare che questi attributi devono partire da un certo numero(diverso l'uno dall'altro) e poi da li poter essere aumentati; cosa devo aggiungere?
Permessi di invio
Rispondi quotando