Prevent multiple form submission using a counter?

Viewed 183

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?

1 Answers

Yes for sure if javascript is disabled on the client side, the script part will not be executed. (and you have to do validation and redirection on the server side)

However, there are very very few people who disable javascript in their browser.

The drawback of doing validation and redirection on the server side is that the user will need to wait for a slightly longer time because there will be time lag before the server respondes to the client request. But if your validation is done on the client side (javascript), then the user will experience immediate response on data validation.

On the other hand, using javascript will also be good if you want some visual effect like animation to be rendered on the client side.

Since very very few people will disable javascript in their browser, you can continue to use your javascript approach to do the job

Related