Реализация временного disable кнопки submit между кликом и отработкой ajax сценария

Ekklipce

Новичок
Всем привет!
Из всех вариантов/реализаций "работает" только код ниже, и оно то работает, но реализация мне не нравится от слова вообще, ибо по хорошему enable кнопки должно быть в конце секции success (что как бэ более чем логично), но в том месте оно как раз и не работает. И вообще enable нигде не работает кроме как вставить в settimeout. При этом если куда-то вставить alert, то счётчик settimeout забьёт на это, а ajax подождёт, в итоге логичный рассинхрон.
C jQuery столкнулся недавно (да равно как и к кодингу временно вернулся ненамного раньше)..

Код:
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#send2").on('click', function()
        {
            $("#form1").off('submit').on('submit', function()
            {
                event.preventDefault();
 
                timeSlideDown = 200;
                timeSlideUp = 400;
                timeDelay = 2000;
 
                allDelay = timeSlideDown + timeSlideUp + timeDelay;
 
                $("#send2").prop('disabled', true);
                setTimeout(function() {
                    $("#send2").prop('disabled', false);
                }, allDelay);
 
                $.ajax({
                    type: $(this).attr('method'),
                    url: 'form.php',
                    data: $(this).serialize(),
                    async: false,
                    cache: false,
                    dataType: "html",
                    success: function(result) {
                            // alert('step 3`');
                            $("#result2").html(result);
                            $("#result2").slideDown(timeSlideDown).delay(timeDelay).slideUp(timeSlideUp);
                            // $("#send2").prop('disabled', false); -вот тут оно не работотает
                    },
                    error: function(xhr, status, error){
                             var errorMessage = xhr.status + ': ' + xhr.statusText;
                             //alert('ErrorXHR - ' + errorMessage + '\n' + 'Error - ' + error);
                             console.log('ErrorXHR: ' + errorMessage);
                             console.log('Error: ' + error);
                             alert('ajax error end');
                    }
                });
            });
        });
    });
</script>
</head>
<body>
    <form method="post" id="form1">
        <button type="submit" id="send2">Отправить</button>
    </form>
    <br />
    Инфо: <p id="result2"></p>
</body>
</html>
файл form.php с любым echo..
 

Valick

Новичок
PHP:
<?php
if ($_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest') {
    sleep(5);
    $response = 'ответ сервера ' . random_int(0,100);
    echo $response;
    exit();
}
?>
<html>
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('form').submit(function(event) {
                var button = $(this).find('input[type=submit], button[type=submit]');
                button.prop('disabled', true);
                event.preventDefault();
                $.ajax({
                    type: $(this).attr('method'),
                    url: 'ajax_form.php',
                    cache: false,
                    success: function(result) {
                        $("#result").html(result)
                        button.prop('disabled', false);
                    },
                });
            });
        });
    </script>
</head>
<body>
<form>
    <button type="submit">Отправить</button>
</form>
<br/>
Инфо: <p id="result"></p>
</body>
</html>
 

AmdY

Пью пиво
Команда форума
Откройте консоль, посмотрите ошибки, поставьте брейкпойнты и отдебажте код. Скорее всего ошибка где-то и не доходит до вашего кода.
И не забывайте раздисейблить кнопку не только в случае успеха, но и после ошибки, чтобы пользователь мог повторно отправить.

 

Ekklipce

Новичок
Откройте консоль, посмотрите ошибки, поставьте брейкпойнты и отдебажте код. Скорее всего ошибка где-то и не доходит до вашего кода.
Попробую. Ранее брейкпоинтами были расставленые в хронологическом порядке алерты, результат их меня крайне удивил.

И не забывайте раздисейблить кнопку не только в случае успеха, но и после ошибки, чтобы пользователь мог повторно отправить.
Это логично, но это мы всегда успеем, абы в саксесе он рулил.

Пасиб на наводку.
 
Сверху