Save data into SharePoint list from HTML text box (using JS)

Question

I have made a Text box and a save button. when I write something in text box and click save button, I need to save this data every time in the list. How can I do this using Java Script?

Data should be in a column of a list. Every time click save button, data should save in new row.

Answer 1

You can also use the REST api to add item to list as below. Create javascript file and add its reference in a script editor/content editor webpart:

 function AddData() {
    var listName = "MyList";
    var newItemTitle = $("txtBox").val();
    CreateListItemWithDetails(listName, _spPageContextInfo.webAbsoluteUrl, newItemTitle, function () {
        console.log("New Item has been created successfully.");
 }, function () {
     console.log("Ooops, an error occured. Please try again.");
 });
}

// CREATE Operation
// listName: The name of the list you want to get items from
// weburl: The url of the web that the list is in. 
// newItemTitle: New Item title.
// success: The function to execute if the call is sucesfull
// failure: The function to execute if the call fails
function CreateListItemWithDetails(listName, webUrl, newItemTitle, success, failure) {
    var itemType = GetItemTypeForListName(listName);
    var item = {
        "__metadata": { "type": itemType },
        "Title": newItemTitle
    };

    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
        type: "POST",
        contentType: "application/json;odata=verbose",
        data: JSON.stringify(item),
        headers: {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        success: function (data) {
            success(data);
        },
        error: function (data) {
            failure(data);
        }
    });
}

// Get List Item Type metadata
function GetItemTypeForListName(name) {
    return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
}

the input button would be as below:

<input id="btnSubmit" type="button" value="Save" onclick="AddData();" />

For further reading on how to use REST api , you can follow this blog

Answer 2

Add following script to your content editor webpart:

var listName = 'List1'; // Your SharePoint List Name
function createListItem() {

    var txtValue = document.getElementById('textBox1').value; // Your Textbox

    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle(listName);

    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.oListItem = oList.addItem(itemCreateInfo);
    oListItem.set_item('Title', txtValue); // 'Title' is the internalName of the sharepoint list column
    oListItem.update();

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

function onQuerySucceeded() {
    alert('Item added successfully');
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

Call createListItem() function on save button:

<input id="btnSubmit" type="button" value="Save" onclick="createListItem();" />

For more: Complete basic operations using JavaScript library code in SharePoint

Answer 3

You can create Visual Web part and put this code inside web part and deploy the WSP and add the web part on the page. Or you can add this code directly to Content Editor web part on the particular page.

Try this below code: HTML code:

<div id="insert">  
    <table>  
        <tr>  
            <td> Employee Name: </td>  
            <td>  
                <input type="text" id="txtname" placeholder="Employee Name" /> </td>  
        </tr>  
        <tr>  
            <td> Designation: </td>  
            <td>  
                <input type="text" id="txtdesignation" placeholder="Employee Name" /> </td>  
        </tr>  
        <tr>  
            <td></td>  
            <td>  
                <button type="button" id="buttoninsert" onclick="insert()">Insert</button>  
            </td>  
        </tr>  
    </table>  
</div>  

JS Code:

var siteurl = '/sites/JS';  

function insert()  
{  
    var clientContext = new SP.ClientContext(siteurl); // Get SPSITEURL  
    var list = clientContext.get_web()  
        .get_lists()  
        .getByTitle('Employee'); // Get SP list   
    var itemCreateInfo = new SP.ListItemCreationInformation();  
    var value1 = document.getElementById('txtname')  
        .value;  
    //Get value from input element  
    var value2 = document.getElementById('txtdesignation')  
        .value;  
    //Get value from input element  
    this.oListItem = list.addItem(itemCreateInfo);  
    //Adding list items  
    oListItem.set_item('Title', value1);  
    oListItem.set_item('designation', value2);  
    oListItem.update();  
    clientContext.load(oListItem);  
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));  
}  

function onQuerySucceeded()  
{  
    alert('Item created Successfully');  
}  

function onQueryFailed(sender, args)  
{  
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
}