P.S - Although there are many other such questions in Stackoverflow, I could NOT find the method that I was trying to implement.
Now, what I tried doing is as follows :-
Profile Page
Email : example@example.com [Edit Details Button]
Edit Details Page //user is sent here if s/he clicks on Edit Details Button
<form id='inputform'>
<input type="text" name="email" id='email'>
<button type="submit" id='submitform'>Submit</button>
</form>
<script>
//Script part below
</script>
Script
//validation part here
var noofsubmits = 0;
$('#submitform').on('click',function(e){
e.preventDefault();
if($('#inputform').valid()){
noofsubmits++;
if(noofsubmits == 1){
$('#inputform').submit();
//redirect users to a different page on successful form submission
}
}
});
On every form submit, the user is redirected to the profile page (which shows updated info). Now, everytime the user tries to edit details , the varialbe noofsubmits is set to 0.
I am not having any problem with this method, but is there any practical problem with this method? Like what if the user disables Javascript in the browser, so would this method not work?