Sisältö

Osa 9. Lomakkeet, listat ja DOM

Jos elementillä on lapsia

Usein luetaan elementtejä, joilla on luonnollisesti olemassa lapsia (esim. table, ul, li, form).

Elementti voidaan tällöin sijoittaa muuttujaan ja lapsia voidaan kutsua samaan tapaan kuin taulukoiden elementtejä kutsutaan.

Mahdollisia vaihtoehtoja:

Jos jokaisella elementillä on oma id, niitä voidaan kutsua suoraan id:n avulla
```
document.getElementById("kutsuttava").innerHTML
```

Kutsutaan "äitielementin" avulla, jolloin saadaan lapsielementit taulukkoon: seuraavassa luetaan yksi elementti

    
var x = document.getElementById("myForm"); //äitielementti on x
document.getElementById("demo").innerHTML = x["fname"].value //lomakkeen kenttä, jonka name="fname"

Jos haet useamman samanlaisen lapsielementin, niitä voidaan käsitellä myös silmukalla

    
   var items = document.getElementsByTagName('li'); //haetaan kaikki lomakkeen listaelementit, niistä tulee taulukko eli array()
   for (var i = 0; i < items.length; i++) {
      items[i].className = 'listitem'; //vaihdetaan luokkaa (css)
   }

Lista

Esimerkki: ohjelma lukee listan elementit yksitewllen ja antaa niille ensin sisällön. Sen jälkeen se muuttaa silmukalla kaikkien css-luokan.

    
<h1>Minä</h1>
 
  <ul>
    <li>Lempinimi: </span>
    <li>Suosikit:  </span>
    <li>Kotipaikka: </span>
   </ul>
  
  <script>
   document.body.style.fontFamily = 'Arial, sans-serif';
   document.getElementById('nickname').innerHTML = 'Leevi Kettu';
   document.getElementById('favorites').innerHTML = '35';
   document.getElementById('hometown').innerHTML = 'Roi City';
   var items = document.getElementsByTagName('li');
   
   for (var i = 0; i < items.length; i++) {
      items[i].className = 'listitem';
   }
 </script>

Lomake

Lomakkeella saadaan käyttäjän syötteet (input) www-järjestelmässä.

JavaScriptin DOM-metodit mahdollistavat lomakkeen lukemisen, muokkaamisen ja täyttämisen.

Lomake on olemassa

Kun lomake on olemassa html-merkkauksessa, saat luettua sen tietoja muuttujaan:


var x = document.getElementById("myForm");

<form id="myForm">
First name: 	<input type="text" name="fname" value="Donald"> <br>
Last name: 	<input type="text" name="lname" value="Duck"> <br>
<input type="submit" value="Submit">
</form>


<script>
function haeArvot() 
{
  var x = document.getElementById("myForm");
  document.getElementById("demo").innerHTML = x["fname"].value +" "+ x["lname"].value;
}
</script>

<p id="demo">	</p>

<button onclick="haeArvot()">Hae lomakkeen arvot </button>
</script>

Lomaketta ei ole dokumentissa, luodaan uusi

Lomakemuuttujan luominen

    
var x = document.createElement("FORM");

Lomakkeen ja inputin luova funktio

    
function myFunction() 
{
  var x = document.createElement("FORM");
  x.setAttribute("id", "myForm");
  document.body.appendChild(x);

  var y = document.createElement("INPUT");
  y.setAttribute("type", "text");
  y.setAttribute("value", "Donald");
  document.getElementById("myForm").appendChild(y);
}

Koko HTML-sivu, joka kutsuu funktiota

    
<!DOCTYPE html>
<html>
<head>

  <title>DOMdemo</title>
  
  <meta charset="UTF-8">
  
  <script>
  function myFunction() 
  {
    var x = document.createElement("FORM"); //luodaan lomake
    x.setAttribute("id", "myForm"); //annetaan lomakkeelle id
    document.body.appendChild(x); //lisätään lomake dokumentin lapseksi

    var y = document.createElement("INPUT");  //luodaan uusi input
    y.setAttribute("type", "text"); // annetaan inputille tyyppi
    y.setAttribute("value", "Donald"); //annetaan inputille arvo
    document.getElementById("myForm").appendChild(y); //lisätään input lomakkeen lapseksi
  }
  </script>

</head>

<body onload="myFunction()">
</body>

</html>