Question 88238 in ASP.NET Question posted in
The official documentation can be found here.

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

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

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

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

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

    Login or Signup to reply.
  3. 0

    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)
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search