Val-metodi
Metodi val mahdollistaa elementin nykyisen arvon
hakemisen ja muuttamisen.
Syntaksi
Näin voimme hakea nykyisen arvon ensimmäiseltä elementiltä joukossa:
$(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:
$(valitsin).val(arvo);
Funktion soveltaminen jokaiseen elementtiin joukossa. Funktio ottaa ensimmäisenä parametrina nykyisen indeksin joukossa ja toisena parametrina sen nykyisen arvon:
$(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:
<input type="text" value="text">
<p></p>
p {
color: green;
margin: 8px;
}
$('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:
<div>
<button>one</button>
<button>two</button>
<button>three</button>
<button>four</button>
</div>
<input type="text" value="click buttons">
button {
margin: 4px;
cursor: pointer;
}
input {
margin: 4px;
color: green;
}
$('button').click(function() {
let text = $(this).text();
$('input').val(text);
});
