In my application I want a customer to not press submit when he didn't change values in a specific form. I can do this serverside and add a viewmodelerror to the modelstate. But is there a way to do this also clientside with javascript? I searched for it, but couldn't find it.
-
do you want to enable submit button only when a change has been done in the values ??Pankaj Upadhyay– Pankaj Upadhyay2011-11-15 09:06:41 +00:00Commented Nov 15, 2011 at 9:06
-
Yes, if that is possible. It would also be nice if it is possible to detect that the user has revert the change, but I can imagine that that is impossible.Patrick– Patrick2011-11-15 09:10:47 +00:00Commented Nov 15, 2011 at 9:10
-
i dont think it's impossible....Its how they prefer to do these things.....All you need is javascript function that detects for the changes on client side and then turns the submit button onPankaj Upadhyay– Pankaj Upadhyay2011-11-15 09:13:44 +00:00Commented Nov 15, 2011 at 9:13
Add a comment
|
3 Answers
You can set a javascript variable if the form is edited. A simple way of doing this would be to listen to the change event on input fields:
var isChanged = false;
$('input,select,textarea').change(function() {
isChanged = true;
});
And then check for isChanged before submitting.
This approach doesn't deal with values being changed back to the original value though.
If you need to address that scenario, you would need to keep the form state in a javascript object and compare it with that.
You could add this to avoid the user to leave the page if the form has changed:
$(window).bind('beforeunload', function() {
if (isChanged) {
return 'You have changed the form, are you sure?';
} else {
return undefined;
}
});
4 Comments
Patrick
This is a start. It atleast gives me the possibility to give the user some feedback before postback. Then serverside I can check if the user really has changed anything or if the user did not.
Christian Dalager
I just added another suggestion that often goes along with that type of problem.
trevorgk
One problem arises if you are checking for changes before leaving page, then you will also be prompted when you click save on the form. How to override this behaviour for form submits as opposed to clicking a link or closing the tab...
Alex
The
.change() handler above needs a tweak to work correctly: a closing ) after the last curly brace }.Not sure what you asking? Are you talking about client side validation? in this case you could use MVC Validation or a javascript library like jquery and use a validation plugin
2 Comments
Patrick
I'm not talking about validation. I just want to know if the form values are changed between pageload and pagesubmit.
Mark Redman
you would need to buid the change detection in javascript if you wanted to be sure of exact value changes, or you could add a class to each input and bind a change event to all elements to that class which sets a hidden field indicating a value has changed.
What is the client supposed to change?
If, for example. it's just the value of a text field you could save the original value in the document ready jquery event and when hitting the submit button run a javascript function that checks if the value has changed.
If you have more complex input fields you can still use this mechanism to save the original and check on submit trough javascript.
