Is it possible to refresh a form only?

Question

I have a form that when is submited it posts to a div. Ok, so I found the issue that i was getting double submissions, so i tried to apply some jquery plugins i found, but they were useless because if you double clicked fast enough I still got a double submission. From those I found i saw the best way to prevent it was with

 if (this.beenSubmitted) return false;
 else
 this.beenSubmitted = true;

but then, I noticed that if the form needed to be sent again, the user would have to refresh the page in order to send it. In my case, I want them to be able to send again after is sent, (Im not contradicting myself, because it would be diferent content). To explain it better, this form post ideas. If you want to post 2 diferent ideas you would have to refresht he page to post. Preventing double submission would help from submitting the same idea twice if you clicked fast enough. So, what I did is that I added this "5000":

 if (this.beenSubmitted) return false, 5000;
 else
 this.beenSubmitted = true;

So, now it refreshed my page. But im a little picky, lol. So I find it annoying that the whole page has to refresh. What if your typing and then it refreshes. I can always lower the 5000 I know, but I still find it annoying in case you start to browse the website or to zoom in, you end up refreshed.

So, my question is, is there any way to just refresh the form? or a better way to prevent double submission that actually works for this case (that ur able to submit after a few secs) ?

this is script:

<script type="text/javascript">
$(document).ready(function(){
$("form#myform").submit(function() {
        var addcontent = jQuery('#addcontent').attr('value');

        if ( addcontent.replace(/\s/g,"") == "" ) return false;
        if (this.beenSubmitted) return false,5000;
            else
            this.beenSubmitted = true;

$.ajax({
type: "POST",
url: "post.php",
data:"addcontent="+ addcontent,
success: function(){blah blah blah, ton sof code here including pagintion here, insert into a div here also, if u need this let me know.
});
</script>

Most of that I did it from asking questinos here. My Jquery and Ajax knowledge isnt the best one.

THanks for the help =}

Disable the submit button in the submit handler, and re-load the form in the success handler of the submit. Not really sure what the issue is. — Dave Newton, Sep 19 '12 at 02:40
Your `if-else` statements are a bit of a mess. What's this `if (this.beenSubmitted) return false,5000;` — elclanrs, Sep 19 '12 at 02:43

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

Rate limiting to prevent malicious behavior in ExpressJS

The above link has something about putting a timer on the submit button so that you can't click it again within 3 seconds.

<script>
var submitTimer = new Collate(3000);
</script>
<form action="post" onsubmit="return submitTimer.idle();">

edited May 23 '17 at 12:12

Community

1
1

answered Sep 19 '12 at 03:19

Kernel James

3,752
25
32

score 0 · Answer 2 · answered Sep 19 '12 at 02:38

0

why don't u use the this.beenSubmitted = true approach and combine it with a timeout? for example after 5000ms u execute the timeout and set this.beenSubmitted to false.

answered Sep 19 '12 at 02:38

supernova

3,814
3
22
37

but if I execute the false, then i need to refresh the browser before inserting more forms. thats why i put the timer on the false and not the true. (if makes senece) – Ivan Sep 19 '12 at 03:03
sorry I don't get what you mean with inserting new forms :) i thought you would like to prevent double postings? a timeout makes perfect sense here. after the user clicks send, you block the form with this.beenSubmitted and set this.beenSubmitted to false again after xxx seconds to allow posting another idea. – supernova Sep 19 '12 at 03:14

score 0 · Answer 3 · answered Sep 19 '12 at 03:25

The statement:

  return false, 5000;

will always return 5000, the use of false is redundant and pointless.

To reset a form without reloading the page (which won't necessarily reset the form in some browsers), use a reset button or call the form's reset method. You can use an onreset listener to update the beenSubmitted property if the form is reset.

Multiple submission of a form has been an issue since forms were invented, it's usually dealt with at the server (if two identical requests are received, ignore the second).

Using script at the client is unreliable since you don't know what the server is doing and you have to guess whether or not the form needs to be resubmitted.

Is it possible to refresh a form only?

3 Answers3