RESOLVED!

Everytime I post here and try to push my luck for another code. I was able to make it work. hahaha

Again to help my fellow newbies, here is the code I've used. Hope this helps.

function AddListItem() { var listTitle = "Employee Directory"; //Get the current client context context = SP.ClientContext.get_current(); var list = context.get_web().get_lists().getByTitle(listTitle); //Create a new record var listItemCreationInformation = new SP.ListItemCreationInformation(); var listItem = list.addItem(listItemCreationInformation); //Set the values listItem.set_item("Title", $("input[Title='Employee Name Required Field']").val()); listItem.set_item("Job_x0020_Title", $("input[Title='Job Title']").val()); listItem.set_item("Employee_x0020_Number", $("input[Title='Employee Number']").val()); listItem.set_item("Phone_x0020_Number", $("input[Title='Phone Extension']").val()); listItem.set_item("Email_x0020_Address", $("input[Title='Email Address']").val()); listItem.set_item("Address", $("input[Title='Address']").val()); listItem.set_item("City", $("input[Title='City']").val()); listItem.set_item("State", $("input[Title='State']").val()); listItem.set_item("Zip_x0020_Code", $("input[Title='Zip Code']").val()); listItem.update(); context.load(listItem); context.executeQueryAsync(Function.createDelegate(this, this.AddListItemSucceeded), Function.createDelegate(this, this.AddListItemFailed)); } function AddListItemSucceeded() { alert('Saved Successfully!'); } function AddListItemFailed(sender, args) { alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); } 

I'm glad you solved your problem, but aren't you reinventing the wheel here? Why aren't you simply using the native NewItem.aspx? I'm assuming you want a customized UI, but wouldn't it be easier to just run some JavaScript and/or CSS in the browser?

I think you are not using proper jquery and SPSerice js please check on SPService Codeplex and get the matching SPService js and related version of the jQuery. It will work. Please check below recommended version jQuery 1.11.x (SPServices 2013.01+) RECOMMENDED

Your words:

I'm planning to become a SharePoint developer and think this is the best way to learn it.

Like so many, you dive into SharePoint and forget to learn JavaScript

Your code:

var myValuePairs = []; var fldItem1 = $("input[Title='Employee Name Required Field']").val(); var fldItem2 = $("input[Title='Job Title']").val(); var fldItem3 = $("input[Title='Employee Number']").val(); var fldItem4 = $("input[Title='Phone Extension']").val(); var fldItem5 = $("input[Title='Email Address']").val(); var fldItem6 = $("input[Title='Address']").val(); var fldItem7 = $("input[Title='City']").val(); var fldItem8 = $("input[Title='State']").val(); var fldItem9 = $("input[Title='Zip Code']").val(); myValuePairs.push(["Title", fldItem1]); myValuePairs.push(["Job Title", fldItem2]); myValuePairs.push(["Employee Number", fldItem3]); myValuePairs.push(["Phone Extension", fldItem4]); myValuePairs.push(["Email Address", fldItem5]); myValuePairs.push(["Address", fldItem6]); myValuePairs.push(["City", fldItem7]); myValuePairs.push(["State", fldItem8]); myValuePairs.push(["Zip Code", fldItem9]); 

Is in maintainable JavaScript:

function getInputValueArray(key, title) { return [key, $("input[Title='" + title + "']").val()]; } var myValuePairs = [getInputValueArray('Title', 'Employee Name Required Field')]; ['Job Title', 'Employee Number', 'Phone Extension', 'Email Address', 'Address', 'City', 'State', 'Zip Code'] .forEach(function (title) { myValuePairs.push(getInputValueArray(title, title)); }); 

The bigger picture

The code you are swimming in now is JSOM,
Microsofts own proprietary JavaScript library
which we have used, and blogged about, for years to communicate with SharePoint.

perfectly valid to use in SP2010, SP2013, SP2016

But it is not SharePoint future

With the new SharePoint Framework (SPFx) Microsoft (finally) has made the switch to the Client Side world,
you don't have to learn tools like React, Node and Gulp just yet.

You only have to understand two things:

• In all those tools you program in JavaScript

• Modern SharePoint is a bunch of REST endpoints
  technlogy the rest of the Internet world has used for years

I'm planning to become a SharePoint developer and think this is the best way to learn it.

My advice, don't try and run before you can walk. (and you are running in the wrong direction...)

You primary goal should be learning JavaScript.

Just think about it...

• SharePoint Framework === JavaScript

• All the tools === JavaScript

Then ask yourself the question:

In 1 maybe 2 years time, who will get all the work?

• The .Net/JSOM/SharePoint Developer
  who learned some JavaScript on the side

• The experienced JavaScript developer
  to whom SharePoint is just another endpoint

PS: If your are going to learn SPFx,
be aware most of the SPFx examples were created by .Net developers learning something new