Script Konfirmasi Hadir Tamu Undangan Svelte

Cara membuat form untuk submit RSVP konfirmasi kehadiran tamu undangan online menggunakan SvelteJS


JagoTekno.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.

Setting Konfigurasi St Terminal Nixos
Ditulis oleh Rafi pada Wednesday, 8 March 2023
mrfdn author

Rafi

  • 15 year+ of Linux user.
  • 5 years+ blogger and web developer.

Jika artikel yang dibuatnya ternyata bermanfaat, support dengan cara

Baca juga

Cara Set File ENV pada Svelte Kit

Cara Set File ENV pada Svelte Kit

words min read

comments powered by Disqus