How to Override the Nintex Form Save and Submit Button Behavior

Sometimes when submitting a Nintex form for SharePoint OnPrem, you need to do some extra JavaScript or other complex validations before the data is submitted.

 

For example, suppose:

• you need to validate against different database values depending on a range of answers the user selects? That might require one or two Ajax calls, which could vary as well.
• Or you may need to build a JSON string from values in a “Repeater” control instead of the default xml.

 

This article will show you how you override the Nintex Form Save and Submit Button Behavior using JavaScript, allowing you to implement the functionality you need before any data is submitted.

 

The best part is, you can do just about anything you like, and still have the form save and submit your Nintex form’s data as it normally would.

Here’s how you do it!

1. Create your Nintex form and add a “Save and Submit” button
2. Open up the button’s properties. For the purposes of this example, call the button’s name “Save”, and in the “ClientClick” property call your function, “MySaveFunction()” as shown in the screen capture below:
   

   Configure your button similar to the above. Particularly important are the button’s name and Client Click properties.

3. Implement your “MySaveFunction” as follows. I tend to have any extra JavaScript in a separate .js file within SharePoint’s “style library”:
   JavaScript

   // //JavaScript to override the save and submit button action // MySaveFunction = function () { if (typeof (Page_ClientValidate) == 'function') { Page_ClientValidate(); } if (Page_IsValid) { try { //Do whatever you need to here before the actual form is submitted console.log('Log to the console as well for debugging if you have to.'); //Now tell JavaScript to do the normal postback if we got this far var aspForm = NWF$("form[id=aspnetForm]"); //Make the value attribute reflect whatever you named your button! var buttonId = NWF$('input[type="Submit"][value="Save"]').attr('name'); //Now do the postback function that the button normally would do. //https://www.google.com/search?q=WebForm_DoPostBackWithOptions&oq=WebForm_DoPostBackWithOptions //for more info. WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(buttonId, "", true, "", "", false, false)); } catch (err) { //Be nice and log something to the console to help out the //poor souls who might have to debug the code. console.error("An error occurred trying to save the form."); } } }; /////////////////////////////////////

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

   // //JavaScript to override the save and submit button action // MySaveFunction = function () { if (typeof (Page_ClientValidate) == 'function') { Page_ClientValidate(); } if (Page_IsValid) { try { //Do whatever you need to here before the actual form is submitted console.log('Log to the console as well for debugging if you have to.');   //Now tell JavaScript to do the normal postback if we got this far var aspForm = NWF$("form[id=aspnetForm]");   //Make the value attribute reflect whatever you named your button! var buttonId = NWF$('input[type="Submit"][value="Save"]').attr('name');   //Now do the postback function that the button normally would do. //https://www.google.com/search?q=WebForm_DoPostBackWithOptions&oq=WebForm_DoPostBackWithOptions //for more info. WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(buttonId, "", true, "", "", false, false)); } catch (err) { //Be nice and log something to the console to help out the //poor souls who might have to debug the code. console.error("An error occurred trying to save the form."); } } }; /////////////////////////////////////

 

That’s it!

Note the following “gotchas”:

• make sure [value=”Save”] is reflective of whatever name you give your button! It has to match.
• you may or may not have to change some of the parameters to the “WebForm_DoPostBackWithOptions” function depending on what specifically you need to do. It is an undocumented JavaScript function used by ASP.NET when you set PostbackUrl for buttons.
   
  Google WebForm_DoPostBackWithOptions for more info. 🙂

 

Happy Nintex/JavaScript coding!

 

Please leave comments if you have any tricks to share of your own!