Reputation: 1
I am just a newbie to programming so please be gentle.
I am working with Visual Studio Community 2015 edition. My project uses a standard asp.net MVC 5 solution template. I have a visual studio scaffolded input form that includes a create button.
I am having a problem trying to stop multiple submissions of the form due to double clicking.
I have been trying to implement a solution posted on stackoverflow a few years ago but after two days of trying I am no further forward.
The solution involves using the following jquery plugin (I must admit I do not know much about java yet!)
This jquery plugin code I am wanting to use is below and comes from this original post
Prevent double submission of forms in jQuery
jQuery.fn.preventDoubleSubmission = function() {
$('input[type="submit"]').data('loading-text', 'Loading...');
$(this).on('submit',function(e){
var $form = $(this);
$('input[type="submit"]', $form).button('loading');
if ($form.data('submitted') === true) {
// Previously submitted - don't submit again
e.preventDefault();
} else {
// Mark it so that the next submit can be ignored
$form.data('submitted', true);
$form.setFormTimeout();
}
});
// Keep chainability
return this;
};
jQuery.fn.setFormTimeout = function() {
var $form = $(this);
setTimeout(function() {
$('input[type="submit"]', $form).button('reset');
alert('Form failed to submit within 30 seconds');
}, 30000);
};
*/
The problem I am having is how to deploy the jquery plugin in my project and then how to call it when someone clicks the create button.
I have tried putting the plugin directly in the page view and also as a javascript file in the scripts folder but still cant seem to call the function to prevent double submissions.
I am trying to call the function by using the onclick property of the button but just cant get it to run. Does anyone have a memory of the previous solution and how to implement it in an ASP.NET MVC 5 cshtml view button click?
(Where do I put the plugin code and how do I call it from the create button)
Many thanks
Upvotes: 0
Views: 605
Reputation: 82
Use This code in jquery side is prevent double click
$(document).on('submit', 'form', function () {
var button = $(this).find('input[type="submit"]');
setTimeout(function () {
button.attr('disabled', 'disabled');
}, 0);
});
If Not valid post time your form and validation after
//disabled Multiple Click Event on form
$(document).on('invalid-form.validate', 'form', function () {
var button = $(this).find('input[type="submit"]');
setTimeout(function () {
button.removeAttr('disabled');
}, 1);
});
Upvotes: 0