PWEB - Latihan Javascript

 

Latihan - Javascript

Nama       : Wina Tungmiharja
NRP           : 5025201242

Kelas        : Pemrograman Web B

1. Deskripsi Latihan 

Membuat form input dengan menggunakan Javascript

2. Hasil Tugas

link website : Login Form

Source Code : Github

Penjelasan

<form id="form">

        <section class="input">

          <label for="username">Name</label> <input id="username" type="text" />

        </section>

        <section class="input">

          <label for="password">Password</label>

          <input id="password" type="password" />

        </section>

        <button id="submit" onclick="onSubmit()">Submit</button>

      </form>

disini saya membuat html element form untuk mendapatkan data input user, begitu juga denngan elemen input untuk mendapatkan hasil input dari user

document.getElementById("submit").addEventListener("click", function (event) {

  event.preventDefault();

});

kemudian pada bagian source code ini, kita menambahkan preventDefault() pada action click untuk mencegah browser melakukan reload ulang ketika button di klik

function onSubmit() {

  const username = document.getElementById("username").value;

  const password = document.getElementById("password").value;

  if (username.length <= 0) {

    alert("Username is required");

    return;

  }

  if (password.length <= 0) {

    alert("Password is required");

    return;

  }

  alert("Login successfull");

  document.getElementById("form").reset();

}

pada akhirnya, kita menambahkan fuction onSUbmit(), fungsi ini pada dasarnya akan mengambil hasil input username dan password yang telah diisi.

Jika input username dan password tersebut belum ada, (memiliki panjang karakter kurang dari 0) maka user akan di alert bahwa input tersebut belum diisi