Val-metodi

Metodi val mahdollistaa elementin nykyisen arvon hakemisen ja muuttamisen.

Syntaksi

Näin voimme hakea nykyisen arvon ensimmäiseltä elementiltä joukossa:

javascript$(valitsin).val();

Metodia val käytetään pääasiassa lomakkeen elementtien arvojen hakemiseen, kuten: input, select ja textarea. Jos sitä kutsutaan tyhjälle kokoelmalle, se palauttaa undefined. Kun työskennellään select-elementin kanssa, jossa on asetettu multiple-attribuutti, metodi palauttaa taulukon kunkin valitun option-elementin arvoista. Jos mitään niistä ei ole valittu, palautetaan tyhjä taulukko. Näin voimme asettaa jokaisen elementin arvon joukossa. Parametrina voidaan lähettää merkkijono, taulukko tai numero:

javascript$(valitsin).val(arvo);

Funktion soveltaminen jokaiseen elementtiin joukossa. Funktio ottaa ensimmäisenä parametrina nykyisen indeksin joukossa ja toisena parametrina sen nykyisen arvon:

javascript$(valitsin).val(attribuutin nimi, function(indeksi joukossa, nykyinen arvo));

Esimerkki

Seuraavassa esimerkissä haetaan syöttökenttään kirjoitetut arvot ja näytetään ne alla olevassa kappaleessa:

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();

Esimerkki

Nyt val-metodin avulla tallennamme painettujen nappien arvot alla olevaan syöttökenttään:

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);
});

Katso myös