Johdatus ohjelmointiin

Sorakuilu

DOM demo 3, lomakkeet

Kohta A

Laadi laskuri, joka laskee pallon tilavuuden:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pallon tilavuus
</head>
<body>

<p>Anna pallon säde, saat tilavuuden.

<form action="" method="post" id="MyForm"> <label for="radius">Säde</label> <input type="text" name="radius" id="radius" required> <label for="volume">Tilavuus</label> <input type="text" name="volume" id="volume"> <input type="submit" value="Calculate" id="submit"> </form> </body> </html>

Kohta B

Laadi ohjelma, joka luo taulukon ja antaa sille arvoja.

Se kysyy aluksi alertilla, montako riviä ja saraketta luodaan.

Kohta C

Laajenna seuraavaa materiaalissa esitettyä lomaketta:

<!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>

Kohta D

Valmiin lomakkeen käsittely. Nykyään lomakkeen käsittelyä tehdään HTML-tarkistuksina, mutta on hyvä muistaa, että kaikki selainohjelmat eivät tunnista html-elementtejä samalla tavalla. Katsomme siis molemmat...

Tee seuraava lomake:

Luo lomakkeelle lomakkeenkäsittelijä checkit(), joka tarkistaa (onsubmit), että käyttäjä on kirjoittanut jotain kaikkiin neljään telkstikenttään ja kerää nimen ja arvon kaikista valituista (selected/checked) ja tulostaa ne alla olevaan textareaan

Ja sen jälkeen: tarkistetaan HTML5-version antamat mahdollisuudet kenttien tarkistamiseen...

Hyviä ideoita the-art-of-web-sivustolta.


<form name="example" action="#" onsubmit="checkit(); return false">


Nimi<br>
<input name="name" type="text"><br>

Osoite<br>
<input name="address" type="text"><br>


Postitoimipaikka<br>
<input name="City" type="text"><br>


E-mail<br>
<input name="E-mail" type="email"><br>


Miksi haluat opiskella JavaScriptiä?<br>
<input type="radio" name="why" value="Dunno">Emmäätiiä<br>
<input type="radio" name="why" value="Boss">Pomo käski<br>
<input type="radio" name="why" value="Interest">Asia kiinnostaa<br>
<input type="radio" name="why" value="Useful">Voi osoittautua hyödylliseksi<br>


Kuinka päädyit tälle sivulle?<br>
<select name="refer">
<option value='' selected="selected">--- Valitse ---</option>
<option value="random">Löysin sattumalta</option>
<option value="wdf">WDF:n kautta</option>
<option value="NetlinQ">NetlinQ:n kautta</option>
<option value="searchengine">Hakukoneella</option>
</select>
<br>


Haluan lisätietoja<br>
<input type="checkbox" name="oranges">appelsiineista<br>
<input type="checkbox" name="potatoes">perunoista<br>
<input type="checkbox" name="tomatoes">tomaateista<br>
<input type="checkbox" name="blue whales">valaista<br>
<input type="submit" value="Suorita"><br>
<input type="reset" /><br>


<textarea cols="30" rows="7" name="output">Kun klikkaat 'Suorita' käyttäjän syöte tulee tähän kenttään</textarea><br>
</form>


Lähdekoodi

<h2>Kohta</h2><!DOCTYPE html>
<html>
<head>
<title>DOM demo 3</title>
<meta charset="UTF-8">
<script>

function voluumi_laskin()
{
    var volume;
    var radius = document.getElementById('radius').value;
    radius = Math.abs(radius);
    volume = (4/3) * Math.PI * Math.pow(radius, 3);
    volume = volume.toFixed(4);
    document.getElementById('volume').value = volume;
    return false;
}

function pienifunktio()
{
    var teksti = document.getElementById("nimi").value;
    alert(teksti);
}

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
    y.setAttribute("id", "nimi");
    document.getElementById("myForm").appendChild(y); //lisätään input lomakkeen lapseksi

    var z =document.createElement("INPUT");
    z.setAttribute("type", "button");
    z.setAttribute("value", "Lähetä");
    z.setAttribute("onclick", "pienifunktio()");
    document.getElementById("myForm").appendChild(z);
 }

function checkit()
{
    var textstring =''; //Kerää kaikki tieto tähän muuttujaan, sijoitetaan lopuksi textareaan

    // Ensiksi katsotaan, että kaikissa tekstikentissä (4 ensimmäistä) on arvo

    for(let i=0; i < 4; i++) {
        var box = document.forms['example'].elements[i]; //muuttuja väliaikainen, siihen pannaan aina kierroksen tekstikenttä (siis 4 ensimmäistä)
        if(!box.value) {
            alert('Et ole täyttänyt kohtaa '+ box.name + '!');
            box.focus(); // siirtää kursorin puuttuvan kohdalle
            return;
        }
        textstring += box.name + ': ' + box.value + '\n';   // += lisää vanhan tekstin perään uuden \n lisää rivinvaihdon
    }

    // haetaan arvot radionapeista 'why'
    let user_input = '';

    for(i = 0; i < document.forms['example'].why.length; i++) { //silmukka menee kaikki napit läpi
        if( document.forms['example'].why[i].checked) {
            user_input =  document.forms['example'].why[i].value;
        }
    }

    textstring += 'Miksi-kenttä: ' + user_input + '\n';

  // haetaan arvo valintaluettelosta (select - option)
  user_input = document.example.refer.options[document.example.refer.selectedIndex].value;
  // example on lomake, refer on select-elementti, options referin vaihtoehdot, selected se vaihtoehto, joka on valittu, value sen arvo

    textstring += 'Kuinka-kenttä: ' + user_input + '\n';

//Katsotaan checkboxien sisältö
    textstring += 'Lisätietoja: ';

    for(i = 9; i < 13; i++) {
        if(document.example.elements[i].checked) {
            textstring += document.example.elements[i].name + ' ';
        }
    }




    document.forms['example'].output.value = textstring; // lisätään textareaan kerätty tekstimuuttuja
}



</script>
</head>

<body>

<h1>Lomakkeita</h1>
<h2>Kohta 1</h2>
<p>Laadi laskuri, joka laskee pallon tilavuuden:</p>
<p>Anna pallon säde, saat tilavuuden.

    <form action="" method="post" id="MyForm">
    <label for="radius">Säde</label>
    <input type="text" name="radius" id="radius" required>
    <label for="volume">Tilavuus</label>
    <input type="text" name="volume" id="volume">
    <input type="submit" value="Laske" id="submit">    
    </form>





<h2>Lomakkeen validointi</h2>

<form name="example" action="#" onsubmit="checkit(); return false">


    * Nimi<br>
    <input type="text" name="name" required><br>
    
    * Osoite<br>
    <input type ="text" name="address"><br>
    
    
    * Postitoimipaikka<br>
    <input type ="text" name="City"><br>
    
    
    * E-mail<br>
    <input type="email" name="E-mail"><br>
    
    
    Miksi haluat opiskella JavaScriptiä?<br>
    <input type="radio" name="why" value="Dunno">Emmäätiiä<br>
    <input type="radio" name="why" value="Boss">Pomo käski<br>
    <input type="radio" name="why" value="Interest">Asia kiinnostaa<br>
    <input type="radio" name="why" value="Useful">Voi osoittautua hyödylliseksi<br>
    
    
    Kuinka päädyit tälle sivulle?<br>
    <select name="refer">
        <option value='' selected="selected">--- Valitse ---</option>
        <option value="random">Löysin sattumalta</option>
        <option value="wdf">WDF:n kautta</option>
        <option value="NetlinQ">NetlinQ:n kautta</option>
        <option value="searchengine">Hakukoneella</option>
    </select>
    <br>
    
    
    Haluan lisätietoja<br>
    <input type="checkbox" name="oranges">appelsiineista<br>
    <input type="checkbox" name="potatoes">perunoista<br>
    <input type="checkbox" name="tomatoes">tomaateista<br>
    <input type="checkbox" name="blue whales">valaista<br>

    <input type="submit" value="Suorita"><br>
    <input type="reset" value="Tyhjennä"><br>
    
    
    <textarea cols="30" rows="7" name="output">Kun klikkaat 'Suorita' käyttäjän syöte tulee tähän kenttään</textarea><br>
    </form>
    








<script>
window.onload=myFunction(),document.getElementById('MyForm').onsubmit = voluumi_laskin;
</script>

</body>
</html>