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

Best practices for using parent and child methods in Vue applications

Efficiently updating database records without the need for page reloads using EJS

Traversing through pair of arrays simultaneously using forEach loop in JavaScript

Automatically populate input field values into a textarea using a separator with jQuery

"Experience the latest version of DreamFactory - 2.0.4

Utilize ng-bootstrap in an Angular CLI project by integrating it with npm commands

Step-by-step guide on how to make a POST request with session data to a specific endpoint in a Node.js server

CSS or jQuery: Which is Better for Hiding/Showing a Div Within Another Div?

Guide on displaying ajax data using PHP

Trouble with radio button selection in Pyppeteer, puppeteer, and Angular JS

Creating a continuous loop animation with CSS hover state

Using jQuery to apply CSS styles to specific tags

Can VueJS 1 and 2 be integrated within the same package.json configuration?

Analyzing the current time against a user-inputted time using Javascript

Combining two states in the Vuex store

Using jQuery to combine the values of text inputs and checkboxes into a single array or string

Leveraging ES6 Symbols in Typescript applications

"Flashes of canvas in constant motion between animated scenes

Is there a way to verify if the password entered by the user matches the input provided in the old password field?

I need three buttons, but I only want one to be active at a time. When one button is clicked and becomes active