#80·ui

Issue with change event inside a form

Author: lashisuCreated Aug 30, 2018Updated Aug 14, 2023
Labelsbugbootstrap-4

Prerequisites

Add below code to see the unexpected behavior $(document).on('change', '.form-control', function(){ console.log(1); });

Expected Behavior

With below code Expected Behavior is to get the console every time on value change (change event) $(document).on('change', '.form-control', function(){ console.log(1); });

Current Behavior

But getting the console log infinite times on focus of the element even without the value change. This is happening with every element(like textbox, textarea, radio, checkbox and every element) inside a form which is bind with "change" event. $(document).on('change', '.form-control', function(){ console.log(1); });

Failure Information (for bugs)

On adding "change" change event with form element inside a form causing issue. Event triggered infinite times just focusing on the element. Its is working fine without the form tag.

Steps to Reproduce

  1. Open https://demos.creative-tim.com/material-dashboard/docs/2.0/components/forms.html
  2. Open browser console and run below code
$(document).on('change', '.form-control', function(){ console.log(1); }); 3. Now focus on first input control. Actually in documentation first two sections( "Overview" & "Form controls") are inside a form. So check within these blocks, you will get the raised issue. ![error](https://user-images.githubusercontent.com/1376383/44834754-43d80780-ac5c-11e8-963f-536bfec100f8.jpg)