Jithin
Jithin

Reputation: 43

Avoid Simultaneous clicks of buttons in MVC

I have a MVC web application with two buttons - Save and Submit. When a user first Submits and simultaneously clicks the Save button as soon as he clicks the submit button there is a error in the data send.

I am pretty new to programming and hence have no idea how can i avoid the simultaneous clicks.

Any suggestions on how i can handle this?

Thanks

Upvotes: 1

Views: 200

Answers (3)

Jean Gatto
Jean Gatto

Reputation: 21

Simple solution with jQuery:

 $("[type='submit']").on("click", function (e) {

        // !!!IMPORTANT!!!
        e.preventDefault();

        var $self = $(this), $form = $self.closest("form");

        // Valid - before submit
        if ($form.valid()) {

            // Update text in button, ex: Sending..., Loading...
            $self.attr("disabled", "disabled").html("<i class='fa fa-spinner fa-pulse fa-lg fa-fw' aria-hidden='true'></i>Loading...");

            // Block all inputs.
            $form.find(":input:not([type=hidden])").attr("readonly", "readonly");

            // Submit form.
            $form[0].submit();
            return true;
        }
        // !!!IMPORTANT!!!
        return false;
    });

Upvotes: 0

Gauravsa
Gauravsa

Reputation: 6524

You can do the following:

  1. Have Submit button as “Submit” button (rendered in html as input type=“submit”)
  2. Have Save button as normal button.

To have Save button rendered as normal button (rendered as input type=“button” you can have UseSubmitBehavior: False.

You can then use OnClientClick on one of the buttons and prevent the other button from being clicked. Here you can get creative also. You can disable the clicked button and show “Saving ...” like below:

// its a button or document.getElementById
if (button.getAttribute('type') == 'button') {

button.disabled = true;
button.className = "inactive class";
button.value = "Saving, please wait. Have some peanuts while we save...";

Upvotes: 1

Roszparka
Roszparka

Reputation: 21

Try disabling the Save button in the code of the Submit button HTML onclick=" ... "

Upvotes: 0

Related Questions