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

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"?

CodePudding user response：

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

CodePudding user response：

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  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