Недавно я начал писать код в php с использованием фреймворка laravel и пытался внедрить материал в существующую страницу. Вместо того, чтобы отслеживать, как долго пользователь просматривает страницу, я пытаюсь отследить, сколько времени требуется пользователю, чтобы отправить форму, начиная с того момента, когда он впервые щелкает поле ввода.

Я создал страницу формы и возился с некоторыми простыми сценариями JS, но не смог заставить ее работать.

    <form id="form" method="POST" action="/contact">
        <div class="row">
            <div class="col-md-6  col-12">
                <input type="text" placeholder="Name  *" name="name" class="form-control input" required>
                <br>
                <input type="text" placeholder="Email *" name="email" class="form-control" required>
                <br>
                <input type="text" placeholder="Phone *" name="phone" class="form-control" required>
            </div>

Я хочу, чтобы таймер начал отсчет в тот момент, когда пользователь нажимает на одно из 3 полей ввода (имя, адрес электронной почты или телефон), а затем прекращает подсчет, когда пользователь нажимает кнопку Отправить.

-3
Sean Debenport

1 ответ

Есть несколько способов сделать это, первый и более простой - сохранить временную метку, когда происходит событие onClick, вы можете использовать функцию, подобную этой:

Отправьте время начала

Создайте начальное поле в вашей форме:

<form id="form" method="POST" action="/contact">
<input type="hidden" id="start" name="start" value="0">

Используйте эту функцию для события onclick:

function startValue(){
    const startEl = document.querySelector('#start');
    if (!startEl.value) {
        startEl.value = Date.now();
    }
}

document.querySelectorAll('.form-control').forEach(function(item){
    item.addEventListener('click',startValue);
});

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

Отправьте время в секундах

Второй способ - создать функцию startCounter и вызвать ее в событии onclick, и они используют значение в функции отправки формы:

В HTML добавьте скрытый ввод:

<form id="form" method="POST" action="/contact">
<input type="hidden" id="seconds" name="seconds">

И создать функцию, которая увеличивает

let counter = 0;
let interval = 1000;  //1 second

function startCounter(){
    if (counter === 0) {
        setInterval(function(){
            counter++;
            document.querySelector('#seconds').value = counter;
        },interval);
    }
}

document.querySelectorAll('.form-control').forEach(function(item){
    item.addEventListener('click',startCounter);
});
58595117