Script Konfirmasi Hadir Tamu Undangan Svelte
Cara membuat form untuk submit RSVP konfirmasi kehadiran tamu undangan online menggunakan SvelteJS
mrfdn.com - Pada artikel ini saya mencoba untuk membuat form sederhana.
Fungsi form ini adalah mengirim data dari aplikasi web ke Google Sheet tapi kali ini menggunakan Svelte JS.
Jadi langsung saja, pertama buat sebuah file komponen Svelte.
Kemudian paste kode ini pada bagian
<script>
//export let data;
const scriptURL =
"https://script.google.com/macros/s/AKfycbyguZjskDwvOMge67lJXgNfFkWX9xt7orf5Hx3UyFjE3OMELyitQ3wh6jM5Vl_casdf/exec";
let form;
let hadir;
let hadirberapa;
let btnKirim;
let btnLoading;
function jumlahorang() {
hadirberapa.style.display = hadir.checked ? "block" : "none";
};
function konfirmasihadir() {
form.addEventListener("submit", async (e) => {
e.preventDefault();
btnLoading.classList.toggle("hidden");
btnKirim.classList.toggle("hidden");
const formData = new FormData(form);
const response = await fetch(scriptURL, {
method: "POST",
body: formData,
});
if (response.ok) {
btnLoading.classList.toggle("hidden");
btnKirim.classList.toggle("hidden");
form.reset();
console.log("Success!");
} else {
console.error("Error!");
}
});
};
</script>
Kemudian pada bagian bawah, buat form yang diinginkan.
<form on:submit|preventDefault={konfirmasihadir} bind:this={form} >
<label
>Nama lengkap
<input
name="nama"
type="text"
required="required"
/>
</label>
<div>
<label for="hadir" class="block >
<input
type="radio"
id="hadir"
name="konfirmasi"
value="yes"
bind:this={hadir}
on:click={jumlahorang}
class="text-black"
required="required"
/>
Ya, saya akan datang
</label>
<label for="tidakhadir" class="block">
<input
type="radio"
id="tidakhadir"
name="konfirmasi"
value="no"
on:click={jumlahorang}
required="required"
/>
Maaf, tidak bisa datang
</label>
</div>
<div
bind:this={hadirberapa}
style="display:none"
class="block"
>
<label for="floatingPassword" class="block"
>Berapa orang?
<input
type="text"
inputmode="numeric"
pattern="[0-9]+"
name="jumlah"
/>
</label>
</div>
<div class="">
<label for="ucapan" class="block "
>Kirim ucapan
<input
name="pesan"
type="text"
/>
</label>
</div>
<button
bind:this={btnKirim}
type="submit">Kirim</button
>
<button
bind:this={btnLoading}
>Loading</button
>
</form>
Setelah itu silahkan simpan dan jalankan.
Selamat mencoba.
