buzzoole code

Selettori per form e filtri – jQuery


Oggi vediamo come jQuery si rileva utile quando ci troviamo di fronte a dei form. Per prima cosa come al solito andiamo a vedere quali sono i selettori che jQuery ci mette a disposizione.

Selettore

Tipologia d’uso

:input Trova le aree di input, aree di testo e bottoni.
:text Trova tutti gli elementi di tipo testo.
:password Trova tutti i campi password.
:radio Trova tutti gli elementi bottone radio.
:checkbox Trova tutti gli elementi di tipo checkbox .
:submit Trova tutti gli elementi per l’invio di contenuti “submit”.
:reset Trova tutti gli elementi per il reset del form.
:image Trova tutti gli elementi di tipo immagine.
:button Trova tutti gli elementi di tipo bottone.
:file Trova tutti gli elementi per l’invio di file.

oltre quelli che abbiamo appena visto, ci sono dei filtrei che vanno più nello specifico, perché permettono di trovare gli elementi che sono stati selezionati, spuntati o abilitati. Vediamoli.

Selettore

Tipologia d’uso

:enabled Prende tutti gli elementi del form che risultano essere abilitati.
:disabled Prende tutti gli elementi del form che risultano essere disabilitati.
:cheked Prende tutti gli elementi del form spuntati, come bottoni radio e check box.
:selected Prende tutti gli elementi del form che risultano selezionati.

All’interno nella nostra pagina web di esempio, dobbiamo quindi andare a mettere un form:

A questo punto possiamo andare a fare i nostri primi esempi utilizzando jQuery. Innanzitutto vediamo come agisce il selettore delle aree di input. In questo nostro primo esempio andiamo ad inserire la parola “Input” prima di ogni elemento del form di tipo input. Utilizziamo perciò il primo selettore che abbiamo visto: :input.

possiamo andare a provare qualcosa di diverso, e selezionare soltanto gli elementi testuali. Nel nostro esempio andremo ad inserire di fronte ad ogni elementi di tipo testo la parola “testo”.

come si vede dall’esempio, all’interno del nostro form sono presenti sia elementi di testo abilitati, come i campi nome e cognome, ed un campo di testo disabilitato. Se avete effettuato correttamente l’esempio di prima, vedete come la parola testo compare anche di fronte al campo “campo di testo disabilitato”. Supponiamo che vogliamo selezionare soltanto gli elementi abilitati. Torna utile in questo caso il primo dei filtri che abbiamo visto nella secondo gruppo: enabled. Dovremo quindi andare a scrivere:

in questo caso è come se andiamo dire a jQuery: seleziona tutti gli elementi di testo che sono abilitati.
ovviamente avremmo anche potuto fare il contrario, ovvero selezionare soltanto gli elementi disabilitati di tipo testo. Il codice sarebbe risultato di questo tipo:

con il prossimo esempio vedremo come jQuery lavora con dei campi di selezione come i bottoni di tipo radio e checkbox. All’interno del form sono presenti degli elementi selezionati di default: si tratta del bottone radio “M”, e delle checkbox “foto” e “regali”. In una maniera molto semplice andiamo ad inserire il testo “selezionato” prima degli elementi che sono per l’appunto selezionati.

Possiamo filtrare in maniera molto semplice ad esempio gli elementi di tipo checkbox che risultano essere selezionati. Per farlo sarà sufficiente anteporre al filtro :checked il tipo di elemento che ci interessa, nel nostro caso una :checkbox. Andremo a scrivere quindi:

Questo Blog è Indipendente e Supportato Solamente dai suoi Lettori.
Se vuoi sostenerlo, Condivi il Post sui Social Network:
Aggiungi il nostro sito alla Whitelist di Adblock Plus
e magari Fai Anche un Acquisto su Amazon partendo da Qui
(a te non costa nulla!).