0
295
ViewsHow to disable button while form is being created and to prevent duplicate form
I am trying to make it so that a "Submit" button is disabled when submitting and forwarding data from a form. This is to prevent the user from create multiple copies of the form when rapidly clicking the button when the initial data that was inputted is being saved.
One approach I tried was adding a debouncer to the JavaScript function that handles the submit button operations. However if the user continues to click the button after 5 seconds, the duplicate is still created.
I think a better approach would be to disable the button while the data is being submitted and give an indication to the user that the data is in the state of being saved, and after completion, reenable the button.
Here is the javascript code for context:
setupFormIO: function(submissionFunction) {
var $this = this;
var submitFunc = submissionFunction;
var labelText = "Submit";
if ($this.projectData && !this.readonly) {
labelText = "Save";
}
var submits = FormioUtils.searchComponents($this.template.components,
{
"type": "button"
}
);
if (submits) {
_.each(submits, function (component) {
component.label = labelText;
//
var timer;
if (timer) {
clearTimeout(timer);
}
//
if ($this.readonly) {
$("#" + component.id + " > button").on("click", function(evt) {
evt.stopPropagation();
location.assign("/project/ProjectHome.aspx");
timer = setTimeout(process, 5000); //
});
}
});
}
1 answers
Answer question0
Adding the following bits of code at strategic locations of the script that handle operations during and after the submit button is clicked helped create the desired effect.
beforeSubmit: function (submission, next) {
const btns = document.querySelectorAll('.btn');
for (const btn of btns) {
btn.disabled = true;
}
$this.isSubmitting = true;
console.log("button disabled");
if (submits) {
_.each(submits, function (component) {
console.log("renabled");
for (const btn of btns) {
btn.disabled = false;
}
$this.isSubmitting = false;
console.log("button renabled");
});
}
However this was disabling and enabling every single button on the page. Ultimately the following jquery method was used because it specifically targets the submit buttons only.
if (submits) {
_.each(submits, function (component) {
$("#" + component.id + " > button").prop('disabled', true);
});
}
window.axios.post($this.baseUri + '/validate',
submission.data)
.then(function (d) {
next();
})
.catch(function (e) {
var message = "Validation Failed:";
$this.isSubmitting = false;
if (submits) {
_.each(submits, function (component) {
$("#" + component.id + " > button").prop('disabled', false);
});
Also wanted to note that after the submit button is clicked, the page reroutes to a summary page to prevent the submit button from being clicked again.