0

Is there anyway to check any of the HTML components (i.e input elements) value in a form got changed so that i can pop up a alert saying "would like to save changes?" before navigating to other page.

Thanks.

kalaimani padmanabhan
  • 29
  • 3

2 Answers2

1

Since you have jQuery in your question:

After page load, use $.serialize to create a snapshot of the form.

On submit, run serialize again.

Then you can use use (or create) an isEqual function to compare if there has been a change.

This question might help you on that last step: How to determine equality for two JavaScript objects?

EDIT

jQuery also has a serializeArray method which may make that process easier.

https://api.jquery.com/serializeArray/

Community
  • 1
  • 1
Jeremy J Starcher
  • 23,369
  • 6
  • 54
  • 74
0

jQuery('.form_component').change(function (){..}); , where form_component should be a class common for all your input elements in the form.

venkatKA
  • 2,399
  • 1
  • 18
  • 22
  • Agreed!. But i would like to cover this scenario as well. Lets say if a user changes the value from 0 to 1 and then changes back to 0. Ideally, in this case nothing has been changed. Is there a way to cover as this well – kalaimani padmanabhan May 22 '16 at 07:15
  • If you're looking to show an alert only before the user navigates away, store the form values in an array. Check if the new values is equal to the array stored. If not, show an alert. Voila! – venkatKA May 22 '16 at 07:19