CODEWITHSUNDEEP
javascriptjqueryforms
katgarcia
katgarcia

Reputation: 173

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

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).

Upvotes: 0

Views: 323

Answers (5)

Irfan TahirKheli
Irfan TahirKheli

Reputation: 3662

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>')
        }
    });
})

*

Upvotes: 1

Charles380
Charles380

Reputation: 1279

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

Upvotes: 1

Felix
Felix

Reputation: 38102

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

Upvotes: 1

Craighead
Craighead

Reputation: 519

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

Upvotes: 1

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

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!

Upvotes: 1

Related Questions