[JQUERY spinner] come aumentare o diminuire un valore in un text box?

**Emulman** · 29-12-2013, 18:21

ciao a tutti... come da subject vorrei sapere quanto segue:

ho creato uno spinner con jquery facilmente con

codice:

$( "#spinner1").spinner({ min: 0, max: 50 })

e l'html seguente

codice:

<input id="spinner" size="5">
articoli restanti in magazzino: <input type="text" id="num" size="5">

io vorrei che aumentando o diminuendo il valore dello spinner come si evince dall'html mi visualizzi nel texbox id=num il numero di articoli restanti (quindi se qui appare 50 e dallo spinner scelgo 2 allora il textbox mi deve visualizzare un 48). In altre parole: come faccio a capire se clicco sul pulsante + o - dello spinner? dalla documentazione ufficiale di jquery non ho trovato nulla al riguardo....
Grazie in anticipo a chi mi aiuterà!

**KillerWorm** · 29-12-2013, 20:31

Ciao, su questa documentazione: http://api.jqueryui.com/spinner/?rdf...o#event-change
puoi notare che ci sono diversi eventi.
Nel tuo caso potresti usare l'evento "stop".

**Emulman** · 29-12-2013, 22:14

Originariamente inviata da KillerWorm

Ciao, su questa documentazione: http://api.jqueryui.com/spinner/?rdf...o#event-change
puoi notare che ci sono diversi eventi.
Nel tuo caso potresti usare l'evento "stop".

grazie epr la risposta...ma sono semrpe al punto di prima!!! cmq qualcosa ho trovato: usare l'evento spin http://api.jqueryui.com/spinner/#event-spin
difatti ho provato così

codice:

<script>
$( "#spinner" ).spinner({
                    min: 0,
                    max: 50,
                    spin: function(event, ui) {
                             var x = ui.value;
                             var count = $( "#num").attr("value");
                             count = count - x;
                             $( "#num").attr("value", count.toString());
                    }
                  });
</script>
<input id="spinner" size="5">
articoli restanti in magazzino: <input type="text" id="num" size="5" style="border: none">

con la modifica suddetta cliccando sulla freccetta superiore dello spinner riesco a diminuire il valore del textbox....ma il contrario???? cioè se ad esempio invece di 47 clicco e torna a 48 allora il textbox deve aumentare di 1 il suo valore....forse è meglio usare $.ajax per ricaricare la pagina e passarle il nuovo valore????

**KillerWorm** · 29-12-2013, 23:50

Puoi semplicemente usare una variabile che popoli al caricamento della pagina o al caricamento dei dati (o quando ritieni più opportuno), in modo da ricordare il valore originario della tua textbox ed eseguire il calcolo riferendoti sempre a tale valore.
Un esempio pratico:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script type="text/javascript">
      $(function(){
        var valoreOriginale = $("#num").val();
        $("#spinner").spinner({
          min: 0,
          max: 50,
          stop: function(){
            $("#num").val(valoreOriginale - $("#spinner").val())
          }
        })
      })
    </script>
  </head>
  <body>
    <input id="spinner">
    <input type="text" id="num" size="5" value="100">
  </body>
</html>

Nota: ho usato l'evento stop perchè sembra che, a differenza di spin, sia richiamato anche quando l'utente modifica il valore digitando direttamente nel campo di testo. Mi sembra più funzionale.

**Emulman** · 29-12-2013, 23:54

ti ringrazio davvero...ora lo provo e incrocio le dita!!!!

Discussione: [JQUERY spinner] come aumentare o diminuire un valore in un text box?

Strumenti discussione

Ricerca discussione

Visualizza

[JQUERY spinner] come aumentare o diminuire un valore in un text box?

Permessi di invio