Включить / отключить кнопку отправки с кодом сервера jQuery и Coldfusion

Question

Я пытаюсь включить / отключить кнопку отправки с JQuery в моем коде. Прямо сейчас все работает, пока я не отправляю форму, она проходит проверку на стороне сервера и дает сбой, это отправляет меня на страницу ошибок с кнопкой возврата, когда я нажимаю кнопку возврата, я возвращаюсь на страницу формы и кнопка все еще отключена. Какие-нибудь мысли?

Код:

    <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>

И вот что происходит: когда я нажимаю кнопку отправки, текст меняется на "Обрабатывается...", и кнопка становится отключенной. Код сервера работает, возвращает ошибку, и я нажимаю кнопку "Назад" (либо панель браузера, либо кнопку JavaScript: history.back()). Когда я возвращаюсь на страницу формы, текст снова меняется на "Отправить", но кнопка по-прежнему отключена. Как это исправить?

Разве браузер не перезагружается полностью при нажатии кнопки "Назад"? Я что-то упускаю?

Кроме того, предположим, что ошибка на стороне сервера не может быть изменена, и я не могу просто отправить обратно в саму форму (т. Е. Отобразится страница с ошибкой). Я также проверил переменную window.submitForm, и это возвращается.

Answer 1

Я бы использовал немного другой подход к JS сам... попробуйте что-то вроде этого:

<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>

Как вы можете видеть, он немного напряжен и вызывает перезагрузку при каждой перезагрузке страницы.

Answer 2

Я почти уверен, что это известная проблема FireFox. Единственный способ обеспечить согласованное взаимодействие во всех браузерах - это не отключать кнопку и просто использовать JS, чтобы убедиться, что они не делают двойную запись. Вот мое решение, я изменяю часть вашего макета, чтобы он был более абстрактным.

<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>