1

I'm having trouble adding the information I've entered on my Custom New Form to a custom list. I'm using SPServices UpdateListItems. My challenge is to create a save button from scratch and add all the details. But I seem to be missing something as it is not adding it up.

Below is my code.

function AddListItem() {
            var empName = $("input[Title='Employee Name Required Field']").val();
            var empJob = $("input[Title='Job Title']").val();
            var empNum = $("input[Title='Employee Number']").val();
            var empPN = $("input[Title='Phone Extension']").val();
            var empEmail = $("input[Title='Email Address']").val();
            var empAdd = $("input[Title='Address']").val();
            var empCity = $("input[Title='City']").val();
            var empState = $("input[Title='State']").val();
            var empZip = $("input[Title='Zip Code']").val();

            $().SPServices({ 
                operation: "UpdateListItems", 
                async: false, 
                batchCmd: "New", 
                listName: "Employee Directory", 
                valuepairs:[["Title",empName],["Job Title",empJob],["Employee Number",empNum],["Phone Extension",empPN],["Email Address",empEmail],["Address",empAdd],["City",empCity],["State",empState],["Zip Code",empZip]],
                completefunc: function(xData, status) {
                    alert("Saved Successfully!");
                }
            });

I've also tried to use array for the valuepairs. This is what I've come with.

            $("#btnAdd").click(function() {

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

            $().SPServices({
                operation: "UpdateListItems",
                async: false,
                batchCmd: "New",
                listName: "Employee Directory",
                valuepairs: myValuePairs,
                completefunc: function (xData, Status) {
                    alert("Saved Successfully!");
                }
            });

        });

Hoping you guys could enlighten me with this. Thank you.

3

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());
        }
1
  • So if you wait a day before a asking a question you won't waste other peoples time trying to read and understand your questions... StackOverflow is not a Wiki site where you document knowledge. It is perfectly fine to answer your own question, if.. after days.. it hasn't been answered yet and you found the answer yourself. Mar 5 '17 at 9:40
0

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?

1
  • Hi, Michael, appreciate the comment. I do understand that there is an out-of-the-box NewItem.aspx that comes with the custom list once created. But I'm planning to become a SharePoint developer and I think this is the best way for me to learn it. By re-engineering all of the features of SharePoint or make it from scratch using the libraries provided in JS.
    – SP_Newbie
    Mar 5 '17 at 7:33
0

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

1
  • Some of the information in the documentations there are a bit jargon from my understanding. But I still do scan some of the information there. Thanks
    – SP_Newbie
    Mar 5 '17 at 7:34
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.