Link to home
Start Free TrialLog in
Avatar of Rahul Sehrawat
Rahul Sehrawat

asked on

Javascript Form Change

Hi,

I am working on a project where I need to see if any changes have been made to the form. If yes, what was the change which was made. The tricky part is that in this project there are forms on multiple number of pages and each page can have multiple forms. Is there any way I can record the changes made to fields?

Regards,
Rahul
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Rahul Sehrawat
Rahul Sehrawat

ASKER

Awesome.. thanks for the quick reply.. :)
You are welcome.
Hi Julian,

Any idea why doesn't it record any changes made to select box?

Thanks
A select should work fine - the only tricky one is a checkbox. The reason being that when you submit a form - checkboxes are not included if they are checked off.

So if your form has the checkbox checked off when you land on the page then it won't be in the history. Likewise if you land on the page with a checkbox checked and then check it off - when you do a serializeArray it won't find the checkbox value.

Therefore in your compare you have to do a special case for checkboxes. You need to check if a value exists in each of the arrays - and if doesn't assume it is a checkbox and report accordingly

Updated sample using this form
<form id="form1" action="reflect" class="form">
  <input type="text" name="firstname" value="Fred" class="form-control"/>  
  <input type="text" name="lastname" value="Smith" class="form-control"/>  
  <input type="text" name="email" value="Fred.Smith@bb.com" class="form-control"/>  
  <input type="radio" name="gender" value="male" checked /> Male 
  <input type="radio" name="gender" value="female" /> FeMale 
  <select name="region" class="form-control">
	<option value="region1">Region 1</option>
	<option value="region2" selected>Region 2</option>
	<option value="region3">Region 3</option>
  </select>
  <textarea name="comment" class="form-control"></textarea>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Open in new window

You can view it here