Prevent Double Submit

Hi,

I have noticed that if the submit button is Double-Clicked i get two entries in the DB.
Unfortunately not all users have got the point that a button should only be clicked once, so I must solve this.
I was wondering if Chronoforms has a way to prevent it ?
If so how do I enable it ?
If not, ho do you suggest to solve this ?

Thanks !

BTW, your forum is protected from it, just tried to double submit this topic 😀

Hi weissmag,

ChronoForms v3 has "Submissions limit" settings on the for General tab. There doesn't seem to be any equivalent for CFv4. Which version are you using?

You can also add a JavaScript snippet to disable the Submit button. Give the button an id of submit_btn then try this in the form JS

window.addEvent('domready', function() {
  $('submit_btn').addEvent('click', function(item) {
    item.disable = true;
  });
});

NB Not tested and may need debugging.

Bob

I'm 'hi-jacking' this old thread because it relates to an issue I have. My form is working, pretty well. But the internet is slow! So, when the person presses the Submit button nothing happens for 10 - 20 seconds, and they think nothing is happening, so they press the button again. So I have several people registered twice and one three times.

How then do I prevent a double submit? I obviously don't want to disable the button, unless they've already pressed it. Is that what that snippet of could does? It didn't look like it. Another option would be to have a message box pop up. I could put a Custom Code event in the on submit. But I have no idea how to create a pop-up message box. Any direction would be helpful.

Thanks

Les

Hi Les,

Yes, that should disable the submit button when it's clicked. You need to give the button an id of 'submit_btn' (there's an IE problem if it's just 'submit').

Bob

Hi Bob,

Okay, I placed that code inside php tags in a Custom Code event, having set the button id to submit_btn. I does not prevent a double submit. So obviously I'm doing something wrong. Is that the right event?

Thanks

Les

Hi Les,

It's JavaScript and goes in a Load JS action (with no PHP tags).

Bob

I wish I could report that it worked. I took out the Custom Code event put in a Load JS in the On Load section with the code snippet. That let through 6 submits. Then I took that out and put a Load JS in the On Submit section. That let through about 6 submits.

I would be good if it worked, but it's not a deal breaker. I can manually delete the extra records.

Thanks

Les

Hi Les,

Please post a link to the form so I can take a quick look.

Bob

Thanks Bob,

http://familyconnectionsc.net/index.php/registration

Les

Hi Les,

I can't see any sign of the script snippet on the form page.

Bob

Okay, well then, let's find out why it's not getting there.

In wizard edit for the conference registration form in forms manager, under the events tab, there is a Load JS event as the first event in the On Submit section. In that Load JS event there is this code:

window.addEvent('domready', function() {
  $('submit_btn').addEvent('click', function(item) {
    item.disable = true;
  });
});

as you had so kindly provided. The button ID is set to submit_btn. The Dynamic File selection is set to No.

Following that event is another Custom Code for assigning registration fee with registration code, followed by a Db Save and a Show Thanks Message.

What else could be preventing that JS code from running?

When I check the form setting (Forms Manager -> click on form Name), under JS Validation the Enable JS Validation was set to No (default). I set it to Yes, but it made no difference in the operation of the form.

What next?

Thanks Bob

Les

Hi Les,

there is a Load JS event as the first event in the On Submit section

Please move that to the On Load event- you want it available when the page loads rather than after it is submitted.

Bob

Thanks Bob,

I tried it, and it made no difference. I can still click the button several times and they all record. Doesn't matter if the code is in On Load or On Submit, whether it's inside php tags or not. All the same.

Any other thoughts. I don't want to give up trying to solve it, but I don't want to drag it out either if it's not likely to work.

Les

Hi Les,

I still see no sign of the code in the page. It needs to be in the On Load event and it's JavaScript so doesn't need PHP tags.

Bob

Okay, I've put it back into into OnLoad and removed the php codes. I can see this code at the end of the long list of js scripts in the Head.

<script type="text/javascript">
		//<![CDATA[
			window.addEvent('domready', function() {
  $('submit_btn').addEvent('click', function(item) {
    item.disable = true;
  });
});		//]]>

But, I can still register multiple times.

Strange, strange.

Thanks
Les

Hi Les,

I don't quite know what is happening. I tried using the Chrome Debugger but the page loads quickly and if there are any errors I can't see them. I have spotted that it should be disabled

Please try this version (replacing form_name with the name of your form:

window.addEvent('domready', function() {
  $('chronoform_form_name').addEvent('submit', function() {
    $('submit_btn').disabled = true;
  });
}); 

Bob

Well Bob,

That code works fine. I cannot get a double registration. Perfect.

Except, it also disables all my validations!😲 I can now push the Register Now button (just once) without having input any data and have the registration process to completion, overriding all my required fields. The db shows that it came through without any data, just the automatic date/time and ipaddress.

So, unless this bugs you and you need to solve it, I think I'll just live with the possibility of double registrations.

Thanks for all your help.

Les

Hi Les,

Prompted by another question I've just published an Anti Flood [GH] action . That may do what you need by coming at it from another angle.

Bob

Hi Bob,

Thanks for thinking about this issue, and providing the script. I inserted a Custom Code action as the first item in the On Submit event, and placed the code from the anti_flood_gh.php file in it. I then registered myself. The registration required all the correct inputs, and it appears that the submit button only depressed once. However, I received this error message:

Remote server or file not found. Check that the address is spelled correctly, or try searching for the site

. On the error page was a Google search box with this address as the one it was trying to find:

http://familyconnectionsc.net/index.php?option=com_chronoforms&chronoform=2012_Conference_Registration&event=submit

.

I removed the Custom Code and registered and that same url reached the server.

Thanks

Les

Hi Les,

That'a making life too complex. Use the Install Action icon in the tool bar to install the Anti Flood action; then drag a copy over from the Utilities group into your On Submit event.

Bob

Indeed! Knowing about the Install Action button made life a lot easier.

I installed the Anti-flood action, and removed all previous js scripts aimed at disabling the submit button. The action keeps the form from creating multiple submits, but only in FireFox. It allows multiple submits in Opera, Chrome and IE.

To test further, I uninstalled the action, and reinstalled the js, and found the same issues - FireFox allowed only 1 submit, while the other three allowed multiple submits.

Whether that helps to know what might be going on, I don't know. But that's the latest info.

Thanks again for your interest and help.

Les

Hi Les,

Interesting, the AntiFlood action runs serverside so should not be dependent on the browser. Did you add an Event Loop action into the On Fail event of the action?

Bob

Hi Bob,

There sure are a lot of different things to watch out for. I think Chronoforms would be dead without you.

I added an Event Loop into the On Fail event. Left everything as default. It didn't allow doubles - it didn't allow anything! Came back to the form with this message at the head of the form.

I wondered if I could get more information than that, so inserted a Debugger action into the OnSubmit, and the resulting code looks fine.

Here's my OnSubmit actions:

Here's my Event Loop settings:

I'm obviously missing something.

Thanks again.

Les

ps - because this is a live site, and I want people to register, I've removed the Event Loop until I can test again.

lcb

Hi Les,

:-(

Please take a Form Backup using the icon in the Forms Manager and post it here (as a zipped file) or PM or email it to me and I'll take a closer look.

Bob

HI,

Did you guys figure this out I have the same problem?

Thanks,

Fred

Hi Les & Fred,

I screwed up and published a broken version (a bit weird as I tested it first). I have just - ten minutes ago - uploaded a fixed version.
http://greyhead.net/how-to-docs/cfv4-anti-flood-gh-action

Bob

thanks bob your the best

Bob,

It's amazing to hear such a confession from you.

I downloaded and installed the action. I can confirm that it now allows the record to be written to the database. Good. I can also confirm that I can still write multiple records to the database. An annoyance.

But please help me understand the Event Loop in the On Fail. There are 2 parameters you can set.
1) Target Event - Choose the event which will be executed. What goes in here? There is nothing in the drop-down box and the Refresh Events List does not populate it.
2) Quit next actions. If I choose Yes, then the form redisplays, the pink box with 1. in it appears at the top, and the Show Thanks Message page does not display. Kind of what I would expect. But the record(s) do get written to the database. If I choose No, then the form redisplays, the pink box with 1. in it appears at the top. The Show Thanks Message page does not display, but the contents are written of the Show Thanks Message are written at the bottom of the form, instead of on it's own page. Not what I would expect. The record(s) do get written to the database.

That's my feedback. Thanks so much for looking at this.

Les

Just a followup. I removed the On Fail and after the form was processed the Show Thanks Message showed properly. Also allowed multiple records.

Les

Hi Les,

The Event Loop action is partly broken in the current CRv4 RC3.11 release. Fully broken in that the drop-down is empty; partly broken because the default setting of '> On Load' still works and is what you need 95% of the time.

The Event Loop action redirects the process flow of the form to another event. Most often it's used to go form the On Submit Event back to the On Load event when an error is found and you want to re-display the form.

The Quit next actions option clears ChronoForms' internal actions queue - usually this is what you want. I've never tested but I image that you could set this to No, Loop to a different event - probably a custom event - run an action or two and then loop back and pick up from the same place.

For a serverside validation check - which is what the Anti Flood action is - you probably want the default settings '> On Load' + 'Yes'.

Bob