Better way to check if textbox values are changed using jquery

Question

I have a textbox which keeps track of old data and verifies with new data on keyup event. But this works well for single field.

$(function() {
    var content = $('#myContent').val();

    $('#myContent').keyup(function() { 
        if ($('#myContent').val() != content) {
            alert('Content has been changed');
        }
    });
});
<input type="text" id="myContent" class="field1">

Say if there are multiple fields with the same class then how can we track the old data and verify with new data?

Bhushan Kawadkar · Accepted Answer · 2019-11-12 13:47:12Z

There are many ways but below is one of the way to retain original value in data attribute and compare it with entered value on keyup event.

See below code

$(function(){
  //store original value in data attribute
  $('input.field1').each(function(){
     $(this).data('original', $(this).val());
  });
  
  //set keyup event handler
  $('input.field1').on('keyup', function(){
     var changedValue = $(this).val();
     if(changedValue != $(this).data('original')) {
       console.log('Value changed');
     } else {
       console.log('Value same');
     }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" id="myContent1" class="field1" value="value1"><br>
<input type="text" id="myContent2" class="field1" value="value1"><br>
<input type="text" id="myContent3" class="field1" value="value1"><br>
<input type="text" id="myContent4" class="field1" value="value1"><br>

VVV · Accepted Answer · 2019-11-12 13:51:15Z

0

Here's something similar to the first answer but saves the original value when the user focuses on the input. There's also a working fiddle.

$('.field1').on('focus', function() {
  $(this).data('value', $(this).val());
}).on('keyup', function() {
  if ($(this).data('value') != $(this).val()) {
    console.log('Content has changed');
  }
});

answered Nov 12, 2019 at 13:51

VVV

7,6033 gold badges37 silver badges55 bronze badges

Collectives™ on Stack Overflow

Better way to check if textbox values are changed using jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related