input.innerHTML czy jesteś taka możliwość?

pytanie zadane 28 grudnia 2019 w JavaScript przez Paweł123 Nałogowiec (33,500 p.)

Cześć, chciałbym, aby wynik ze stopera zapisywał się w polu Input.

Żeby cos takiego było.

Znalazłem, że trzeba ustawić wartość w polu value. Jednak ja mam tam już ustawioną wartość.

<input type="submit" value="Wyślij do bazy danych" />

Czy ktoś wie jak rozwiązać ten problem?

<!DOCTYPE HTML>
<html lang="pl">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Work Time System</title>
</head>

<body>

    <?php

    echo "<p>Witaj ".$_SESSION['user'].'! [ <a href="logout.php">Wyloguj się!</a> ]</p>';
    	
?>

    <nav class="controls">
        <a href="#" class="button" id="#start" onclick="start();">START</a>
        <a href="#" class="button" id="#stop" onclick="stop();">STOP</a>
        <a href="#" class="button" id="#clear" onclick="reset();">CLEAR</a>
    </nav>


    <div id="#timer">00:00:00:00</div>

    <form action="add.php" method="post">


        Czas pracy: <br /> <input type="text" name="time" /> <br /><br />
        <input type="submit" value="Wyślij do bazy danych" />

    </form>

    <script>
        var hour = 0;
        var min = 0;
        var sec = 0;
        var miliSec = 0;
        var timer;

        function callTimer() {
            miliSec++;
            if (miliSec < 100) {
                if (miliSec === 99) {
                    miliSec = 0;
                    sec++;
                    if (sec === 60) {
                        sec = 0;
                        min++;
                        if (min === 60) {
                            min = 0;
                            hour++
                        }
                    }
                }
            } else {
                miliSec = 0;
            }


            document.getElementById("#timer").innerHTML = hour.toString().padStart(2, "0") + ":" + min.toString().padStart(2, "0") + ":" + sec.toString().padStart(2, "0") + ":" + miliSec.toString().padStart(2, "0");
        }


        function start() {
            document.getElementById("#start").disabled = true;
            timer = setInterval(callTimer, 10);
        }

        function stop() {
            document.getElementById("#start").disabled = false;
            clearInterval(timer);
        }

        function reset() {
            stop();
            hour = 0;
            min = 0;
            sec = 0;
            miliSec = 0;

            document.getElementById("#timer").innerHTML = hour.toString().padStart(2, "0") + ":" + min.toString().padStart(2, "0") + ":" + sec.toString().padStart(2, "0") + ":" + miliSec.toString().padStart(2, "0");
        }

    </script>
</body>

</html>

2 odpowiedzi

odpowiedź 28 grudnia 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Znalazłem, że trzeba ustawić wartość w polu value. Jednak ja mam tam już ustawioną wartość.

no to skoro masz wartość to co chcesz więcej zrobić bo niezbyt rozumiem?

A tak w ogóle to po co Ci tu formularz? Skoro ten czas i tak ustawiasz w JS no to po prostu zapisuj go sobie w jakieś zmiennej, aktualizowanej cały czas i na click buttona zrób requestr na jakiś swój endpoint np. POST. A jak się upierasz przy takim tradycyjnym html'owym formularzu to po co w sumie to pole input? Po co 2 razy pokazywać czas? Zrób lepiej pole hidden z odpowiednią wartością.

Pokaż 6 poprzednich komentarzy

komentarz 28 grudnia 2019 przez Paweł123 Nałogowiec (33,500 p.)

endpointem jaki masz na serwerze

Nie rozumiem o co z tym chodzi, możesz wytłumaczyć mi jaśniej?

komentarz 28 grudnia 2019 przez Tomek Sochacki Ekspert (227,510 p.)

no masz przecież jakiś tam url na którym chcesz obsłużyć ten formularz z tego co widzę u Ciebie jest to prawdopodobnie POST add.php

komentarz 28 grudnia 2019 przez Paweł123 Nałogowiec (33,500 p.)

Tak, czyli piszę funkcje w JS, która pobiera wartość z diva i podaję endpointa, czyli adres localhost/czas_pracy/add.php w tej funkcji. Następnie wywołuję onclick tę funkcję, aby wysłać dane do bazy danych?

komentarz 28 grudnia 2019 przez Tomek Sochacki Ekspert (227,510 p.)

teraz to już zupełnie nie wiem co chcesz zrobić... przed chwilą sam mówiłeś, że nie chcesz ajaxem tylko zwykłym formem htmlowym więc po co Ci onclick :) ?