Question

I have an controller which has check like that

if (form["submit"].ToString() == "Continue")
{

}

and i have button which is doing submit

<button name="submit" value="Continue">Continue</button>

It was all working well until i decided to disable Continue button on submit to prevent double click using this function:

$('form').submit(function () {
                if ($(this).valid()) {
                    $(':submit', this).attr('disabled', 'disabled');
                }
            });

So now i don’t get value form["submit"] posted on controller.

Any thoughts how may i fix that?

I want still prevent second click but be able to get form["submit"] value posted on controller.

Answer 1

Can you control the submit value in a hidden field in the form? I can’t tell what other logic you might need, but when the form renders, you could set the hidden field’s value to the submit button’s value and change it when necessary using the first script below. As long as it has a name attribute and is enabled (which you’d rarely disable a hidden field) then it will post when the form is submitted.

$(function() {
    // this assumes your button has id="myButton" attribute
    $(':hidden[name="submit"]').val($('#myButton').val());
});

And of course in your form, you would need a hidden field with name=”submit”

<input type="hidden" name="submit" value="Continue" />

Then, whenever the state of your form changes, modify the disabled state of the button and the value of the hidden field to reflect the value (if it changed at all).

There are also frameworks you may find useful for UI features like this. KnockoutJS comes to mind. It can be used to “value” bind input elements. It’s probably overkill for this small example, but it could be useful if your UI expands. I’ve added markup, script and comments below if you’re interested.

$(function () {
    var viewModel = {
        submitValue: ko.observable("Continue")
    };

    ko.applyBindings(viewModel);

    $('form').submit(function() {
        if($(this).valid()) {
            // the following line will change the both the hidden field's value
            // as well as the button's value attribute
            viewModel.submitValue("some other value");

            // I couldn't follow your selector here, but please note I changed 
            // the name of the submit button in the markup below.
            $(':submit, this).attr('disabled', 'disabled');
        }
    });
});

KnockoutJS requires you use the data-bind attribute to setup your elements. In your case, you’d bind one property to multiple elements like this:

<button name="submitButton" data-bind="value: submitValue"/>Continue</button>
<!-- and bind the same value similarly in the hidden field-->
<input type="hidden" name="submit" data-bind="value: submitValue"/>