Detect changes to HTML textarea using jQuery and click function

Question

This is probably not the best solution but i want t check if the text has been changed in the textarea element when clicking the button. Obviously using ".on("change keyup paste", function()" check anny changes to the textarea instantly. Because of this the textarea element will be checked two times:

First when editing the textarea Second when i hit the button

The idea is to only preform the check of the textarea once, when the button has been clicked. Is there a more suitable event handler function for this?

Script:

$('#btnClick').click(function () {    
$("#textarea").on("change keyup paste", function() {    
    var PreviousVal =  document.getElementById("textarea").innerHTML;
    var currentVal = $(this).val();

    if(currentVal == PreviousVal) {
        alert("No changes where made");       
    }
    else {      

        alert("textarea has been changed from " + '"' + PreviousVal + '"'                + " to " + '"' + currentVal + '"');
        }
})   


});

HTML:

<textarea id="textarea">Hejsan</textarea><br/>
<input id="btnClick" type="button" value="Submit" />

Just keep default value of textarea in a variable or using data-* attribute and compare on click. — A. Wolff
– A. Wolff, Commented Oct 1, 2015 at 12:28

user405398 · Accepted Answer · 2015-10-01 12:28:35Z

2

If you only want to compare old and current values on click of a button, you can do something like this:

var PreviousVal =  document.getElementById("textarea").value;
$('#btnClick').click(function () {    
    var currentVal = document.getElementById("textarea").value;

    if(currentVal == PreviousVal) {
        alert("No changes where made");       
    }
    else {      

        alert("textarea has been changed from " + '"' + PreviousVal + '"'                + " to " + '"' + currentVal + '"');
        }
    PreviousVal = currentVal;
});

answered Oct 1, 2015 at 12:28

user405398

Sign up to request clarification or add additional context in comments.

Comments

mplungjan · Accepted Answer · 2015-10-01 12:31:20Z

1

You assign the textarea handlers on the click of the button. That is not likely what you want
You just need to check if the value has changed from when the page loaded?

$(function() {
  $('#btnClick').on("click",function() {
    var previousVal = $("#textarea").get(0).defaultValue, 
        currentVal  = $("#textarea").val();
    if (currentVal == previousVal) {
      alert("No changes where made");
    } else {
      alert('textarea has been changed from "' + previousVal + '" to "' + currentVal + '"');
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="textarea">Hejsan</textarea><br/>
<input id="btnClick" type="button" value="Submit" />

answered Oct 1, 2015 at 12:31

mplungjan

180k29 gold badges183 silver badges246 bronze badges

1 Comment

WhoAmI Over a year ago

This is exactly what i was trying to do

Gagan Jaura · Accepted Answer · 2015-10-01 12:29:40Z

0

You have to save the previous value of textarea on ready function when the page loads first time.

var PreviousVal;
$(document).ready(function(){
     PreviousVal =  document.getElementById("textarea").innerHTML;
});

Then on button click check the data with this value

$('#btnClick').click(function () {    
    var currentVal =  document.getElementById("textarea").innerHTML;

    if(currentVal == PreviousVal) {
        alert("No changes where made");       
    }
    else {      

        alert("textarea has been changed from " + '"' + PreviousVal + '"'                + " to " + '"' + currentVal + '"');
        }
});

answered Oct 1, 2015 at 12:29

Gagan Jaura

7091 gold badge5 silver badges14 bronze badges

Collectives™ on Stack Overflow

Detect changes to HTML textarea using jQuery and click function

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related