Disable "submit" button after form validation

Question

I have a form like this

@using (Html.BeginForm("action", "controller", FormMethod.Post, new { id = "_identity" }))
{
// element here

 <input class="buttonblue" type="submit" value="Save" id="Submit1" />
}

It is validate by Model.

It's working fine. And now I want to detect if this request is reached at controller action after validate.

Actually I want to disable submit button when request is reached at controller.

I have tried following. But I think this is not correct.

 $('#_identity').submit(function () {
     $("#Submit1").val("Saving...");
     $("#Submit1").attr('disabled', 'disabled');
 });

This is called before request reached at controller and before validate.

I want simple thing if form is validated and request reached at controller then user can't hit submit button again.

What would be the point? - you are submitting the form to the controller so even though you disable the button, you have left the page (unless you submit using ajax) and you would be rendering a new page. — , Jan 28 '15 at 11:13
I want simple thing if form is validated and request is reached to controller then user can't click again. @StephenMuecke — Manoj, Jan 28 '15 at 11:16
If you submit the form and its validated on the server, then redirect somewhere else (e.g. to a details page). What would be the point of returning to the same view when it cant even be edited! And if you did want to do this, then assign a `ViewBag` property indicating success, then use javascript to read it and disable the button (but it would make no sense at all to do this) — , Jan 28 '15 at 11:20

score 2 · Accepted Answer · edited May 23 '17 at 10:29

2

I have resolved this.

Using

  $('#_identity').submit(function () {
            if ($(this).valid()) {
                $(':submit', this).attr('disabled', 'disabled');
                $(':submit', this).val('Saving...');
            }
        });

I have found it Here

edited May 23 '17 at 10:29

Community

1
1

answered Jan 28 '15 at 11:56

Manoj

4,951
2
30
56

Ehsan Sajjad · Answer 2 · 2015-01-28T11:49:30.540

0

Use Ajax.BeginForm this way:

@using (Ajax.BeginForm("action", "controller", new AjaxOptions{ HttpMethod ="Post",OnBegin ="OnBegin",OnSuccess="OnSuccess",OnFailure="OnFailure"},new { id = "_identity" }))
{
// element here

 <input class="buttonblue" type="submit" value="Save" id="Submit1" />
}

and js :

<script type="text/javascript">

    function OnBegin() {

        // disable submit button here
    }

    function OnSuccess() {

        // enable submit button here
    }

    function OnFailure() {

        // enable submit button in case of failure
    }

</script>

edited Jan 28 '15 at 11:49

answered Jan 28 '15 at 11:22

Ehsan Sajjad

61,834
16
105
160

These functions aren't calling – Manoj Jan 28 '15 at 11:37
check jquery-unbotrusive is included or not – Ehsan Sajjad Jan 28 '15 at 11:49

Disable "submit" button after form validation

2 Answers2