Primi passi con jQuery – 3

Pubblicato il 05/apr/10, in Tutorial, jQuery, da Raspo

Oggi, dopo una lunga assenza, continua la guida a jQuery con la terza parte, dove vedremo in quanti modi è possibile interagire con i form HTML tipo input, bottoni, checkbox, etc…

Prima di cominciare

Ricordati di caricare la libreria jQuery nella sezione <head> e di inserire i codici jQuery che vedremo tra poco, all’interno del canonico $(document).ready(function(){ … }); come visto nella prima lezione.

Ottenere il contenuto di un campo

Prendiamo un campo input con id esempio1, vogliamo far sì che, cliccando sul pulsante con id btn1, il contenuto del campo venga letto e mostrato all’utente in una finestra di alert.

<input id="esempio1" type="text" value="Questo è il contenuto di default" />
<button id="btn1" type="button">Cliccami</button>

Il codice jQuery è:

$("#btn1").click(function(){
    var testo = $("#esempio1").val();
    alert(testo);
});

Che tradotto a parole significa: quando fai click sull’elemento con id btn1, cerca l’elemento esempio1, estraine il valore e salvalo dentro una variabile testo creata sul momento; quindi, mostrami il contenuto della variabile in una finestra di alert.

Da notare l’utilizzo della funzione .val() che scritta così, senza valori tra parentesi, restituisce il valore dell’elemento, quindi il contenuto dell’input in quel momento.

Impostare il contenuto di un campo

Se invece di usare .val() come abbiamo appena fatto, mettiamo una stringa all’interno delle parentesi, la funzione non restituirà più un valore, ma imposterà quello che abbiamo indicato tra parentesi.

$("#btn2").click(function(){
   $("#esempio2").val("");
});

In questo caso, cliccando sul pulsante, il valore del campo viene azzerato, o meglio, viene impostato un valore nullo, che si scrive con due virgolette aperte e chiuse.

Conteggio dei caratteri

Per creare uno script per il conteggio dei caratteri abbiamo bisogno come al solito di un campo input di tipo text e di un area (per esempio uno span) dove inserire il numero dei caratteri.

<input id="esempio3" type="text" value="" />
<span id="contatore1" >0</span>

Ed ecco il codice jQuery:

$("#esempio3").keyup(function(){
    var num = $(this).val().length;
    $("#contatore1").html(num);
});

La funzione .keyup() esegue la funzione tra parentesi ogni volta che viene premuto e rilasciato un tasto.
Tale funzione, crea al volo una variabile num dentro cui inserisce il numero dei caratteri fin’ora inseriti nel campo con id esempio3 a cui faccio riferimento con $(this) perché è l’oggetto del keyup().
In particolare, per prendere il numero di caratteri, prima uso .val(), senza valori tra parentesi, che restituisce una stringa contenente il valore dell’input, successivamente uso .length che restituisce il numero di caratteri della stringa.
Quindi, se fin’ora ho scritto nell’input “prova”, la funzione .val() mi da appunto la stringa “prova” e .lenght mi da 5.
Infine, scrivo il numero dei caratteri dentro lo span con id contatore1 usando il comando .html().

Il funzionamento di .html() è analogo a .val(), l’unica differenza sta nel fatto che la seconda viene usata per i campi input, le textarea, le select e i button, mentre la prima è valida per tutti gli altri tipi di tag html.

0

Conteggio dei caratteri rimanenti

Per ottenere invece l’effetto countdown dei caratteri rimanenti in un campo input, abbiamo bisogno della stessa struttura HTML dell’esempio precedente con l’aggiunta dell’attributo maxlength=”15″ all’input, dove 15 è il numero massimo di caratteri che vogliamo far inserire.

<input id="esempio4" type="text" value="" maxlength="15"/>
<span id="contatore2" ></span>

Codice jQuery:

var max = $("#esempio4").attr("maxlength");
$("#contatore2").html(max);

$("#esempio4").keyup(function(){
    var num = $(this).val().length;
    $("#contatore2").html(max-num);
});

Prima di tutto creo una variabile globale max che corrisponde al contenuto dell’attributo maxlength dell’elemento con id esempio4, che in questo caso sarà 15.
Adesso che so qual’è il numero massimo di caratteri desiderato, lo indico all’utente scrivendolo dentro allo span con id contatore2.

Adesso, sfruttando ancora una volta la funzione .keyup(), salvo dentro alla variabile num creata al volo il numero di caratteri fin’ora scritti nell’input, come visto nell’esempio precedente.

Quindi, scrivo dentro allo span con id contatore2 il numero di caratteri ancora disponibili, calcolato come sottrazione del numero massimo con quello corrente.

Ottenere il valore del radio button selezionato

Adesso vediamo il caso in cui abbiamo una serie di input di tipo radio e al click su un qualche pulsante (tipo quello per l’invio di un email) vogliamo sapere quale radio button è stato selezionato dall’utente.

Prima di tutto, come al solito, va definita la struttura HTML che stavolta dovrà contenere vari input di tipo radio e un altro elemento tipo un link (ma può essere qualsiasi cosa) da usare come pulsante per azionare lo script.

<form id="esempio5">
  <input type="radio" name="radioTest" value="jQuery" checked="checked" />jQuery
  <input type="radio" name="radioTest" value="spacca" />spacca
  <input type="radio" name="radioTest" value="di" />di
  <input type="radio" name="radioTest" value="brutto" />brutto
  <button id="btn3" type="button">Quale ho selezionato?</button>
  <span id="result"></span>
</form>

Uno degli input dovrà avere l’attributo checked=”checked” che indica che è stato selezionato, perché è buona pratica indicare un valore predefinito quando si ha a che fare con i radio button.
Notare che ho aggiunto anche uno span con id result, utile ai soli fini dell’esempio.
Ecco il codice jQuery

$("#btn3").click(function(){
   var selezione = $("#esempio5 input:checked").val();
   $("#result").html(selezione);
});

Prima di tutto individuo l’elemento da cliccare per avviare la funzione, in questo caso si tratta di un button con id btn3.
Dopo che è stato cliccato, salvo dentro ad una variabile “selezione” il valore ( .val() ) dell’input selezionato ( input:checked ) contenuto dentro all’elemento che ha id esempio5 ( #esempio5 ).
Fatto ciò, ho il contenuto del radio button scelto dentro alla variabile e posso decidere cosa farne; in questo esempio lo mostro all’utente scrivendolo dentro allo span con id selezione.

Controllare se una checkbox è stata selezionata

Se nel nostro form abbiamo invece bisogno di controllare se una checkbox è stata selezionata o meno, possiamo fare come segue.
Codice HTML:

<form id="esempio6">
  <input type="checkbox" value="jQuery" />Controllo sulla checkbox
  <button id="btn4" type="button">La checkbox è stata selezionata?</button>
  <span id="result2"></span>
</form>

Codice jQuery:

$("#btn4").click(function(){
  if( $("#esempio6 input").is(":checked") ){
    //Cosa fare se è stato selezionato
   $("#result2").html("Certo, non lo vedi?");
  }else{
    //Altrimenti fai questo
   $("#result2").html("No");
  }

Tradotto a parole: quando faccio click sull’elemento con id btn4, se l’input che si trova dentro all’elemento con id #esempio6 possiede la pseudo-classe :checked (cioè è stato selezionato), cerca l’elemento con id #result2 e scrivi al suo interno “Certo, non lo vedi?”; in caso contrario scrivi “No”.

Ovviamente quando andrai ad utilizzare questo metodo, avrai bisogno di ben altro rispetto che scrivere delle stringhe fini a se stesse dentro a uno span, io ti ho dato solo indicazione su come fare il controllo sulla checkbox.

Notare che per indicare la checkbox ho usato come selettore $("#esempio6 input") che però è un po’ troppo generico e andrà a cercare ogni input dentro a #esempio6.
Per essere sicuri che si tratti della checkbox potresti dare a questa un id o una classe specifica e selezionarla usando $(".nomeclasse") oppure $("#nomeID")
Altrimenti potresti anche usare uno dei codidetti “Attribute Selectors” del CSS. Scrivendo $("#esempio6 input[type=checkbox]") indicherai solo gli input di tipo checkbox dentro a #esempio6.

Fine

Anche per oggi la lezione su jQuery finisce qui. Spero di essere stato d’aiuto e se avrai qualche richiesta specifica, non esitare a lasciare un commento .

Raspo

Raspo è uno degli amministratori di BitTrack. Non è abituato a descrivere se stesso e tanto meno ad esaltare le proprie imprese, per cui, per il momento, non scriverà niente di utile quì.

Leggi gli articoli di questo autore