ASP.NET JQuery, disabled a button on form submit not call httpPost action

Question

I'm working in an ASP.NET MVC app and I want to disable a button when during OnSubmit event of the form, just for prevent double click of the users. All JQuery part is working fine but I don't understand why, when I disabled the submit button, it always call the default Action of my controller.

Here is the cshtml code:

@using(Html.BeginForm()){
  <input type="submit" value="Submit"/>
}
<script>
$(function(){
  $("form").submit(e=>{
    $('input[type="submit"]').prop("disable",true)
  })
})
</script>

The JQuery part works and make the button disabled.

My controller:

public class MyController:Controller{
  public ActionResult MyController(ExampleModel model){
    return View(model);
  }
  [HttpPost,ActionName("MyController")]
  public ActionResult FormSubmmit(ExampleModel model){
    //Do some checks
    return View(model);
  }
}

The case is that if I make the button disabled, the form always call the action 'MyController' instead of the action FormSubmit (is which I want to call). Do somebody know why can be the reason of this "error"?

"The case is that if I make the button disabled, " How do you submit form without a submit button? — Serge, Oct 22 '21 at 18:21

score 0 · Answer 1 · answered Oct 22 '21 at 18:25

0

try this

@Html.BeginForm("FormSubmit", "My", FormMethod.Post) {
  <input type="submit" value="Submit"/>
}

and remove [HttpPost,ActionName("MyController")] from the action, it is a very strange attribute

answered Oct 22 '21 at 18:25

Serge

40,935
4
18
45

Hello! Thanks for answer this!! But I can not use this solution because the app logic is a little bit strange and ther are calling diferent actions that return the same view, because they divide the view into sections and each action just change the section of the view to show, that is why the ActionName attribute is used. – bateye Oct 25 '21 at 08:22

score 0 · Answer 2 · edited Oct 25 '21 at 08:13

This is a fast and reliable way of disabling the button to prevent any "Double click"

 <form ... onsubmit="myButton.disabled = true; return true;">
        ...
        <input type="submit" name="myButton" value="Submit">
    </form>

You can see the source here

Another way of doing this when submitting is to do an overlay and then redirect function(Optional, I use it to stop the overlay and just to basically inform the user that the function is done)

HTML:

<input type="submit" onclick="return FunctionOverlay(this);" />

<script>

        function FunctionOverlay(btnElement) 
            {
           
                showOverlay(btnElement);              
                $('#myForm').submit();
            }
        

    </script>

JS:

function showOverlay(buttonElement) {
    $(buttonElement.parentNode).css('position', 'relative');
    $bgColor = $(buttonElement).attr('data-overlay-color');
    if ($bgColor === undefined) {
        $bgColor = '#fff';
    }
    $(buttonElement.parentNode).append('<div class="button-overlay" style="background-color:' + $bgColor + ';"><img src="images/blahblah.gif" /></div>'); //.css('background-color', $bgColor)
}

You can use this to create your own overlay GIF and then in your controller where you are calling the Method you can end it with

return View("ButtonClicked");

and in your home page create a cshtml ButtonClicked.cshtml

and just create a landing page where you can insert some text for example:

<div class="row">
    <div class="col">
      <p>  Thank you for clicking</p>
       
    </div>
    
</div>

Another option is doing an overlay with a timeout

$('form').submit(function () {
        var button = $('#button');
        var oldValue = button.value;
        var isDisabled = true;

        button.attr('disabled', isDisabled);

        setTimeout(function () {
            button.value = oldValue;
            button.attr('disabled', !isDisabled);
        }, 3000)
    });

score -1 · Accepted Answer · answered Oct 25 '21 at 09:07

Firstable, thank for answer! And I just find the solution.

The problem of the code was if I use disabled it change the request metadata during the form submit event, so I can not make the button disabled.

I fount this solution, it just take off the pointer events from the button and then it prevent the double submit problem.

$('input[type="submit"]').css("pointer-events","none")

ASP.NET JQuery, disabled a button on form submit not call httpPost action

3 Answers3