CODEWITHSUNDEEP
asp.net-mvcjquery-pluginsdouble-submit-problem
Trevor
Trevor

Reputation: 1

how to use a jquery plugin in an asp.net mvc 5 view button click

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

Answers (1)

Parin Patel
Parin Patel

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

Related Questions