C# MVC BeginForm Disable Button after Submit

Question

I have c# begin form with file upload that looks like this:

@using (Html.BeginForm("New", "Post", FormMethod.Post, new { @class = "form-inline", role = "form", id = "newPostForm", enctype = "multipart/form-data" }))
  {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(c => c.Post.MinuteID)
    @Html.HiddenFor(c => c.Post.UserID)
    @Html.TextBoxFor(m => m.PostImage, new { type = "file", name = "PostImage", id = "PostImage", accept = "image/*", @class = "file-input imageInput" })
    <button id="postBtn" type="submit" class="btn btn-primary btn-block intbtn">Post&nbsp;</button>
  }

This one perfectly works but I want to add some jquery scripts to disable the button and fields when the submit button is clicked. But after doing so, the form submitted becomes empty when it hits my controller. What am I doing wrong? This is my javascripts:

$('#postBtn').click(function () {
    $('.imageInput').prop("disabled", true);
    $('#postContent').prop("disabled", true);
    $('#btnText').text('Saving..   ');
    $('#postBtn').prop("disabled", true);
    //$('#newPostForm').submit(); -- i tried adding this and changing my button type to 'button' but still empty form values are submitted
});

The reason im doing this is to prevent the button to be clicked multiple times (multiple post), how do I fix this or if there's a better approach to prevent multiple post I'd love to take some suggestions. I want to have a loading effect though thats why I prefer javascript.. I can do this in ajax.post but I heard enctype = multipart/form-data doesnt work with ajax. Any help is appreciated.

The problem is you are disabling all inputs before submitting the form and disabled inputs can't be submitted. — Kartikeya Khosla, Apr 13 '16 at 05:22
Instead of disabling all inputs..just disable the submit button. — Kartikeya Khosla, Apr 13 '16 at 05:23
...or you wrap the disable in `setTimeout(function(){ ... }, 0);` This way, the disable will occur after the form is serialized. — Mattias Åslund, Apr 13 '16 at 05:33
You should run that code for form.onsubmit() instead of for the button click btw, so it happens even if the user simply pressed ENTER to send to form.. — Mattias Åslund, Apr 13 '16 at 05:35
@KartikeyaKhosla thank you, can you post your comment as the answer so I can select it. I didnt know disabled inputs are not submitted. — super-user, Apr 13 '16 at 05:36

score 0 · Accepted Answer · edited May 23 '17 at 11:53

0

The submitted form is empty because you are disabling the inputs inside $('#postBtn').click(... handler and disabled input can't be submitted that is why you have empty form in httppost controller action.

Instead of disabling inputs just disable the submit button in order to stop multiple clicks.

Reference.

edited May 23 '17 at 11:53

Community

1
1

answered Apr 13 '16 at 05:42

Kartikeya Khosla

18,743
8
43
69

C# MVC BeginForm Disable Button after Submit

1 Answers1