Add custom script to Nintex forms

At the end of this blog post you will learn how to

- Submit data to mulitple lists from a single form(here Nintex)
- Create a new item using client side script(Jquery)
- Have your own code/javascript run when submitting the OOTB submit/save button
- Add custom script or jquery in Nintex forms accessing controls

NWF$(document).ready(function () {

var formclick = $("input[commandtype*='Save']").attr("onclick");
formclick = "if(!UpdateContacts()){return false;};" + formclick.replace("javascript:","");
$("input[commandtype*='Save']").attr("onclick",formclick);

});

Above function will bind custom script/function to the OOB save/submit button on the Nintex form but for some reason i could not get the client validation happen before the submit works.

function UpdateContacts()
{

 mode = "New";
 var aname = $('#'+accountnameCtrl).val();
 var fn = $('#'+firstnameCtrl).val();
 var ln = $('#'+lastnameCtrl).val();
 var email = $('#'+emailCtrl).val();
 var phone = $('#'+phoneCtrl).val();

  $().SPServices({
        operation: "UpdateListItems",
        async: false,
        batchCmd: "New",
        listName: "Contacts",
        valuepairs: [["FirstName", fn],["LastName", ln],["Phone",phone],["Email",email]],
        completefunc: function(xData, Status) {
        console.log(status);

    $(xData.responseXML).find("ErrorText").each(function() {
     alert("Error :"+$(this).text());
    });
    }

});

}

Batch update list items using client scripts

We know that SPServices has a way to create new or update items but when in the case of creating multiple items(say 10), calling the same query 10 times is not going to be good from performance perspective. so lets use batch command to do it from client side as below

var query_string = "";
for(int i=1;i<=5;i++)
{
var title = $('input#title'+i).val();
var desc = $('input#desc'+i).val();
query_string += "<Method ID='1' Cmd='New'>";
query_string += "<Field Name='Title'>"+title+"</Field>";
query_string += "<Field Name='Description'>"+desc+"</Field>";
query_string += "</Method>";

}
query_string += "";

$().SPServices({
    operation: "UpdateListItems",
    async: false,
    batchCmd="New",
    listName: "Requests",
    updates: query_string,
    completefunc: function(xData, Status) {
        alert(xData.responseText);
    }
});

for update operations, batchCmd should be updated as 'Update' and same in the query string as well.