PUT method: Submit not working

[shrocket]

Hello, we are having a little trouble seeing something that is probably right in front of our faces.

On our edit form, the submit button does not work at all. It doesn't produce any errors in the console or in the viewfinder.

It. Simply. Does. Nothing.

ATM, everything else works just fine.

We have tried things with onSubmit and handle, but . . . well, I've already said that it doesn't work.

Here's the US we're working on.

Here's what the ServiceForm component looks like:

import EditService from "@/pages/SPD/services/[id]/edit";
import useSWR from "swr";

export default function ServiceForm({ onSubmit, service = {} }) {
  function handleAdd(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const data = Object.fromEntries(formData);
    onSubmit(data);
  }

  async function handleEditService(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const data = Object.fromEntries(formData);
    onSubmit(data);
  }

  return (
    <>
      <form
        onSubmit={service.name ? handleEditService : handleAdd}
        aria-label="ServiceForm"
      >
        <label htmlFor="name">service Name: </label>
        <input
          id="name"
          name="name"
          type="text"
          defaultValue={service.name}
          required
        />

        <label htmlFor="image">Image: </label>
        <input
          id="image"
          name="image"
          type="text"
          defaultValue={service.image}
          required
        />

        <label htmlFor="description">Description: </label>
        <textarea
          id="description"
          name="description"
          cols="20"
          rows="4"
          defaultValue={service.description}
          required
        ></textarea>

        <label htmlFor="date">Date: </label>
        <input
          id="date"
          name="date"
          type="date"
          defaultValue={service.date}
          required
        />

        <label htmlFor="time">Time: </label>
        <input
          id="time"
          name="time"
          type="time"
          defaultValue={service.time}
          required
        />

        <label htmlFor="price">Price: </label>
        <input
          id="price"
          name="price"
          type="number"
          defaultValue={service.price}
          required
        />
        <span> EUR</span>

        <button type="submit">{service.name ? "Save" : "Add"}</button>
      </form>
    </>
  );
}

Here's what the edit page looks like:

import useSWR from "swr";
import { useRouter } from "next/router";
import { editService } from "@/lib/api";
import ServiceForm from "@/components/ServiceForm";
import Link from "next/link";

export default function EditService() {
  const router = useRouter();
  const { id } = router.query;
  const {
    data: service,
    isLoading,
    mutate,
  } = useSWR(id ? `/api/services/${id}` : null);

  async function onSubmit(data) {
    await editService({ ...data, id });
    mutate(`/api/services`);
    mutate(`/api/services/${id}`);
    router.push("/SPD");
  }

  if (!service || isLoading) {
    return;
  }

  return (
    <>
      <h2>Edit Service</h2>
      <ServiceForm service={service} onSubmit={onSubmit} />
      <Link href="/SPD">cancel</Link>
    </>
  );
}

Thank you for any time you can give or solutions you can provide!

Your Team Hotel Tishjama

[ahohnsen]

Hey there!

Please open a pull request and post the link to the PR here, so we can have a look at your project 🙂

[shrocket]

No problem! Here it is.