How to disable button or change value after form submit

Question

I have this code on my View

<h2>@ViewBag.FileContent</h2>
@using (Html.BeginForm("ShowWebSiteLinks", "Home"))
{            
        <label>WebSite URL:</label>            
        <input type="text" id="ft" name="fturl" value="http://localhost/search/?sr=100" style="width:350px"><br>

        <label>Save to file:</label>            
        <input type="text" id="filename" name="links_filename" value="links.txt"  style="width:200px"><br>
        <input id="btnSubmit" type="submit" value="Start" />                           
}

After i click on submit button, controller call function fine, but submit button stays enabled. I want to prevent multiple clicks on button and want to disable it but not sure how. Ive tried with this javascript but it does not work.

$(document).ready(function () {
    $('btnSubmit').click(function (e) {
        $(this).attr('disabled', true);
    });
});

Can someone help me with this?

juanvilla · Accepted Answer · 2014-03-08T19:06:15.050

5

Your javascript is almost correct, but the selector is wrong. Try this:

$(document).ready(function () {
    $('#btnSubmit').click(function (e) {
        $(this).prop('disabled', true);
    });
});

Notice the "#" in the selector. This tells jQuery to find by element ID. If you don't put the "#" it will find by element name (i.e. "input", "div", etc...)

Edit:

Here's a good cheat sheet on selectors: http://refcardz.dzone.com/refcardz/jquery-selectors

Edit 2:

Update to use "$(this).prop(...)" rather than "$(this).attr(...)"

Edit 3:

I recommend you place your javascript code at the end of the page (not the head). Something like this:

<html>
    <head>[...]</head>
    <body>
        [...]
        <script type="text/javascript">
        $(document).ready(function () {
            $('#btnSubmit').click(function (e) {
                $(this).prop('disabled', true);
            });
        });
        </script>
    </body>
 </html>

edited Mar 08 '14 at 19:06

answered Mar 08 '14 at 18:48

juanvilla

196
4

Ah i forgot to add hash. Ive tryed again but still does not work. After click, button is still enabled. I dont really understand page structure of razor view. Ive try to add tags and inside that script. Wherever i add that javascript on page it does not work. – msharank Mar 08 '14 at 19:04
Try using $(this).prop('disable', true) rather than attr – juanvilla Mar 08 '14 at 19:05
To debug your javascript I highly recommend using something like the Firefox Browser with the Firebug plugin. You can then see how your JS is being loaded and you can even debug it line by line. – juanvilla Mar 08 '14 at 19:07
Same result with prop. its still enabled. Thanks ill try with Firebug. – msharank Mar 08 '14 at 19:11
I dont know why it wont work with document ready event. When i add onclik="onBtnClick();" works fine. $('#btnSubmit').attr("disabled", true).val("wait..."); – msharank Mar 08 '14 at 20:00
Have you loaded the jQuery library? The $(...) syntax is actually a function of the jQuery library (http://jquery.com/). You need to make sure this library is loaded (i.e. add a link to the js static file from your server or use the CDN version). – juanvilla Mar 08 '14 at 21:41

score 0 · Answer 2 · edited May 23 '17 at 11:46

The above answer isn't working for me. I've noticed that if you bind to the click event and immediately disable, you'll actually prevent the form submission from happening.

Instead, I do the following:

<script type="text/javascript">
$(document).ready(function () {
    $('#btnSubmit').click(function (e) {
        $(this).prop('hidden', true);
    });
    $('#myform').bind('invalid-form.validate', function () {
        $('#btnSubmit').prop('hidden', false);
    });
});
</script>

That hides your submit button when the action is clicked but still allows the action to go through. The second statement is there to re-show the button if validation fails. More details on that can be found here: ASP.net MVC Validation Hook

How to disable button or change value after form submit

2 Answers2