How to write a javascript to insert an item in a sharepoint list

Question

My page should contain a text box ,drop down menu and a button. The drop down menu to choose the type of the request and the text box to write a text inside it and after clicking submit button will insert a new item in the sharepoint list. The list should save the Request type from the drop down menu in Request type column, and the should save the text from text box in text column. and should save the created by user in the created by column.
I need a help to write a javascript and html to reach to this as I am new in this field.

Thanks in advance.

Answer 1

Hi @Gulnar ,

You could use sharepoint rest api to achieve this. Once the submit button is clicked, use js to get the value form the drop down and text box field. Then call the sharepoint rest api to create item in your list. Like this:

function CreateListItem() {  
    $.ajax  
        ({  
            // _spPageContextInfo.webAbsoluteUrl - will give absolute URL of the site where you are running the code.  
            // You can replace this with other site URL where you want to apply the function  
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('New List1')/items",  
            type: "POST",  
            headers:  
        {  
            // Accept header: Specifies the format for response data from the server.  
            "Accept": "application/json;odata=verbose",  
            //Content-Type header: Specifies the format of the data that the client is sending to the server  
            "Content-Type": "application/json;odata=verbose",  
            // X-RequestDigest header: When you send a POST request, it must include the form digest value in X-RequestDigest header  
            "X-RequestDigest": $("#__REQUESTDIGEST").val()  
        },  
            data: JSON.stringify  
        ({  
            __metadata:  
            {  
                // Format of the "type" is: SP.Data.<<ListName>>ListItem  
                type: "SP.Data.YourListListItem"  
            },  
            Title: "New Title"  
        }),  
            success: function (data, status, xhr) {  
                console.log("Success");  
            },  
            error: function (xhr, status, error) {  
                console.log("Failed");  
            }  
        });  
}  

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

---