I'm working on project WebApplication to solve rubick cube for speedcubers. I need to display realtime stopwatch in jsp view. First idea was to implement stopwatch in JS and then send value to controller, I've got problem with getting js parameter (stopwatch finish time), to java controller. My question is, is it possible to implement stopwatch in java, works on jsp buttons, or any idea how to save value in controller from jsp.

//edit

made hidden form, and set the finish value of time to form.

After click submit button, it sends value to database, but the empty slot. No idea why.

My code, javascript stopwatch:

<script>
let [milliseconds,second,minute,] = [0,0,0];
let timerRef = document.querySelector('.mainTime');
let int = null;

document.getElementById('start').addEventListener('click', function(event){
    if(int!==null){
        clearInterval(int);
    }
    int = setInterval(mainTime, 10);
});

document.getElementById('stop').addEventListener('click', function (event){
    clearInterval(int);
    let stringDoZapisuWBazie = document.querySelector('div.mainTime').innerHTML;
    console.log(stringDoZapisuWBazie);
    document.getElementById('timeValue').value=stringDoZapisuWBazie;


});

document.getElementById('reset').addEventListener('click', function (event){
    clearInterval(int);
    [milliseconds,seconds,minutes,hours] = [0,0,0];
    timerRef.innerHTML = '00 : 00 : 00';
});

function mainTime(){
    milliseconds+=10;
    if(milliseconds == 1000){
        milliseconds = 0;
        second++;
        if(second == 60){
            second = 0;
            minute++;
            if(minute == 60){
                minute = 0;
            }
        }
    }

    let m = minute < 10 ? "0" + minute : minute;
    let s = second < 10 ? "0" + second : second;
    let ms = milliseconds < 10 ? "00" + milliseconds : milliseconds < 100 ? "0" + milliseconds : milliseconds;
    timerRef.innerHTML = m + ' : ' + s + ' : ' + ms;
}

html: `

Strona główna

<div id="scramble">
    <h2>${mixAlg.scrambleValue}</h2>
</div>

<div id="mainstopwatch">
    <div class="mainTime">
        <span id="mainminute">00</span>
        <span id="mainsecond">00</span>
        <span id="milliseconds">00</span>
    </div>

    <br>
        <div id="timeButtons">
                <form action="/solve/main" method="get">
                    <button id="reset" type="submit" name="reset" value="newScramble">new scramble</button>
                </form>
                    <button id="start" name="start" value="start">Start</button>
                    <button id="stop" name="stop" value="stop">Stop </button>

        </div>
</div>
<div id="addTime">
    <p>Podaj swój czas</p>
    <form:form method="post" action="/solve/add" modelAttribute="timeValue">
        <form:hidden id="timeValue" path="timeValue"></form:hidden>
        <button type="submit">Wyślij</button>
    </form:form>
</div>

Controller

    public String addTime(Model model){
        model.addAttribute("timeValue", new Time());
        return "addTime";
    }
    @PostMapping("/add")
    public String saveTime(Time time){
        timeService.saveTime(time);
        return "redirect:/solve/main";
    }```