Form Simulasi

by oktaviardi pratama

HTML

<form id="myForm" action="" method="POST">
        <label for="nama">Nama:</label>
        <input type="text" id="nama" name="nama" required>
        
         <label for="phone">Phone:</label>
        <input placeholder="ex: +6281231231xxx" type="phone" id="phone" name="phone" required>

        <label for="email">Email:</label>
        <input placeholder="ex: [email protected]" type="email" id="email" name="email" required>

        <button type="submit">Kirim Data</button>
    </form>

CSS

body { font-family: sans-serif; padding: 20px; }
        form { max-width: 300px; }
        label { display: block; margin-top: 10px; }
        input { width: 100%; padding: 8px; box-sizing: border-box; }
        button { margin-top: 15px; padding: 10px 20px; cursor: pointer; }

JavaScript

// Mengambil elemen form
        const form = document.getElementById('myForm');

        // Menambahkan event saat form disubmit
        form.addEventListener('submit', function(event) {
            // Tampilkan alert
            alert('Data berhasil dikirim! Terima kasih, ' + document.getElementById('nama').value);
            
            // Catatan: Karena kita tidak menggunakan event.preventDefault(),
            // halaman akan tetap melakukan refresh/submit setelah alert ditutup.
        });const form = document.getElementById('myForm');

        form.addEventListener('submit', function(event) {
            // Mencegah form mengirim data dan me-refresh halaman
            event.preventDefault(); 

            // Ambil nilai nama untuk ditampilkan di alert
            const namaUser = document.getElementById('nama').value;

            // Tampilkan alert
            alert('Halo ' + namaUser + ',\nData Anda telah diterima (Simulasi).');
            
            // Opsional: Reset form setelah alert
            form.reset();
        });