How to avoid multiple form submissions

A quite common issue that RSForm!Pro users encounter is having multiple identical submissions, made by the same form submitter. This usually happens when the form submitter is not sure whether the form got submitted or not, and clicks on the Submit button at least once more after the first submission.

Given RSForm!Pro's extensive flexibility in terms of customizations, this can be avoided using a little bit of custom scripting.

How to fix this

The solution to this problem is quite simple. We will be dynamically altering the form's Submit button after it gets clicked once by hiding it using Javascript and replacing it with a stylized (through CSS) Processing ... message.

Form Layout

Since each form is different, we will be demonstrating this on what is at hand for everyone - the RSForm !Pro example, leaving you to adapt the implementation for your own, custom form.

Before we get started, make sure to not use an AJAX validation for your form. Head to Components >> RSForm!Pro >> Manage Forms >> edit your form >> Properties >> Form Info, set Use AJAX Validation to No.

Head to Components >> RSForm!Pro >> Manage Forms >> edit your form >> Properties >> Form Layout, set Auto Generate Layout to No and replace this code:

<div class="rsform-block rsform-block-submit">
  <div class="formControlLabel">{Submit:caption}</div>
  <div class="formControls">
    <div class="formBody">{Submit:body}<span class="formValidation">{Submit:validation}</span></div>
    <p class="formDescription">{Submit:description}</p>
  </div>
</div>

with this one:

<div class="rsform-block rsform-block-submit">
<span id="overlap">Processing...</span>
<span id="submit-section">
  <div class="formControlLabel">{Submit:caption}</div>
  <div class="formControls">
    <div class="formBody">{Submit:body}<span class="formValidation">{Submit:validation}</span></div>
    <p class="formDescription">{Submit:description}</p>
  </div>
</span>
</div>

Custom Code

There are 3 components associated with this step in the customization process: the CSS code meant to stylize the Submit button's replacement, the Javascript code that will hide the Submit button, and the button's HTML attribute that will activate the Javascript code.

CSS

Head over to Components >> RSForm!Pro >> Manage Forms >> edit your form >> Properties >> CSS and Javascript tab and add the following code in the CSS textarea:

<style type="text/css">
#overlap{
display:none;
width: 100%;
height: 30px;
background-color: #000000;
color: #FFFFFF;
font-size: 20px;
padding-left: 10px;
padding-top: 10px;
}
</style>

This is the code that will style the span that will replace the Submit button once it's clicked.

Javascript

In the same tab, scroll down to the Javascript textarea and add the following code:

<script type="text/javascript">
function showProcessing(){
document.getElementById('overlap').style.display = "block";
document.getElementById('submit-section').style.display = "none";
}
</script>

This function, when called, will hide the Submit button and replace it with a stylized message.

Calling the function

Now, head over to Components >> RSForm!Pro >> Manage Forms >> edit your form >> Components >> edit the Submit button >> Attributes and add the following line of code in it's Additional Attributes field:

onclick="showProcessing();"

This will call our custom showProcessing() Javascript function when the Submit button gets clicked.

Special Case - With AJAX validation

If you wish to use an AJAX validation, the Javascript code will need some adjustments. Instead of the Javascript provided above, please add this one in Components >> RSForm!Pro >> Manage Forms>> edit your form >> Properties >> CSS and Javascript >> Javascript textarea:

<script type="text/javascript">
function hideProcessing(){
document.getElementById('overlap').style.display = "none";
document.getElementById('submit-section').style.display = "";
}

function showProcessing(){
document.getElementById('overlap').style.display = "block";
document.getElementById('submit-section').style.display = "none";

setTimeout('hideProcessing()', 5000);
}
</script>

20 persons found this article helpful.

You Should Also Read