How do you use jQuery to show that a text box or form has been edited?

Question

I'm trying to create a simple form that changes color or somehow shows it's been edited (doesn't matter how) upon editing and not saving/submitting—not during the change, but right after. Say I have this small form, just to make it concrete:

<form action="" id="contact-form" class="form-horizontal">
  <fieldset>    
    <div class="control-group">
      <label class="control-label" for="message">Message</label>
        <div class="controls">
          <textarea class="input-xlarge" name="message" id="message" rows="3"></textarea>
        </div>
    </div>
    <div class="form-actions">
      <button type="submit" class="btn">Submit</button>
      <button type="reset" class="btn">Cancel</button>
    </div>
  </fieldset>
</form>

I'm sorry I don't have any starting JS to show, I don't know how to write a function from scratch and I didn't know what to search for online to find some code I could tweak.

Thanks!

EDIT: I want the changes to be indicated if you've put content into the box, but if you end up deleting it even after making several changes, I would like the indication to disappear as if you haven't changed anything. I don't want it to continue working after page refresh (would rather it just went back to its original state).

Is it supposed to always show edited even after a page refresh, like how facebook let's you edit posts? — Panama Jack, Jan 17 '14 at 17:56
How robust are you talking? For example, if someone were to come to the page, add some input, and then delete it (so that the form was back at it's original state), would that still be considered "edited"? — talemyn, Jan 17 '14 at 18:03
What you want to do actually? Can you describe you whole scenario? — Irfan TahirKheli, Jan 17 '14 at 18:05

score 1 · Answer 1 · answered Jan 17 '14 at 17:57

1

For that you can use keyup event.

Try this:

$('textarea').keyup(function () { // on keyup
  // change the color!
}

This way, you can manage the CSS properties of the elements when the keyup event occurs on the textarea!

For more:

http://api.jquery.com/css/ jQuery CSS

http://api.jquery.com/keyup/ jQuery KeyUp event!

answered Jan 17 '14 at 17:57

Afzaal Ahmad Zeeshan

15,669
12
55
103

Thank you! Definitely using this in combination with another function. – katgarcia Jan 17 '14 at 18:49
Do you know how I would remove the CSS change when the user deletes whatever they've typed? – katgarcia Jan 17 '14 at 20:43

score 1 · Answer 2 · answered Jan 17 '14 at 17:59

1

You can use:

$('#contact-form').change(function () {
alert('Message has changed');
});

Instead of alert(), you can perform any action desired, this was just for example.

JSFiddle

answered Jan 17 '14 at 17:59

Craighead

519
3
8

score 1 · Answer 3 · answered Jan 17 '14 at 18:00

You can do like this:

$('#contact-form :input').on('input propertychange', function() {
    console.log('Edited!'); 
});

:input help you to selects all input, textarea, select and button elements inside form.

oninput help you to keep track of when input fields changes

propertychange is just same as oninput event but useful for old IE versions which does not support oninput

Demo

score 1 · Answer 4 · edited May 23 '17 at 12:11

1

You can bind the input property change, which works on keyup pasting data in etc

$('#message').on('input propertychange', function() {
    $(this).css('background-color', 'blue'); // or whatever you want to do
});

oh and shoutout to this question because I looked this up a while ago and used this answer

edited May 23 '17 at 12:11

Community

1
1

answered Jan 17 '14 at 18:01

Charles380

1,269
8
19

score 1 · Accepted Answer · answered Jan 17 '14 at 18:26

1

Check this solution, see if this is what you are looking for:

http://jsfiddle.net/TffNf/2/

$(function(){
    var oldval = $('#message').val();

    $('#message').keyup(function () { 

        $('.edit-msg').remove();
        if($('#message').val() != oldval)
        {
          $(this).after('<span class="edit-msg">This message is edited.</span>')
        }
    });
})

*

answered Jan 17 '14 at 18:26

Irfan TahirKheli

3,652
1
22
36

Definitely helps. I'm going to use part of this, along with parts of the other answers. Thank you! Would you happen to know how to make it disappear upon deletion of what you've typed? No problem if not, that's kind of a "nice to have" extra thing – katgarcia Jan 17 '14 at 18:49
Open the link in my anwser and add some text with the default value of the textarea you see it adds the edited message. and when you remove the all the extra text you inserted the message will disappear. so it is done already. can you give it a try now. – Irfan TahirKheli Jan 17 '14 at 19:22
So the edit message is removed when the default value is retained. In this case the default value is "this is default value" . And in this case http://jsfiddle.net/TffNf/4/ , the textarea is empty by default. so when you write something inside the edit message will appear and when you delete the text; the edit message will disappear. – Irfan TahirKheli Jan 17 '14 at 19:29

How do you use jQuery to show that a text box or form has been edited?

5 Answers5