Maintaining the initial value of a textbox in jQuery across various focusin events

Question

Maintaining the initial value of a textbox in jQuery across various focusin events

Struggling to accurately explain the process, so feel free to check out this helpful fiddle.

In my form, there are several text input fields and a single submit button. The submit button becomes enabled once any of the form fields have been altered. If a textbox's value is changed, it will receive a new yellow background color using addClass to indicate the modification. The original value is saved during the focusin event and then compared with the new value during onchange.

However, I would like to prevent the original old value from changing when I edit the textbox value and refocus, in order for the background-color to reset accordingly.

Appreciate your help!

javascript jquery html css

Answer 1

Answer №1

To utilize the defaultValue property, follow this code snippet:

var adminWeb = window.adminWeb || {};

adminWeb.dirtyHandling = (function() {
  var createView = function() {
    $("form")
      .each(function() {
        $(this).data("serialized", $(this).serialize());
      }).on("change input", 'input:text', function(e) {
        $(this).toggleClass("textbox-changed", this.value !== this.defaultValue);

        var $form = $(this).closest('form');
        $form.find("input:submit, button:submit")
          .prop("disabled", $form.serialize() === $form.data("serialized"));
      })
      .find("input:submit, button:submit")
      .prop("disabled", true);
  };

  return {
    init: createView
  };

})();

$(function() {
  adminWeb.dirtyHandling.init();
});

.textbox-changed {
  background-color: rgba(255, 255, 0, 0.3)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="" action="" method="post">
  <input type="text" value="Carl" name="firstname" id="firstname" />
  <input type="text" value="Johnson" name="lastname" id="lasttname" />
  <br />
  <br />
  <br />
  <br />
  <br />
  <button id="submit-data" disabled="" type="submit">Save changes</button>
</form>

To ensure your code functions correctly, implement a data property to store the original value as shown below:

var adminWeb = window.adminWeb || {};

adminWeb.dirtyHandling = (function() {
  var createView = function() {
    $("form")
      .each(function() {
        $(this).data("serialized", $(this).serialize());
      }).on("focusin input:text", function(e) {
        var $t = $(e.target);
        var dvalue = $t.data('default-value');
        if (typeof dvalue == 'undefined') {
          $t.data('default-value', $t.val())
        }
      }).on("change input", function(e) {
        var txt = $(e.target);
        if (txt.is("input:text")) {
          txt.addClass("textbox-changed");
          if (txt.val() === txt.data('default-value')) { 
            // Compare with the original value
            txt.removeClass("textbox-changed");
          }
        }

        $(this)
          .find("input:submit, button:submit")
          .prop("disabled", $(this).serialize() === $(this).data("serialized"));
      })
      .find("input:submit, button:submit")
      .prop("disabled", true);
  };

  return {
    init: createView
  };

})();

$(function() {
  adminWeb.dirtyHandling.init();
});

.textbox-changed {
  background-color: rgba(255, 255, 0, 0.3)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="" action="" method="post">
  <input type="text" value="Carl" name="firstname" id="firstname" />
  <input type="text" value="Johnson" name="lastname" id="lasttname" />
  <br />
  <br />
  <br />
  <br />
  <br />
  <button id="submit-data" disabled="" type="submit">Save changes</button>
</form>

Answer 2

To utilize the defaultValue property, follow this code snippet:

var adminWeb = window.adminWeb || {};

adminWeb.dirtyHandling = (function() {
  var createView = function() {
    $("form")
      .each(function() {
        $(this).data("serialized", $(this).serialize());
      }).on("change input", 'input:text', function(e) {
        $(this).toggleClass("textbox-changed", this.value !== this.defaultValue);

        var $form = $(this).closest('form');
        $form.find("input:submit, button:submit")
          .prop("disabled", $form.serialize() === $form.data("serialized"));
      })
      .find("input:submit, button:submit")
      .prop("disabled", true);
  };

  return {
    init: createView
  };

})();

$(function() {
  adminWeb.dirtyHandling.init();
});

.textbox-changed {
  background-color: rgba(255, 255, 0, 0.3)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="" action="" method="post">
  <input type="text" value="Carl" name="firstname" id="firstname" />
  <input type="text" value="Johnson" name="lastname" id="lasttname" />
  <br />
  <br />
  <br />
  <br />
  <br />
  <button id="submit-data" disabled="" type="submit">Save changes</button>
</form>

To ensure your code functions correctly, implement a data property to store the original value as shown below:

var adminWeb = window.adminWeb || {};

adminWeb.dirtyHandling = (function() {
  var createView = function() {
    $("form")
      .each(function() {
        $(this).data("serialized", $(this).serialize());
      }).on("focusin input:text", function(e) {
        var $t = $(e.target);
        var dvalue = $t.data('default-value');
        if (typeof dvalue == 'undefined') {
          $t.data('default-value', $t.val())
        }
      }).on("change input", function(e) {
        var txt = $(e.target);
        if (txt.is("input:text")) {
          txt.addClass("textbox-changed");
          if (txt.val() === txt.data('default-value')) { 
            // Compare with the original value
            txt.removeClass("textbox-changed");
          }
        }

        $(this)
          .find("input:submit, button:submit")
          .prop("disabled", $(this).serialize() === $(this).data("serialized"));
      })
      .find("input:submit, button:submit")
      .prop("disabled", true);
  };

  return {
    init: createView
  };

})();

$(function() {
  adminWeb.dirtyHandling.init();
});

.textbox-changed {
  background-color: rgba(255, 255, 0, 0.3)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="" action="" method="post">
  <input type="text" value="Carl" name="firstname" id="firstname" />
  <input type="text" value="Johnson" name="lastname" id="lasttname" />
  <br />
  <br />
  <br />
  <br />
  <br />
  <button id="submit-data" disabled="" type="submit">Save changes</button>
</form>

Answer 3

Answer №2

It seems like there might be some confusion in your question. Are you aiming for something similar to this?

To achieve the desired outcome, you should eliminate the class during the focusin event.

Answer 4

It seems like there might be some confusion in your question. Are you aiming for something similar to this?

To achieve the desired outcome, you should eliminate the class during the focusin event.

Answer 5

Answer №3

To determine whether or not to apply a specific class, use a data attribute to store the original value and compare it with the current value. Iterate through each element to check if any of them have been modified. Here is an example...

<input data-original="Alice" value='Alice' type='text' />
<input type='submit id='submit' />

var inputs$ = $('[data-original]');

$('[data-original]').change(function (e) {
    var modified = false;
    $.each(inputs$, function () {
        var el$ = $(this);
        if (el$.attr('data-original') != el$.val()) {
            el$.addClass('highlight');
            modified = true;
        }
    });

    if (modified) {
        $('#submit').removeAttr('disabled');
    }
    else {
        $('#submit').attr('disabled', 'disabled');
    }

});

Answer 6

To determine whether or not to apply a specific class, use a data attribute to store the original value and compare it with the current value. Iterate through each element to check if any of them have been modified. Here is an example...

<input data-original="Alice" value='Alice' type='text' />
<input type='submit id='submit' />

var inputs$ = $('[data-original]');

$('[data-original]').change(function (e) {
    var modified = false;
    $.each(inputs$, function () {
        var el$ = $(this);
        if (el$.attr('data-original') != el$.val()) {
            el$.addClass('highlight');
            modified = true;
        }
    });

    if (modified) {
        $('#submit').removeAttr('disabled');
    }
    else {
        $('#submit').attr('disabled', 'disabled');
    }

});

Maintaining the initial value of a textbox in jQuery across various focusin events

Answer №1

Answer №2

Answer №3

Similar questions

I can't seem to retrieve any values from the API other than "chicken"

Is it necessary for Webpack to package all dependent node modules with the final bundle in production mode?

Using unicode characters to style your Angular application

Display the flowplayer div when the anchor is clicked

Updating a div using Ajax within a Rails application

Click on a specific image in a table using Cypress with a specific source URL

Stop the Nav bar item from collapsing

Leveraging jQuery to interact with elements within an ASP:GridView

Guide to creating seamless integration between AngularJS routing and ExpressJS routing when using html5mode

Utilizing GET parameters containing spaces

React: Implementing localStorage token addition in loginHandler function using State hook is not functioning as expected

Transforming a CSV document into a JSON format in order to generate a hierarchical tree structure for constructing a D3 categorical tree diagram

Problems revolving around the fundamental CSS drop-down menu concept

Adjust the class attribute in real-time

It seems that Firefox is ignoring the word-wrap style when the class of a child element is changed

Angular 9: The instantiation of cyclic dependencies is not allowed

Retrieve the HTML code from a webpage on a different domain

Tips for displaying a combobox popover from @reach/combobox within a MUI dialog element

AngularJS not compatible with Splice functionality

Incorporating a pre-loaded database into a jQuery Mobile Phonegap app