How to create a list item using javascript

Question

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());  
}  

Answer 1

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);

Answer 2

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.