How do I add multiple timers with Ajax

Question

As you can see in the picture, I am using jquery to add a new li item everytime someone is put into the input box.

However,

I also want it to add a 2 hour countdown timer to the left of the string. I have tried multiple times but I can not get a new timer to produce.

For instance, If I say John.. Then john will have a 2 hour timer. If I wait 10 minutes after and say "pete". Now john will have a 1:50m timer and pete will have 2 hours and so on.

This is what I have so far.

Example of 1

Example of 2

<div class="container">

<form id="myform" action="whatever.php">

<input id="in" type="text" placeholder="Serial"/>
<input type="submit" />
</form>

<div class="results">
<ul class="list">
</ul>
</div>

</div>

<script>
     (function($){
$('#myform').submit(function(e){
    var val = $(this).find('#in').val();
    $('ul.list').append('<li>' + val + '</li>');
    e.preventDefault();
});
})(jQuery);
</script>

So each string will have a fresh 2 hour timer when submitted. — TaLeNT_, Apr 14 '18 at 17:57

raul.vila · Accepted Answer · 2018-04-14T18:50:35.667

Applying this answer to your code:

var twoHours = 60 * 60 * 2;

(function($){
 $('#formbutton').click(function(e){
    var val = $('#in').val();
    var counter = $('<span>');
    var item = $('<li>').text(val + ":").append(counter);
    $('ul.list').append(item);
    startTimer(twoHours, counter[0]);
 });
})(jQuery);

function startTimer(duration, display) {
    var timer = duration, hours, minutes, seconds;
    var intervalId = setInterval(function () {
        hours = parseInt(timer / 3600, 10);
        minutes = parseInt((timer % 3600) / 60, 10);
        seconds = parseInt(timer % 60, 10);

        hours = hours < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = hours + ":" +  minutes + ":" + seconds;

        if (--timer < 0) {
            clearInterval(intervalId);
        }
    }, 1000);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

<form id="myform" action="#">

<input id="in" type="text" placeholder="Serial"/>
<button id="formbutton">Submit</button>
</form>

<div class="results">
<ul class="list">
</ul>
</div>

</div>

Sorry one more question, any way to stop the timer after the time? I'm going to want to play sounds change colors etc... but the timer just constantly repeats after it reaches 0. — TaLeNT_, Apr 14 '18 at 18:45
If you cant to clear the setInterval loop, see this: https://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript#109091 (added to the snippet) — raul.vila, Apr 14 '18 at 18:48

How do I add multiple timers with Ajax

1 Answers1