jQuery: eventi sui form

Facciamo un breve excursus sugli eventi legati ai form: Per l’occasione faremo il bind di diversi eventi e riporteremo in un placeholder gli accadimenti della pagina.

Partiamo da un semplice html contenente un form e appunto un paragrafo che funzionerà da placeholder:

<form action="#" method="post">
<label for="primo_campo">Primo campo</label>
<input type="text" name="primo_campo"  value="" id="primo_campo"><br>
<label for="secondo_campo">Secondo campo</label>
<input type="text" name="secondo_campo"   value="" id="secondo_campo"><br>
<label for="terzo_campo">Terzo campo</label>
<input type="text" name="terzo_campo" value="" id="terzo_campo"><br>
<label for="quarto_campo">Quarto campo</label>
<input type="text" name="quarto_campo"   value="" id="quarto_campo"><br>
<input type="submit" name="submit" value="Submit" id="submit">
</form>
<p id="placeholder"></p>

Procediamo quindo ad associare gli eventi al document.ready e quando si scateneremo andremo a registrare nella pagina l’accaduto, l’aspetto interessante sta nella specificità degli eventi legati al form:

$(document).ready(function() {
$('input').bind('blur change focus select submit', function(event) {
$('#placeholder').append('target = ' +
event.target.getAttribute('id') + ' ' +
'type = ' + event.type + ' <br/>');
});

});

L’esempio