liste d'auteurs avec ajout et compteur

by ydelmas

HTML

<form action="http://azrael.sha.univ-poitiers.fr/~ydelmas/2012-m2-php/info-max.php" target="_blank">
    <div>Titre: <input name="titre"/></div>
    <div id="auteurs">
        <div><label>Auteur</label>&nbsp;: <input name="auteur[]" /></div>
    </div>
    <div>
        <button type="button" id="dupAuteur">ajouter
            auteur</button>
        <button type="button" id="delAuteur">supprimer
            dernier auteur</button>
        <button type="submit">envoyer</button>
    </div>
</form>

CSS

form { border: 1px dashed red; padding: 5px; }
div { border: 1px dashed blue; padding: 5px; }
#auteurs > :not(:first-child):last-child { background: #0F0; }

/* ce qui suit ajoute un compteur des champs auteurs */
#auteurs { counter-reset: auteur; }
#auteurs label::after {
    counter-increment: auteur;
    content: " " counter(auteur);
}

JavaScript

$('#dupAuteur').click(function () {
    var nouvelAuteur = $('#auteurs > :first-child').clone();
    nouvelAuteur.find('input').val('');
    $('#auteurs').append( nouvelAuteur );
});
$('#delAuteur').click(function () {
    $('#auteurs > :not(:first-child):last-child').remove();
});