1

I found some code to put a stopwatch on a site page. I want the user to enter their name and the task they are performing and start the timer.

When they stop the timer I want the Name, Task and Time to be sent to a list. I have the Name and Task going to the list but not the time.

Can anyone take a look at my script and tell me what I have to do to write my stopwatch time to the list with the Name and Task?

<div>  
    <p><label style="width: 100px; height: 50px; font-size: large; font: bold;">Your Name</label> 
    <input type="text" id="txtName" style="width: 150px;" /></p> 
    <p><label style="width: 100px; height: 50px; font-size: large; font: bold;">Task</label>
    <input type="text" id="txtTask" style="width: 150px;" /></p> 
    <input type="button" onclick="startWatch()" value="START" />
    <input type="button" onclick="stopWatch()" value="STOP" />
    <input type="button" onclick="resetWatch()" value="RESET" />
    <input type="button" id="btnSave" value="Save" onclick="createListItem();" />
</div>
<p id="res"><span id="min">0</span> : <span id="sec">00</span> : <span id="msec">000</span></p>


<script type="text/javascript">
var timer = null;
var min_txt = document.getElementById("min");
var min = Number(min_txt.innerHTML);
var sec_txt = document.getElementById("sec");
var sec = Number(sec_txt.innerHTML);
var msec_txt = document.getElementById("msec"); 
var msec = Number(msec_txt.innerHTML);
function stopTimeMilliseconds(timer) {
    if (timer) { 
        clearInterval(timer);
        return timer;
    }
    else return timer;
}
function startTimeMilliseconds() {
    var currDate = new Date();
    return currDate.getTime();  
}
function getElapsedTimeMilliseconds(startMilliseconds) {
    if (startMilliseconds > 0) {
        var currDate = new Date();
        elapsedMilliseconds = (currDate.getTime() - startMilliseconds);
        return elapsedMilliseconds;
    }
 else {
    return elapsedMilliseconds = 0;
    }
}
function startWatch() { 
    // START TIMER
    timer = stopTimeMilliseconds(timer); 
    var startMilliseconds = startTimeMilliseconds();
    timer = setInterval(function() { 
        var elapsedMilliseconds = getElapsedTimeMilliseconds(startMilliseconds); 
        if (msec < 10) {
            msec_txt.innerHTML = "00" + msec; 
        }
        else if (msec < 100) {
            msec_txt.innerHTML = "0" + msec;
        }
        else {
            msec_txt.innerHTML = msec;
        }
        if (sec < 10) {
            sec_txt.innerHTML = "0" + sec;
        }
        else {
            sec_txt.innerHTML = sec; 
        }
        min_txt.innerHTML = min; 
        msec = elapsedMilliseconds;
        if (min >= 59 && sec >=59 && msec > 900) {
            timer = stopTimeMilliseconds(timer);
            return true;
        }
        if (sec > 59) {
            sec = 0;
            min++;
        }
        if (msec > 999) {
            msec = 0;
            sec++;
            startWatch();
        }
    }, 10);
}
function stopWatch() {
    // STOP TIMER
    timer = stopTimeMilliseconds(timer);
    return true;
}
function resetWatch() {
    // REZERO TIMER
    timer = stopTimeMilliseconds(timer);
    msec_txt.innerHTML = "000"; 
    msec = 0;
    sec_txt.innerHTML = "00"; 
    sec = 0;
    min_txt.innerHTML = "0"; 
    min = 0;
    return true;
}

function createListItem() {  
    var siteUrl = 'My Site URL Goes Here';
    var name = document.getElementById('txtName').value; 
    var task = document.getElementById('txtTask').value; 
    var time = document.getElementById('min').value; 
    var clientContext = new SP.ClientContext(siteUrl);  
    var oList = clientContext.get_web().get_lists().getByTitle('Time Keeper');          
    var itemCreateInfo = new SP.ListItemCreationInformation();  
    this.oListItem = oList.addItem(itemCreateInfo);
    oListItem.set_item('Task', task);
    oListItem.set_item('Time', time);
    oListItem.set_item('Name', name);


    oListItem.update();  
    clientContext.load(oListItem);  
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));  
}  

function onQuerySucceeded() {  

  alert(oListItem)
  alert('Item created Successfully !!!!');
    document.getElementById("txtName").value = ""; 
    document.getElementById('txtTask').value = ""; 
    document.getElementById('res').value = "";  


}  

function onQueryFailed(sender, args) {  

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
}  

1
  • You only want to capture the minutes spend right? And you have made sure that the variable 'time' does indeed get populated before trying to save the item? If that's the case I can't see anything obvious wrong in your script. The only thing I can think of is that you have used the wrong field name ('Time' with a capital T perhaps).
    – Morten K
    Nov 2, 2018 at 20:43

2 Answers 2

0

If you want to get the time, you need replace the following line of code from createListItem method

var time = document.getElementById('min').value;

with

var time = document.getElementById('res').innerText;

Note: The "min" is a tag Id, you can't use ".Value" to get data, if you only want to get the "min" value, you need use this.

var min_txt = document.getElementById("min");
var min = Number(min_txt.innerHTML);
1

It can be done using the REST API and it's not too complicated.

Here a sample code with comments to get you started.

/*
<<-- This the where you specify the input variables about the list where you want to create the item -->>
*/
var listType = "SP.Data.ChecklistDoneListItem"; //This is unique for each list, as far as I can tell it's composed of "SP.Data." + [Internal list name] + "ListItem"
var TargetListGuid  = "7437AE7D-92F4-4AAF-8D2E-7A6AA1F1978A";
/*
<<-- This is where you specify the list fields, remember to use the internal field name -->>
*/
        var item = {
        "__metadata": { "type": listType},
        "Title": "Se tjekliste",
        "Answer": checkmarkAnswers,
        "PhaseId": projectPhase,
        "ProjectTypeId": projectType,
        "ProjectId": projectId
    }
/*
<<-- This is the actual call to create the item in the list -->>
*/
        $.ajax({
        url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists(guid'" + TargetListGuid + "')/items",
        type: "POST",
        contentType: "application/json;odata=verbose",
        data: JSON.stringify(item),
        headers: {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },

        //This is where you put any actions when an item has been create. For instance an alert telling the user the data has been submittet
        success: function (data) {
            console.log("Success!");
            console.log(data); // Returns the newly created list item information
        },

        //This is where you put ant actions when creating the item for any reason didn't happen
        error: function (data) {
            console.log("Error!");
            console.log(data);
        }
    });

Basically all you need to do is to call a function which includes the above code from the "stop button". Add your own input variables. Change the fields in the upper part to match your list and add your variables to each field.

Let me know if anythins is unclear - oh and for the record this is for O365/2013/2016 on prem. Might work for 2010, but not entirely sure.

8
  • SP 2013 On Prem Nov 2, 2018 at 20:18
  • Is it not possible to just modify what I already have working? I can get 2 of my three items to write to the list I just can't figure out how to capture the stopped time from my stop watch to add it as a list item. Nov 2, 2018 at 20:31
  • Oh sorry - I'm not familiar with that approach (I'm al for using the REST API whenever possible). sorry I won't be of much help then.
    – Morten K
    Nov 2, 2018 at 20:33
  • SP 2010 needs url: _spPageContextInfo.siteAbsoluteUrl + "/_vti_bin/listdata.svc/" + listName
    – vapcguy
    Aug 13, 2019 at 16:24
  • Note that, because it uses JSON.stringify, I found I needed a reference to json2.js from github.com/douglascrockford/JSON-js/blob/master/json2.js
    – vapcguy
    Aug 14, 2019 at 17:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.