Metoda val

Metoda val pozwala pobierać i zmieniać aktualną wartość elementu.

Składnia

W ten sposób możemy pobrać aktualną wartość pierwszego elementu w zestawie:

javascript$(selektor).val();

Metoda val jest głównie używana do pobierania wartości elementów formularza, takich jak: input, select i textarea. Jeśli zostanie wywołana na pustej kolekcji, zwróci undefined. Podczas pracy z select z ustawionym atrybutem multiple, metoda zwróci tablicę wartości każdego wybranego option. Jeśli żaden z nich nie jest wybrany, zwrócona zostanie pusta tablica. W ten sposób możemy ustawić wartość każdego elementu w zestawie. Jako parametr można przekazać ciąg znaków, tablicę lub liczbę:

javascript$(selektor).val(wartość);

Zastosowanie funkcji do każdego elementu w zestawie. Funkcja przyjmuje jako pierwszy parametr aktualny numer w zestawie, a jako drugi - jego aktualną wartość:

javascript$(selektor).val(nazwa atrybutu, function(numer w zestawie, aktualna wartość));

Przykład

W następnym przykładzie pobierzmy wartości wprowadzane do inputa i wypiszmy je poniżej w akapicie:

html<input type="text" value="text">
<p></p>

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

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

Przykład

A teraz za pomocą metody val będziemy zapisywać wartości przycisków, które będziemy klikać, w znajdującym się poniżej inputcie:

html<div>
  <button>one</button>
  <button>two</button>
  <button>three</button>
  <button>four</button>
</div>
<input type="text" value="click buttons">

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

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

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

Zobacz też