Script Konfirmasi Hadir Tamu Undangan Svelte

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>