0

I have been creating a form with lots of <input type="checkbox"> for search and filter functionality. Please find the code below;

    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" name="type" value="1" id="type1">
        <label class="custom-control-label" for="type1">Filter Sub Item</label>
   </div>

But when the page renders in the browser the DOM is appended with a new hidden field for each <input type="checkbox">

<input type="hidden" name="_type" value="on">

I am using Boostrap CSS library for the form design. How can I stop this from auto generating the hidden fields in the form.

When I submit the form with method="get" these hidden values are appearing in the browser address bar.

Sebin Thomas
  • 279
  • 8
  • 21
  • Well, I can show you the working example if you had a demo but generally you can make use of this event listener: [HTMLFormElement: submit event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event) – m4n0 Jun 30 '21 at 08:43
  • Yes, on submit we can remove all the hidden elements, but I don't want to `` to be generated at all. Which library is causing this? @m4n0 – Sebin Thomas Jun 30 '21 at 08:50
  • Try removing libraries one at a time until you dont see those hidden fields. Start with `js` libraries first. Remove the basic ones like `jquery`, `popper` at the end – endeavour Jun 30 '21 at 08:57
  • Tried removing the libraries but still it appears. Tried with different browsers (Chrome, Firefox and Edge) but same. – Sebin Thomas Jun 30 '21 at 09:18

0 Answers0