We Keep Coding

How 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); //
});
}
});
}

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.

jquery prevent submit and submit again on popup button click

I am trying to ,
Prevent the form Submit
Open a pop up
Submit the form again on click of Ok button of the above pop up.
I tried this ,
$('#continueForm').one('submit', function(e) {
var curr=$('input#hdncurrency').val();
var inrDiv = $("<div />");
if (curr=='INR') {
e.preventDefault();
inrDiv.ajaxDialog({
url: '#Url.Action("PopUpOnINRflow", "optionalextras")',
closeOnEscape: false,
success: function (content) {
$(content).find("#inrcontinue").click(function (e) {
inrDiv.ajaxDialog('close');
showLoader(); //TILL THIS IS WORKING
$('#continueForm').submit(); //THIS IS NOT HAPPENING AND NO CONSOLE ERRORS
});
}
});
}
else
{
$("input[type='submit']", this).val("Please Wait...").attr('disabled', 'disabled');
document.getElementById("cancelAmndment").style.visibility = "hidden";
return true;
}
});

you should replace
$('#continueForm').one
by
$('#continueForm').on

Server click executes before user click on confirmation dialog

I work with ASP.NET
I have some button "Delete" which remove users.
<asp:LinkButton ID="lnkDeleteUser" runat="server" OnClientClick="return ValidateDeleteUser();" OnClick="lnkDeleteUser_Click" CssClass=" btn btn-primary" Text="Delete"></asp:LinkButton>
My ValidateDeleteUser-function looks like :
function ValidateDeleteUser() {
if ($("#hdnNewUserFlag").val() != "Update") {
Dialogs.Alert("Please select user", null, null);
return false;
}
function okCallBack() {
return true;
}
function cancelCallBack() {
return false;
}
if ($("#hdnNewUserFlag").val() == "Update") {
Dialogs.Confirmation("Are you sure you want to Delete this User?", okCallBack, cancelCallBack, null);
}
}
where Dialogs.Confirmation - is my custom confirm-dialog.
var Dialogs = new function() {
var todo = null;
function getConfirmModalDialog(title, textBody) {
// create layout of dialog
return dialog;
};
function getConfirmationtDialog(title, msg, okCallBack, cancelCallBack, callBackObj) {
var ConfirmationDialog = $('#confirm-dialog');
if (ConfirmationDialog.length == 0) {
ConfirmationDialog = getConfirmModalDialog(title, msg);
} else {
$('.modal-title', ConfirmationDialog).html(title);
$('.modal-body', ConfirmationDialog).html(msg);
}
$('.ok-btn', ConfirmationDialog).unbind('click').click(function(e) {
e.preventDefault();
if (typeof okCallBack === "function") {
todo = okCallBack(callBackObj);
}
ConfirmationDialog.modal('hide');
});
$('.cancel-btn', ConfirmationDialog).unbind('click').click(function(e) {
e.preventDefault();
if (typeof cancelCallBack === "function") {
todo = cancelCallBack(callBackObj);
}
ConfirmationDialog.modal('hide');
});
return ConfirmationDialog;
};
this.Confirmation = function (dialogMsg, okCallBack, cancelCallBack, callBackObj) {
var dlg = getConfirmationtDialog('Confirmation', dialogMsg, okCallBack, cancelCallBack, callBackObj);
dlg.modal('show');
};
}
My problem is next : when user clicks on "Delete" Button, confirmation dialog opens and after this server side click executes, before user clicks on confirm-Ok-button.

I guess that what you want to do is make the confirm button on the dialouge dot he postback to the server and not have the link button do the postback to the server.

The problem is that you are not using a return false like this.
if ($("#hdnNewUserFlag").val() == "Update") {
Dialogs.Confirmation("Are you sure you want to Delete this User?", okCallBack, cancelCallBack, null);
return false;
}
On calling Dialogs.Confirmation, the modal gets opened and the buttons get click. But nowhere are you telling your function to wait for the click event. So after executing the JavaScript code, the server-side event will be executed.
Update: You should be returning false to the main function which calls Dialogs.Confirm. That is, ValidateDeleteUser as done above. Otherwise the main function will return true

onbeforeunload unless either the save or submit button is clicked

I want the onbeforeunload pop-up to appear unless I click on the submit or the save button. Any ideas?
So far I have this:
Drupal.behaviors.PreventNavigation = function() {
window.onbeforeunload = function () {
return "Please save your work before navigating from this page";
}
}

here is my solution:
Drupal.behaviors.PreventNavigation = function() {
var clicked = false;
$('#edit-save').click(function() {
clicked = true;
});
$('#edit-submit-application').click(function() {
clicked = true;
});
window.onbeforeunload = confirmExit;
function confirmExit() {
if (!clicked) {
return "Please Save your work";
}
}
}

Add form.submit event to make sure that post occurs before form gets submitted?

I have a form. I want to add an event handler using jquery.
$("form").submit(function blah() {
$.post('ping-me-please.php', params, function (response) {
// only submit the form once this goes through!
});
}
How can I make this happen?

Like this:
$("form").submit(function (e) {
var form = $(this);
if (!form.data('pinged')) {
e.preventDefault(); // Cancel the submit
$.post('ping-me-please.php', params, function (response) {
// only submit the form once this goes through!
// First we set the data, then we trigger the submit again.
form.data('pinged', true).submit();
});
}
}

var postWasSent = false;
$("form").submit(function blah() {
if (!postWasSent)
{
$.post('ping-me-please.php', params, function (response) {
postWasSent=True;
$("form").submit();
});
return false;
}
}