как реализовать таймер обратного отчета на form т.е если время вышло отправить форму?

236

20 апреля 2022, 01:10

есть вопросы которые появляются один за одним у всех есть 30 сек времени, нужно если время вышло чтобы ответ не засчитывался

if(время вышло){
  //убираем required который не дает отправить форму без выбора ответа
  //и нажимаем програмно отправить т.е форму
  $('.next').click();
  //чтобы перейти на следующий вопрос
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block-test">
    
    <h2>{{$question->question}}</h2>
    
    <form>
        <div class="wrap-options">
            <div class="options">
                <h3>{!!$question->example!!}</h3>
                <div class="wrap-option">
                    <input class="option" type="radio" name="option" value="a" required><h3 class="option">{{$question->a}}</h3>
                </div>
                <div class="wrap-option">
                    <input class="option" type="radio" name="option" value="b"><h3 class="option">{{$question->b}}</h3>
                </div>
                <div class="wrap-option">
                    <input class="option" type="radio" name="option" value="c"><h3 class="option">{{$question->c}}</h3>
                </div>
                <div class="wrap-option">
                    @if($question->d)
                    <input class="option" type="radio" name="option" value="d"><h3 class="option">{{$question->d}}</h3>
                    @endif
                </div>
            </div>
        </div>
        <button type="submit" data-order="{{$question->order}}" class="btn btn-info next">Next</button>
    </form>
    
</div>

Answer 1

Можно использовать setTimeout, только установить нужное время:

const secondsToAnswer = 5; // Количество секунд для ответа
  
let timeLeft = secondsToAnswer;
const timer = setInterval(function(){
  if (timeLeft > 0) { // На последней секунде
    $('.timer').text(timeLeft + ' сек');
    timeLeft--;
  } else {
    $('.timer').text('Время вышло');
    clearInterval(timer);
    
    $('input[name="option"]').removeAttr('required');
    $('.next').click();
    alert('Go to next page');
  }
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block-test">
    
    <h2>{{$question->question}}</h2>
  
    <div class="timer"></div>
    
    <form>
        <div class="wrap-options">
            <div class="options">
                <h3>{!!$question->example!!}</h3>
                <div class="wrap-option">
                    <input class="option" type="radio" name="option" value="a" required><h3 class="option">{{$question->a}}</h3>
                </div>
                <div class="wrap-option">
                    <input class="option" type="radio" name="option" value="b"><h3 class="option">{{$question->b}}</h3>
                </div>
                <div class="wrap-option">
                    <input class="option" type="radio" name="option" value="c"><h3 class="option">{{$question->c}}</h3>
                </div>
                <div class="wrap-option">
                    @if($question->d)
                    <input class="option" type="radio" name="option" value="d"><h3 class="option">{{$question->d}}</h3>
                    @endif
                </div>
            </div>
        </div>
        <button type="submit" data-order="{{$question->order}}" class="btn btn-info next">Next</button>
    </form>
    
</div>