Chapitre 9 – Valeurs et attributs

Dans un site réel, tu manipules constamment des valeurs (formulaires) et des attributs (href, src, disabled, checked, data-*…). Le point délicat : en jQuery, il existe plusieurs méthodes proches (val(), attr(), prop(), data()). Dans ce chapitre, on clarifie tout pas à pas, avec des exemples concrets.

1) Valeur d’un champ : val()

val() est la méthode standard pour lire/écrire la valeur d’un champ de formulaire : input, textarea, select.

Lire une valeur

const email = $('#email').val();
console.log(email);

Écrire une valeur

$('#email').val('test@mail.com');

Réflexe : quand tu lis un champ, convertis en string et trim : String($('#email').val()).trim().

2) Cas particuliers avec val()

Checkbox

Pour une checkbox, val() ne dit pas si elle est cochée, mais renvoie plutôt sa valeur HTML (souvent "on"). Pour savoir si elle est cochée, on utilise plutôt prop('checked') (voir plus bas).

const isChecked = $('#cgu').prop('checked'); // true/false
console.log(isChecked);

Select

const country = $('#country').val(); // valeur de l'option sélectionnée
console.log(country);

Multiple select

const values = $('#skills').val(); // tableau de valeurs
console.log(values);

3) Attribut HTML : attr()

Les attributs sont les choses écrites dans le HTML : href, src, title, alt, data-*, etc.

Lire un attribut

const url = $('a#docs').attr('href');
console.log(url);

Écrire un attribut

$('img#logo').attr('src', 'assets/logo.png');

Supprimer un attribut

$('#avatar').removeAttr('title');

attr() manipule ce qui ressemble à du “texte” dans l’HTML.

4) Propriété (état) : prop()

Certaines choses ne sont pas seulement des attributs : ce sont des états gérés par le navigateur : checked, selected, disabled, etc.

Pour ces cas, on utilise prop() (propriété).

Checkbox : checked

const checked = $('#cgu').prop('checked'); // true/false
$('#cgu').prop('checked', true);           // cocher

Désactiver un champ : disabled

$('#email').prop('disabled', true);  // désactive
$('#email').prop('disabled', false); // réactive

Option sélectionnée

const isSelected = $('#country option:eq(0)').prop('selected');

Règle simple : état vrai/faux → prop() (checked, disabled, selected).

5) attr() vs prop() : la confusion classique

Les deux sont proches, mais l’objectif est différent :

Besoin	Utilise	Exemples
Lire/écrire un attribut HTML “texte”	attr()	href, src, title, alt, data-*
Lire/écrire un état (booléen)	prop()	checked, disabled, selected

Si tu testes une checkbox avec attr('checked'), tu risques d’obtenir un résultat incohérent, car l’attribut initial ne reflète pas forcément l’état courant.

6) Les attributs data-* : data()

Les data-* servent à stocker de petites infos “métier” directement dans le HTML, sans polluer les ids/classes. Exemple : l’id d’un produit, un prix, un rôle, etc.

HTML

<button class="add" data-id="42" data-price="9.99">Ajouter</button>

Lire avec data()

$('.add').on('click', function () {
  const id = $(this).data('id');       // 42 (souvent converti en number)
  const price = $(this).data('price'); // 9.99
  console.log(id, price);
});

Écrire avec data()

$('#btn').data('state', 'loading');

data() met en cache des valeurs. Si tu modifies l’attribut HTML à la main, relis avec attr('data-id') si tu veux la valeur brute.

7) Exemple complet : formulaire + état + data-id

Exemple typique : un bouton “Ajouter au panier” porte un data-id produit. On vérifie aussi une checkbox CGU, et on désactive le bouton si besoin.

<input type="checkbox" id="cgu"> J'accepte les CGU
<button id="buy" data-id="101">Acheter</button>
<p id="message"></p>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $(function(){
    function refreshButton(){
      const ok = $('#cgu').prop('checked');
      $('#buy').prop('disabled', !ok);
    }

    refreshButton();

    $('#cgu').on('change', refreshButton);

    $('#buy').on('click', function(){
      const productId = $(this).data('id');
      $('#message').text('Achat du produit #' + productId + ' (simulation)');
    });
  });
</script>

8) Erreurs fréquentes

Erreur A : oublier trim() sur un champ

const name = String($('#name').val()).trim();
if (!name) {
  console.log('Nom requis');
}

Erreur B : utiliser attr() pour checked

// ⚠️ Pas recommandé
const checked = $('#cgu').attr('checked');

// ✅ Recommandé
const checked2 = $('#cgu').prop('checked');

Erreur C : confondre data() et attr('data-*')

const a = $('#btn').data('id');         // valeur “interprétée” / en cache
const b = $('#btn').attr('data-id');    // valeur brute (string)
console.log(a, b);

Exercice (progressif) – Lecture/écriture

Crée un input email #email et un bouton #save.
Au clic, affiche dans la console la valeur saisie (trim).
Ajoute une checkbox #newsletter et affiche son état (prop checked).
Ajoute un bouton avec data-user-id et affiche l’id via data().

Correction

<input id="email" type="email">
<label><input id="newsletter" type="checkbox"> Newsletter</label>
<button id="save">Enregistrer</button>
<button id="profile" data-user-id="77">Profil</button>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $(function(){
    $('#save').on('click', function(){
      const email = String($('#email').val()).trim();
      const news = $('#newsletter').prop('checked');
      console.log('Email:', email);
      console.log('Newsletter:', news);
    });

    $('#profile').on('click', function(){
      console.log('UserId:', $(this).data('user-id'));
    });
  });
</script>

Résumé du chapitre

val() : valeurs de formulaire (input/textarea/select)
attr() : attributs HTML “texte” (href, src, title…)
prop() : états booléens (checked, disabled, selected)
data() : lire/écrire des data-* facilement