CODEWITHSUNDEEP
javascriptjqueryhtmlcss
brroshan
brroshan

Reputation: 1650

jQuery remember original textbox value on multiple focusin events

Difficult to get the explaination right so here's a little fiddle.

I have a form with multiple input:text and one button:submit. The submit button gets enabled when any of the form controls has changed. Also textboxes onchange gets a new fancy yellow background-color with addClass to indicate that the value has been changed. The original value is stored on the focusin event then compared with the new value onchange.

But, my goal is when I change the textbox value and focusin again I would like to have the original old value to not change, so that the background-color can be reseted.

Thanks in advance

Upvotes: 0

Views: 179

Answers (3)

MikeT
MikeT

Reputation: 2663

Use a data- attribute to store the original value and check against that attribute to determine whether or not to set the class.Iterate over each one to see if none of them are changed. Something like...

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

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

$('[data-original]').change(function (e) {
    var changed = false;
    $.each(textInputs$, function () {
        var self$ = $(this);
        if (self$.attr('data-original') != self$.val()) {
            self$.addClass('yellow');
            changed = true;
        }
    });

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

});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You can use the defaultValue property

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>

If you want to make your code work, use a data property to store the original value once

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')) { //oldVal comparison
            //should allways be same
            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>

Upvotes: 3

jsam
jsam

Reputation: 301

I'm not sure I understood your question. Is this what you'r trying to achieve?

You need to remove class in focusin event.

Upvotes: 0

Related Questions