Form submit Button

How can I add stop watch on form . The stop watch should start once the submit button of the form is clicked. Stop watch is created through HTML and wants to start with javascript .

This is a simple solution but it might work for you. This is some old school Tadabase programming before they had multi step forms built in. Follow these instructions to create an old school two step form 2 Step Forms | Tadabase

I built mine a little different then the tutorial. I added a form with no fields and change the Save button to Start.
stop

When I click on start the form takes me to the details page of this form. which starts the stop watch.
watch

On the details page I deleted the details component and add an HTML component and some javascript.

HTML:
<h1><time>00:00:00</time></h1>
<p><button id="start">start</button> <button id="stop">stop</button> <button id="clear">clear</button></p>

Javascript:
var h1 = document.getElementsByTagName('h1')[0],
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t;

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }
    
    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}
timer();


/* Start button */
start.onclick = timer;

/* Stop button */
stop.onclick = function() {
    clearTimeout(t);
}

/* Clear button */
clear.onclick = function() {
    h1.textContent = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
}

It’s important to note, I did not write the javascript code and it’s not perfect, search google for something that works for you but at least you have a starting point!

The Javascript seems to be a litle wonky in the Tadabase Tab so you may need to tweak it a bit.

Here is where I got the stop watch javascript from:

Javascript Stopwatch - JSFiddle - Code Playground

Thank you for your help . This gave me new idea.

1 Like