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:

<form action="" method="post">

<table class="style1">
<tbody>
<tr>
<td class="style2">
Nome</td>
<td>
<input id="FirstName" type="text" /></td>
</tr>
<tr>
<td class="style2">
Cognome</td>
<td>
<input id="LastName" type="text" /></td>
</tr>
<tr>
<td class="style2">
Campo di testo disabilitato</td>
<td>
<input id="Text1" type="text" disabled="disabled"/></td>
</tr>
<tr>
<td class="style2">
Sesso</td>
<td>
<input id="Male" type="radio" checked="checked"/>M<input id="Female" type="radio" />F</td>
</tr>
<tr>
<td class="style2">
A cosa si &egrave; interessati?</td>
<td>
<input id="Checkbox1" type="checkbox" checked="checked"/><label for="Checkbox1">Foto</label><br />
<input id="Checkbox2" type="checkbox" /><label for="Checkbox1">Calcio</label><br />
<input id="Checkbox3" type="checkbox" checked="checked"/><label for="Checkbox1">Regali</label><br />
<input id="Checkbox4" type="checkbox" /><label for="Checkbox1">Cellulari</label></td>
</tr>
<tr>
<td class="style2">
Commenti:</td>
<td>
<textarea id="Comments" cols="40" name="S1" rows="5"></textarea></td>
</tr>
<tr>
<td class="style2">
Opzionale carica file</td>
<td>
<input id="File1" type="file" /></td>
</tr>
<tr>
<td class="style2">
&nbsp;</td>
<td>
&nbsp;</td>
</tr>
<tr>
<td class="style2">
&nbsp;</td>
<td>
<input id="Submit1" type="submit" value="submit" /> <input id="Reset1"
type="reset" value="reset" /></td>
</tr>
</tbody></table>

</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.

$("form :input").before("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”.

$("form :text").before("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:

$("form :text:enabled").before("Testo: ");

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:

$("form :text:disabled").before("Testo: ");

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.

$("form :checked").before("Selezionato: ");

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:

$("form :checkbox:checked").before("Selezionato: ");