A val metódus

A val metódus lehetővé teszi elemek aktuális értékének lekérését és módosítását.

Szintaxis

Így kérhetjük le a halmaz első elemének aktuális értékét:

javascript$(selector).val();

A val metódust főleg űrlapelemek értékeinek lekérésére használják, mint például: input, select és textarea. Ha egy üres gyűjteményen hívjuk meg, akkor undefined értéket ad vissza. A multiple attribútummal beállított select elemek esetén a metódus minden kiválasztott option értékéből álló tömböt ad vissza. Ha egyik sem van kiválasztva, akkor egy üres tömböt kapunk. Így állíthatjuk be a halmaz minden elemének értékét. Paraméterként átadhatunk sztringet, tömböt vagy számot:

javascript$(selector).val(érték);

Függvény alkalmazása a halmaz minden elemére. A függvény első paramétere a halmazbeli aktuális index, a második pedig az elem aktuális értéke:

javascript$(selector).val(attribútum neve, function(index, aktuális érték));

Példa

A következő példában kérjük le az input mezőbe beírt értékeket, és jelenítsük meg azokat alább egy bekezdésben:

html<input type="text" value="szöveg">
<p></p>

cssp {
  color: green;
  margin: 8px;
}

javascript$('input').keyup(function() {
  let value = $(this).val();
  $('p').text(value);
}).keyup();

Példa

Most pedig a val metódus segítségével a megnyomott gombok értékeit írjuk az alatta lévő input mezőbe:

html<div>
  <button>one</button>
  <button>two</button>
  <button>three</button>
  <button>four</button>
</div>
<input type="text" value="kattints a gombokra">

cssbutton {
  margin: 4px;
  cursor: pointer;
}

input {
  margin: 4px;
  color: green;
}

javascript$('button').click(function() {
  let text = $(this).text();
  $('input').val(text);
});

Lásd még