JS detect HTML input field value change (unusual scenario)-CodePudding

Background: A website required a unique mutli-select tool where a user clicks on a text input, which launches a modal popup containing a series of selectable checkboxes. When that modal is closed, either via clicking "Save", the X in the top-right, or simply outside of the modal, their selection is stored to the text input field.

Here is a basic example of this in JSFiddle: https://jsfiddle.net/6x7ur3k2/1/

Goal: I now have a need to determine when the user has changed this particular input text field's value. So if the text field lists "A, B" when the user clicks to launch the modal, then changes to selection to anything other than A, B, the system will detect this. As such some of the methods of detecting input field value changes with which I am familiar do not work here since it JS,not the user, changing the value.

Problem: My initial attempt to accomplish this contained two event handlers, one attached to clicking on the text input that stores it's value to a variable, then another attached to when the modal is closed which compares the first value to the new value and checks for differences. This doesn't work, however. Additionally, each time the user clicks on the input text field, a new event is attached the closing of the modal, and I haven't figured out how to end that using off() without also removing the event handler that stores the selected checkboxes as values in the text input fields when the modal is dismissed/closed. This is the code on line 5 of the JSFiddle JS portion $('.list-modal').on('hide.bs.modal', function () {

Here is an example of the code I tried to detect the change. In addition to always indicating the value has changed, it appears to stack new event handlers on modal closure.

        $('#preset-work-area').on('click', function() {
            var content = $('#preset-work-area').val();
            $('#preset-work-area-modal').on('hide.bs.modal', function () {
                if ($('#preset-work-area').val() != value) {
                    alert('Text input values have changed'));
                }
            });
        });

If I include $('#preset-work-area').off();, it breaks the functionality of $('.list-modal').on('hide.bs.modal', function () { which stores the user's checkbox selections to the input field on modal closure.

Any help or assistance here would be greatly appreciated.

CodePudding user response：

Try defaultValue

 const workArea = $('#preset-work-area')[0]; // DOM element
 if (workArea.value != workArea.defaultValue) {
   alert('Text input values have changed'));
 }

you can then when you are happy, do

workArea.defaultValue = workArea.value

to save it for later tests

Als do not add event listener on click

$('#preset-work-area-modal').on('hide.bs.modal', function () {
   const workArea = $('#preset-work-area')[0]; // DOM element
   if (workArea.value != workArea.defaultValue) {
     alert('Text input values have changed'));
   }
});

$('#preset-work-area').on('click', function() {
  var content = $('#preset-work-area').val();
  // do something
});