Επιλογέας input
Ο επιλογέας :input επιλέγει στοιχεία ελέγχου
φόρμας - πεδία εισαγωγής, περιοχές κειμένου, αναπτυσσόμενες λίστες και
κουμπιά. Δείτε τις ετικέτες:
input,
textarea,
button,
select.
Εφόσον το :input δεν ανήκει στις προδιαγραφές CSS,
για βελτίωση της απόδοσης σε σύγχρονα
προγράμματα περιήγησης είναι καλύτερα στην αρχή να φιλτράρετε τα στοιχεία με
χρήση καθαρού css-επιλογέα, και στη συνέχεια
να εφαρμόσετε .filter(':input').
Σύνταξη
Έτσι επιλέγουμε τα στοιχεία ελέγχου φόρμας:
$(':input');
Παράδειγμα
Ας, σύμφωνα με την παραπάνω θεωρία,
επιλέξουμε όλα τα στοιχεία ελέγχου φόρμας και εμφανίσουμε
στην κονσόλα τον αριθμό τους, με τη βοήθεια της ιδιότητας
length. Θα
δούμε ότι εκεί περιλαμβάνονται όλες οι 13 ετικέτες:
<form>
<input type="button" value="button">
<input type="checkbox">
<input type="file">
<input type="hidden">
<input type="image">
<input type="password">
<input type="radio">
<input type="reset">
<input type="submit">
<input type="text">
<select>
<option>option</option>
</select>
<textarea></textarea>
<button>button</button>
</form>
textarea {
height: 25px;
}
let allInputs = $(':input');
console.log('Tags amount: ' + allInputs.length);
$('form').submit(function(event) {
event.preventDefault(); // αποτρέπει την αποστολή της φόρμας
});
