What's wrong with my code? sweetalert is working and it will pop up if i click the button in my form but when I click the confirm button in sweetalert the form did't submit in other words nothing happened,

can someone help me with this?

<form  action="gotospoilage.php?id=<?php echo $id; ?>" method="post">
  <input
    type="text"
    maxlength="2"
    name="spoilnum"
    
    style="font-weight: bold; color: #000"
    required
  />
  <button ><i ></i></button>
</form>

<script>
  $(".spoilbtn").on("click", function (e) {
    e.preventDefault;
    Swal.fire({
      title: "Spoiling...",
      text: "Are you sure you want to Spoil this Item?",
      icon: "warning",
      showCancelButton: true,
      confirmButtonColor: "red",
      cancelButtonColor: "gray",
      confirmButtonText: "Reset",
    }).then((result) => {
      if (result.isConfirmed) {
        form.submit();
      }
    });
  });
</script>

CodePudding user response：

Couple of issues...

1. preventDefault is a function and needs () added to call it
2. form is not defined

You really don't need jQuery for this. I would attach a submit event on the <form> so you can more easily reference the event target in order to submit it

document
  .querySelector("form[action^='gotospoilage.php']")
  .addEventListener("submit", async (e) => {
    e.preventDefault(); // 1️⃣
    const { isConfirmed } = await Swal.fire({
      // ...
    });
    if (isConfirmed) {
      e.target.submit(); // 2️⃣
    }
  });