Enable/disable submit button with jQuery and Coldfusion server code

问题

I am trying to enable/disable a submit button with jQuery in my code. Right now, everything works out, until I submit the form, it goes through the server-side validation and fails, this sends me to an error page with a back button, when I click on the back button I got back to the form page and the button is still disabled. Any thoughts?

Code:

    <input type="submit" value="Submit" id="SubmitBtn" name="SubmitBtn">

    <script type="text/javascript" language="javascript">
    if(typeof window.submitForm == "undefined") {
        window.submitForm = "true";
    }

    $(function() {
        $("input:submit").button().click(function() {
            var submitCheck = window.submitForm;
            $(this).button("disable").val("Processing...");
            if(submitCheck==="true") {
                $(this).closest("form").submit();
            } else {
                $("input:submit").button("enable").val("Submit");
                return false;
            }
        });
    });
    $(window).unload(function() {
        setTimeout(function() {
    $("input:submit").button("enable").val("#ATTRIBUTES.enabledText#");
}, 300);
    });
    </script>

And here is what is happening: when I click the submit button, the text changes to "Processing..." and the button becomes disabled. The server code works, returns the error, and I click on the back button (either the browser bar or a JavaScript: history.back() button). When I return to the form page, the text has changed back to the "Submit", but the button is still disabled. How do I fix this?

Does the browser not reload completely when the back button is hit? Am I missing something else?

Also, assume that the server-side error can't be changed, and I can't simply post back to the form itself (ie, the error page will show up). I have also tested the window.submitForm variable, and that comes back true.

回答1:

I'd use a slightly different approach to the JS myself.. try something along these lines:

<form id="FormId" name="FormName" action="sompage.cfm" method="post">
    ...
    <input type="submit" value="Submit" id="SubmitBtn" name="SubmitBtn">
    ...
</form>


<script type="text/javascript" language="javascript">
    $(document).ready(function(){
        /* when the script loads, set the value of the button and enable it */
        $("#SubmitBtn").removeAttr('disabled');
        $("#SubmitBtn").attr('value','Submit');
        /* when the button is clicked, submit the form */
        $("#SubmitBtn").click(function(){
            $("#SubmitBtn").attr('disabled','true');
            $("#SubmitBtn").attr('value','Processing...');
            $("form#FormId").submit();
        });
    });
</script>

As you can see it's a bit tighter, and forces a reset whenever the page is reloaded

回答2:

I'm pretty sure this is a known FireFox issue, the only way you could ensure consistent experience in all browsers is to not disable the button and just use JS to make sure they don't do a double post. Here is my solution, I change up some of your layout so that it's more abstracted.

<script type="text/javascript" language="javascript">
    $(document).ready(function(){
        var validating = false;

        if(typeof window.submitForm == "undefined")
        {
            window.submitForm = "true";
        }

        validateForm = function(that)
        {
            if(!validating)
            {
                validating = true; //So that they can't double post

                var submitCheck = window.submitForm;
                $(that).val("Processing...");

                if(submitCheck=="true")
                {
                    $(that).closest("form").submit();
                }
                else
                {
                    $(that).val("Submit");
                    validating = false;
                    return false;
                }
            }
        }

        $(window).unload(function(){
            setTimeout(function() {$("input:submit").button("enable").val("#ATTRIBUTES.enabledText#");}, 300);
            var validating = false;
        });

        $("#SubmitBtn").click(function() {
            ValidateForm(this);
        });
    });
    </script>

来源：https://stackoverflow.com/questions/5341784/enable-disable-submit-button-with-jquery-and-coldfusion-server-code

标签

jquery

coldfusion