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