2

I have an edit screen, there is a section inside in which i have lots of elements like select,input etc. Now i need to find out whether the user has changed any values which was already existing using Jquery. I have to find whether there was a change in value while submitting the form. Consider a div like this,

<div class="row">
<div class="form-group required">
<label class="control-label">Port</label> 
    <select name="portId" id="portId">
        <option value="">Select</option>
        <option value="1">Chennai</option>
        <option value="2">Kochi</option>
    </select>
</div>
<div class="form-group required">
    <label class="control-label">Operator Name</label> 
    <input type="text" id="operatorName" name="operatorName">
</div>
<div class="form-group required">
    <label class="control-label">Attachment</label> 
    <input type="file" id="file" name="file">
</div>

Sibi Sundarrajan
  • 77
  • 1
  • 1
  • 12
  • 1
    need [mcve] of HTML and the jQuery you've used. – zer00ne Feb 09 '17 at 05:12
  • you may track text changes using on.input event like this `$('').on('input',function(e){...}` – shan Feb 09 '17 at 05:19
  • Possible duplicate of [Detecting Data changes in Forms using JQuery](http://stackoverflow.com/questions/807159/detecting-data-changes-in-forms-using-jquery) – 4b0 Feb 09 '17 at 05:20

2 Answers2

1

These events are used to check if an element has been modified or dirty. For implementing this in jQuery specifically .change() is the event which can be bound to an element.

For Dirty checking in forms, here is the NPM plugin.

Muhammad Faizan Uddin
  • 1,339
  • 12
  • 29
  • i have drop down which by default had 1st option selected, i'm changing it to option 2 and again i changed it back to option 1, in this case the value is not changed while submitting but change event will consider this as a change right? – Sibi Sundarrajan Feb 09 '17 at 05:33
1

Please share your code snippet which will help others to clearly undestand your question and give you the right answer. Anyway depends on your situation you need fire on change event on all elements like select, input and store old value in data attribute ex data-id='1' and compare with the data value and changed value.

$( "input" ).on( "change", function() {

   if($(this).text() != $(this).data('id'))
   {
        alert('you have changed');
   }
});
Kapila Perera
  • 837
  • 1
  • 11
  • 24