Sign in Subscribe
Javascript

Meminta Input Pengguna dengan Prompt Window yang Efektif

Meminta Input Pengguna dengan Prompt Window yang Efektif
Photo by Edho Pratama / Unsplash

Dalam pengembangan web, sering kali kita perlu meminta input dari pengguna dengan cara yang cepat dan sederhana. Salah satu metode paling mudah untuk melakukannya adalah dengan menggunakan window.prompt() dalam JavaScript. Prompt window memungkinkan kita menampilkan pop-up yang berisi kolom input di mana pengguna dapat memasukkan data yang dibutuhkan.

Metode ini sering digunakan untuk mengambil nama pengguna, meminta konfirmasi sederhana, atau mendapatkan input langsung dari user tanpa perlu membuat form khusus.

Artikel ini akan membahas cara menggunakan prompt window secara efektif, kelebihan dan keterbatasannya, serta contoh implementasi yang optimal dalam berbagai situasi.

Cara Menggunakan window.prompt()

Fungsi window.prompt() memungkinkan kita menampilkan pop-up dialog dengan pesan dan kolom input di mana pengguna bisa memasukkan teks.

Sintaks Dasar

let userInput = prompt("Masukkan nama Anda:");

Kode di atas akan menampilkan kotak dialog dengan teks "Masukkan nama Anda:" serta kolom input untuk mengetikkan data.

Jika pengguna memasukkan teks dan menekan OK, teks tersebut akan disimpan dalam variabel userInput. Jika mereka menekan Cancel, maka userInput akan bernilai null.

Contoh Implementasi prompt()

1. Meminta Nama Pengguna dan Menampilkannya

<button onclick="mintaNama()">Masukkan Nama</button>
<p id="output"></p>

<script>
    function mintaNama() {
        let nama = prompt("Siapa nama Anda?");
        if (nama) {
            document.getElementById("output").textContent = "Halo, " + nama + "!";
        } else {
            document.getElementById("output").textContent = "Anda tidak memasukkan nama.";
        }
    }
</script>

Ketika tombol diklik, prompt akan muncul dan meminta pengguna memasukkan nama mereka. Hasilnya akan ditampilkan di halaman.

2. Meminta Konfirmasi dengan prompt()

Kita bisa menggunakan prompt untuk meminta konfirmasi dengan jawaban kustom dari pengguna.

let jawaban = prompt("Apakah Anda ingin melanjutkan? (ya/tidak)");
if (jawaban.toLowerCase() === "ya") {
    console.log("Pengguna memilih untuk melanjutkan.");
} else {
    console.log("Pengguna membatalkan aksi.");
}

Jika pengguna mengetikkan "ya", maka aksi akan dilanjutkan, sedangkan jika mereka mengetikkan "tidak", aksi akan dibatalkan.

3. Menggunakan Prompt untuk Menghitung Perhitungan Sederhana

let angka1 = prompt("Masukkan angka pertama:");
let angka2 = prompt("Masukkan angka kedua:");
if (angka1 && angka2) {
    let hasil = parseFloat(angka1) + parseFloat(angka2);
    alert("Hasil penjumlahan: " + hasil);
} else {
    alert("Mohon masukkan kedua angka.");
}

Kode ini meminta pengguna memasukkan dua angka, kemudian menjumlahkannya dan menampilkan hasilnya dalam pop-up.

Kelebihan dan Kekurangan prompt()

✅ Kelebihan:

  • Cepat dan sederhana – Tidak perlu membuat elemen HTML tambahan.
  • Built-in di browser – Bisa langsung digunakan tanpa library tambahan.
  • Interaktif – Mengizinkan pengguna memberikan input dengan cepat.

❌ Kekurangan:

  • Menghentikan eksekusi kode – Pop-up dialog akan menunda jalannya script sampai pengguna memberikan respons.
  • Kurang fleksibel – Tidak bisa dikustomisasi secara estetika seperti form HTML.
  • Bisa diblokir oleh browser – Beberapa browser modern memiliki fitur untuk memblokir pop-up seperti prompt.

Alternatif prompt() yang Lebih Modern

Jika ingin pengalaman pengguna yang lebih baik, sebaiknya gunakan form HTML biasa atau dialog pop-up modern seperti SweetAlert2.

1. Menggunakan Form HTML untuk Input Pengguna

<input type="text" id="userInput" placeholder="Masukkan nama Anda">
<button onclick="submitNama()">Kirim</button>
<p id="output"></p>

<script>
    function submitNama() {
        let nama = document.getElementById("userInput").value;
        document.getElementById("output").textContent = "Halo, " + nama + "!";
    }
</script>

Form HTML ini lebih fleksibel dibandingkan dengan prompt() dan tidak menghambat eksekusi script lainnya.

2. Menggunakan SweetAlert2 untuk Tampilan Lebih Menarik

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function mintaInput() {
        Swal.fire({
            title: "Masukkan Nama Anda",
            input: "text",
            showCancelButton: true,
            confirmButtonText: "Kirim",
        }).then((result) => {
            if (result.value) {
                Swal.fire("Halo, " + result.value + "!");
            }
        });
    }
</script>
<button onclick="mintaInput()">Masukkan Nama</button>

Dengan SweetAlert2, kita mendapatkan tampilan pop-up yang lebih menarik dan modern dibandingkan prompt() biasa.

Kapan Harus Menggunakan prompt()?

✅ Jika butuh input cepat dari pengguna tanpa membuat elemen tambahan.
✅ Jika ingin meminta konfirmasi sederhana atau input angka singkat.
✅ Jika sedang membuat script kecil atau eksperimen yang tidak memerlukan desain UI khusus.
❌ Jangan gunakan untuk form kompleks atau input yang sering digunakan, lebih baik gunakan form HTML atau pop-up yang lebih modern.

Kesimpulan

  • prompt() memungkinkan kita meminta input langsung dari pengguna dalam bentuk pop-up.
  • Cocok untuk input sederhana, tetapi kurang fleksibel untuk kebutuhan yang lebih kompleks.
  • Memblokir eksekusi script hingga pengguna memberikan respons, sehingga kurang cocok untuk aplikasi modern yang membutuhkan pengalaman pengguna yang smooth.
  • Alternatif yang lebih baik adalah menggunakan form HTML atau pustaka seperti SweetAlert2.

Dengan memahami kapan dan bagaimana menggunakan prompt window secara efektif, kita bisa meningkatkan interaksi pengguna dalam website dengan lebih optimal!

Read next