24/25.3 WEB programiranje 3

Tag za html formu obično počinje kao <form action="" method="">, mada dosad ova dva atributa nismo koristili, a trebaće nam! 

U nastavku je jedan primer html forme:

    <form id="forma1">
        <label for="ime">Name:</label>
        <input type="text" id="ime" name="ime">
        <label for="godine">Godine:</label>
        <input type="number" id="godine" name="godine">
        <button type="submit">Pošalji</button>
    </form>

Kada se klikne na button tipa submit u HTML formi, dešava se sledeće:

1. Sakupljanje podataka iz polja forme
   Podaci iz svih input elemenata unutar forme (kao što su tekstualna polja, čekboksovi, radio dugmad, padajući meniji, itd.) se prikupljaju. Ti podaci su predstavljeni kao parovi ključ-vrednost. Ključ bi bio naziv input elementa (atribut name), a vrednost bi bila ono što je uneto u polje (value).
   

2. Slanje podataka na server
   Ako je forma povezana sa serverom (atribut action postavljen na neki URL), podaci se šalju ka tom URL-u koristeći metod naveden u atributu method:

   • GET: Podaci se šalju kao deo URL-a (query string), npr. example.com/form?name=John&age=30.
   • POST: Podaci se šalju u telu HTTP zahteva, što je bezbednije za veće i oseljivije podatke.

3. Osvežavanje stranice (default behavior)
   Browser osvežava trenutnu stranicu ili preusmerava korisnika na stranicu navedenu u atributu action. 

Ako atribut action nije naveden u tagu form, browser će koristiti podrazumevanu vrednost, koja je URL trenutne stranice. To znači da će podaci iz forme biti poslati na istu stranicu. Podrazumevani metod slanja je GET, što znači da se parovi name-value vide u URL-u stranice. Nakon toga je podrazumevano da se očiste sva polja u koja je nešto uneseno.

JavaScript preuzimanje kontrole

Zasad još ne radimo programiranje na strani servera, niti preuzimanje podataka sa strane servera. Za to bi nam trebao barem PHP.

Međutim, ... JavaScript može direktno pristupiti i manipulisati podacima iz forme u realnom vremenu, bez potrebe za slanjem podataka serveru. 

Kada se klikne na button tipa submit podaci iz HTML forme mogu da se obrade lokalno, pomoću JavaScript-a. Ovo se postiže presretanjem događaja submit i sprečavanjem njegovog podrazumevanog ponašanja (slanja forme na server) koristeći metodu event.preventDefault(). 

Kako to funkcioniše?

1. JavaScript presreće događaj slanja forme.

2. Sprečava se osvežavanje stranice i slanje podataka na server.

3. Podaci iz forme se čitaju i obrađuju lokalno
   Na primer, vrednosti polja mogu se dobiti pomoću document.getElementById ili document.querySelector.
   Podaci se mogu prikazati na istoj stranici, sačuvati u lokalnom skladištu (LocalStorage ili SessionStorage), ili koristiti za druge funkcije.

Zadatak:

// Presretanje događaja submit
document.getElementById("forma1").addEventListener("submit", function(event) {
    event.preventDefault(); // Sprečavanje podrazumevanog ponašanja

    // Dohvatanje vrednosti unetih u formu
    const ime = document.getElementById("ime").value;
    const god = document.getElementById("godine").value;

    // Prikaz podataka na stranici
    const output = document.getElementById("output");
    output.textContent = `Ime: ${ime}, Godine: ${god}`;
});

Šta se dešava u ovom primeru?

1. Kada korisnik klikne na Pošalji, događaj submit se presreće.
2. event.preventDefault() sprečava slanje forme i osvežavanje stranice.
3. JavaScript čita vrednosti iz polja forme (ime i godine).
4. Podaci se obrađuju i prikazuju u elementu <p id="output">.

Dodatni materijal (opciono): Kako možemo čuvati podatke u memoriji web browsera

LocalStorage i SessionStorage su mehanizmi za skladištenje podataka na klijentskoj strani, ugrađen u web browser, koji omogućava čuvanje podataka u obliku parova ključ-vrednost. Ovo je posebno korisno za aplikacije koje žele da zapamte podatke lokalno, bez potrebe za serverom. Imamo dve opcije:

• localStorage
  Podaci se čuvaju trajno i ostaju dostupni čak i nakon što korisnik zatvori browser ili ponovo pokrene računar. Podaci su dostupni na svim karticama, prozorima i sesijama koje koriste isti domen. Podaci ostaju sve dok ih eksplicitno ne obrišete ili dok korisnik ne obriše keš browsera.
  

• sessionStorage
  Podaci se čuvaju samo tokom trajanja sesije browsera. Podaci su dostupni samo unutar trenutne kartice ili prozora gde su kreirani. Kada korisnik zatvori prozor ili karticu browsera, podaci se brišu.

I LocalStorage i SessionStorage koriste iste metode za rad sa podacima:

• Dodavanje/Ažuriranje podataka: setItem('ključ', 'vrednost');
• Čitanje podataka: getItem('ključ');
• Brisanje pojedinačnog podatka: removeItem('ključ');
• Brisanje svih podataka: clear();

document.getElementById("userForm").addEventListener("submit", function(event) {
    event.preventDefault();

    const ime = document.getElementById("ime").value;
    const god = document.getElementById("godine").value;

    // Čuvanje podataka u LocalStorage
    localStorage.setItem("ime", ime);
    localStorage.setItem("godine", god);

    // Prikazivanje poruke
    alert("Podaci su sačuvani lokalno!");
});

Pogledajte, kroz Inspect, gde sve vidite ova dva para podataka: na toj stranici, na drugom tabu, ..., kada zatvorite web browser, pa ponovo otvorite, pa na praznoj web stranici, ...

Kao vežbu to isti uraditi sa sessionStorage, ...

Da li ste primetili razliku?

Na kraju, ne zaboravite da očistite sve parove koji su ostali u web browseru ....