Reset modal form

August 29, 2025 · AI Conversations

User
<script>
document.addEventListener("DOMContentLoaded", function () {
  const steps = document.querySelectorAll(".step");
  let current = 0;

  function showStep(index) {
    steps.forEach((s, i) => s.classList.toggle("active", i === index));
  }

  // attach click to all .nextandsubmit buttons
  document.querySelectorAll(".nextstep").forEach(btn => {
    btn.addEventListener("click", function () {
      if (current < steps.length - 1) {
        current++;
        showStep(current);
      } else {
        // last step → submit form
        document.getElementById("msForm").submit();
      }
    });
  });

  // show only first step on load
  showStep(current);
});
</script>

also add prev step in next step

Assistant
Got it 👍 You want **Prev Step** functionality along with **Next Step** in your multi-step form.
Here’s your updated script with both **Next** and **Prev** support:

<script>
document.addEventListener("DOMContentLoaded", function () {
  const steps = document.querySelectorAll(".step");
  let current = 0;

  function showStep(index) {
    steps.forEach((s, i) => s.classList.toggle("active", i === index));
  }

  // NEXT buttons
  document.querySelectorAll(".nextstep").forEach(btn => {
    btn.addEventListener("click", function () {
      if (current < steps.length - 1) {
        current++;
        showStep(current);
      } else {
        // last step → submit form
        document.getElementById("msForm").submit();
      }
    });
  });

  // PREV buttons
  document.querySelectorAll(".prevstep").forEach(btn => {
    btn.addEventListener("click", function () {
      if (current > 0) {
        current--;
        showStep(current);
      }
    });
  });

  // show only first step on load
  showStep(current);
});
</script>

### How to use in HTML:

<div class="step active">Step 1
  <button type="button" class="nextstep">Next</button>
</div>

<div class="step">Step 2
  <button type="button" class="prevstep">Prev</button>
  <button type="button" class="nextstep">Next</button>
</div>

<div class="step">Step 3
  <button type="button" class="prevstep">Prev</button>
  <button type="button" class="nextstep">Submit</button>
</div>

👉 Each step can have a **.prevstep** (except the first) and a **.nextstep** (except the last if you only want submit).

Do you also want me to make the **Prev button hidden on the first step** and **Next button hidden on the last step** automatically?

User
when click addWorkerModal this empty all modal form
Assistant
Okay 👍 — so you want that whenever you **open the modal (`#addWorkerModal`)**, the form inside it should be **reset/emptied** (all inputs cleared).

Here’s the script to do that:

<script>
document.addEventListener("DOMContentLoaded", function () {
  const modal = document.getElementById("addWorkerModal");
  const form = document.querySelector("#addWorkerModal form");

  // When modal is opened → reset form
  modal.addEventListener("show.bs.modal", function () {
    if (form) {
      form.reset();
    }

    // if you are using custom hidden inputs or not reset by default
    modal.querySelectorAll("input[type=text], input[type=email], input[type=number], textarea").forEach(el => {
      el.value = "";
    });

    modal.querySelectorAll("input[type=checkbox], input[type=radio]").forEach(el => {
      el.checked = false;
    });

    modal.querySelectorAll("select").forEach(el => {
      el.selectedIndex = 0;
    });
  });
});
</script>

### ✅ Explanation
– Uses Bootstrap 5 modal event `show.bs.modal`.
– `form.reset()` clears standard fields.
– Extra clearing code ensures hidden inputs, checkboxes, radios, and selects are also reset.

—

👉 Do you want me to also reset your **multi-step (Prev/Next) steps** inside this modal (so it always opens at Step 1), or just clear the input values?

User
take global form elemtnen udner modald id Multistep modal
Assistant
Perfect 👍 If your **multi-step form** is inside a modal (say `#multiStepModal`) and you want to reset **the whole form and steps** every time the modal opens, here’s the updated script:

<script>
document.addEventListener("DOMContentLoaded", function () {
  const modal = document.getElementById("multiStepModal");
  const form = modal.querySelector("form");   // global form under modal
  const steps = modal.querySelectorAll(".step");
  let current = 0;

  function showStep(index) {
    steps.forEach((s, i) => s.classList.toggle("active", i === index));
  }

  // NEXT buttons
  modal.querySelectorAll(".nextstep").forEach(btn => {
    btn.addEventListener("click", function () {
      if (current < steps.length - 1) {
        current++;
        showStep(current);
      } else {
        form.submit();
      }
    });
  });

  // PREV buttons
  modal.querySelectorAll(".prevstep").forEach(btn => {
    btn.addEventListener("click", function () {
      if (current > 0) {
        current--;
        showStep(current);
      }
    });
  });

  // Reset form + steps whenever modal opens
  modal.addEventListener("show.bs.modal", function () {
    if (form) form.reset();     // clear form values
    current = 0;                // reset to first step
    showStep(current);          // show first step
  });

  // initialize
  showStep(current);
});
</script>

### ✅ What this does:
– Targets your **form only inside `#multiStepModal`**.
– Clears all inputs on modal open (`form.reset()`).
– Resets **step navigation** to step 1 each time modal is shown.
– Keeps Next/Prev working correctly.

—

Do you also want me to **auto-hide Prev button on step 1 and Next button on last step** so the navigation looks cleaner?

User
when open new modal then always open first step
function addWorkerModal()
{
document.getElementById('Form_AddWorkerForm').reset();
var modal = new bootstrap.Modal(document.getElementById('multiStepModal'));
modal.show();
}
Assistant
Got it 👍 — you want your **`addWorkerModal()`** function to not only reset the form but also always show the **first step** of the multi-step form when opening the modal.

Here’s how you can update your function:

<script>
function addWorkerModal() {
  // reset form fields
  document.getElementById('Form_AddWorkerForm').reset();

  // reset step navigation to first step
  const modalEl = document.getElementById('multiStepModal');
  const steps = modalEl.querySelectorAll(".step");
  let current = 0;

  steps.forEach((s, i) => s.classList.toggle("active", i === current));

  // show modal
  var modal = new bootstrap.Modal(modalEl);
  modal.show();
}
</script>

### ✅ What changed:
– After resetting the form, it loops through `.step` elements inside `#multiStepModal` and makes only the **first step active**.
– Ensures every time you call `addWorkerModal()`, the modal starts fresh at step 1.

—

👉 Do you also want me to handle hiding/showing the **Prev/Next buttons** automatically (so "Prev" is hidden on Step 1 and "Submit" replaces "Next" on the last step)?

User
also if file is slected then reset input file field
Assistant
Perfect ✅ — by default, `form.reset()` resets **text, selects, radios, checkboxes**, but **file inputs keep their value** in some browsers.
So you need to explicitly clear them.

Here’s the updated `addWorkerModal()` with file input reset included:

<script>
function addWorkerModal() {
  // reset form fields
  const form = document.getElementById('Form_AddWorkerForm');
  form.reset();

  // reset file inputs manually
  form.querySelectorAll('input[type="file"]').forEach(input => {
    input.value = "";
  });

  // reset step navigation to first step
  const modalEl = document.getElementById('multiStepModal');
  const steps = modalEl.querySelectorAll(".step");
  let current = 0;

  steps.forEach((s, i) => s.classList.toggle("active", i === current));

  // show modal
  var modal = new bootstrap.Modal(modalEl);
  modal.show();
}
</script>

### ✅ What it does:
– `form.reset()` → clears normal fields.
– Loops through all “ inside the form and empties them.
– Ensures modal **always opens on Step 1**.

—

Do you also want me to make sure the **file preview (if you’re showing selected filename or thumbnail)** gets cleared when resetting?

Leave a Comment

Your email address will not be published. Required fields are marked *