Jquery / Javascript Submit 2010 Nintex form


Badge +3

I have searched everywhere and cannot seem to find a method of creating a custom JavaScript form save button

 

It appears that the class to do it is missing from Nintex 2010 ?

 

 

What I am trying to do is create a button that will submit the list item,  and then open NewForm.aspx  and also have another button on the form for a "regular save" that redirects the user to a thank you page.

 

Redirecting to the thank you page is the easy part, just use the advanced properties and paste in your url.

 

Submitting a form using JavaScript seems to be the hurdle for the first button.


22 replies

Userlevel 6
Badge +16

Take a look at the Nintex Form Web Part where you can set a message and keep adding new items.

Badge +3


Not sure what web part you are talking about?  Can you elaborate?

Userlevel 6
Badge +16

You can create a Sharepoint Page and add a web part named "List Form"CaptureFormWP.PNG

Badge +3

I had never tried that before, really a pretty cool way to add a form to a page, but I am not understanding the part about setting a message and adding another item?

Badge +3

Still looking for an answer on how to "submit" via javascript ?

I want to have 2 submit buttons,  if you select one button it will submit and reload an empty form, and the other one will submit and redirect to a thank you page.

This should not be that hard, but I cannot seem to find a way that actually works!

Userlevel 7
Badge +10

You can utilize one of the following to submit the form via javascript:

  1. document.forms['aspnetForm'].submit();
  2.   
  3. theForm.submit();
  4. NWF$(this.form).submit();

Edit: This no longer works for me.

Badge +3

Ok,

I must be doing something wrong here....I have a Nintex form. I put a custom button on it. I set that custom button action to javascript,  in the client click field,  I put  MyFunction()

Here is MyFunction (located in the form settings custom javascript):

function MyFunction()

{ document.forms['aspnetForm'].submit();

}

Onclick the form flashes (does not actually refresh because data is still there) and the record does not submit.

I also tried :

function MyFunction()

{ NWF$(this.form).submit();

}

And got the same results.....

Userlevel 7
Badge +10

Hey Dan,

What build of Nintex Forms are you currently on? I have just noticed the exact same behavior on Nintex Forms 2.5.0.0...

Badge +3

I am running Version: 1.6.0.0, yes I know its antique,  but we are a very large enterprise and it takes IT literally forever to do updates / upgrades...

Userlevel 7
Badge +10

Hey Dan,

I have something that should work for you, drafting up an article/tutorial right now. happy.png

Userlevel 7
Badge +10

This solution worked for me, and should work for you (including the redirection stuff you have been wanting to do) happy.png

Custom Validation for Nintex Forms

Badge +3

First off, great work on this, this is a very useful script!

I have tested it and it works as advertised,  however on my implementations the box does not turn red when it fails validation, probably just a difference in versions. The forms based validation does continue to function after the javascript validation which is nice.

I am having trouble trying to get the redirection working,  if I add redirection to the submit routine it does the redirection but fails to submit the record....

//If form passes validation,

submit.

if(validated){

resetInvalidFields(validFields);

NWF$(".nf-disableonsubmit[value="+buttonName+"]").click();

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

window.location.replace("/sites/tag/TTMSMaster/TTMS-MPT/Lists/testlist1/NewForm.aspx");});

 

}

Userlevel 7
Badge +10

Ahhh, with the submit being async it is likely doing the redirection prior to the submit being completed (killing it off). Let me do some more tinkering to see if there is a way we can inject some code into an event receiver or something...

Badge +9

Hi Dan,

Please try the following:

  1. //If form passes validation, submit.
  2.     if(validated){
  3.         resetInvalidFields(validFields);
  4.         NWF$(".nf-disableonsubmit[value="+buttonName+"]").click();
  5.         //Place the location of the redirect in the window.location.assign() method.
  6.         window.location.assign("http://www.nintex.com");
  7.     }
  8.     //If form fails validation, show invalid fields and prompt.
  9.     else{
  10.          resetInvalidFields(validFields);
  11.          showInvalidFields(invalidFields);
  12.     
  13.         alert('The form is invalid, please correct the highlighted fields, and submit again');     
  14.     }
  15. }

The window.location.assign() method will allow you to create the item and still redirect to another page.

Thank you,

Sean

Badge +3

Sorry Sean, no joy, does the same thing, redirects fine, but doesn't submit the form.

Badge +9

Hi Dan,

That's very odd that the item is not created when you submit the form. In a test form, can you please try the code I had pasted above, included into the code that Aaron had provided in the blog post previously. In my tests, the item did submit, so I'm curious if the other changes you made are what is preventing the item from creating.

Thank you,

Sean

Badge +3


Sean,

here is the code I am running and it results in a refresh to nintex but no form submission:

//Sets fields in parameter to have a red background.
function showInvalidFields(fields){ 
for (var i = 0; i < fields.length; i++) {
fields.css('background-color', 'red !important');    }
}
//Sets fields in parameter to have a white background.
function resetInvalidFields(fields){ 
for (var i = 0; i < fields.length; i++) {
fields.css('background-color', 'white !important');    }
}
//Pass Client ID configured in Control to this function.
function validateBlankField(nfclientid){
if(!NWF$('#' + nfclientid).val().match(/./)) return false;
return true;
}
//Pass label of out of the box 'Save and Submit' button as parameter.
function submitForm(buttonName){
var validated = true;
var invalidFields = [];
var validFields = [];
//Validating the field 'mytextbox'.
if (!validateBlankField(mytextbox)){
validated = false;
invalidFields.push(NWF$('#' + mytextbox));
}
else{
   validFields.push(NWF$('#' + mytextbox));
}
//If form passes validation, submit.
if(validated){
resetInvalidFields(validFields);
NWF$(".nf-disableonsubmit[value="+buttonName+"]").click();
//Place the location of the redirect in the window.location.assign() method.
window.location.assign("http://www.nintex.com");
}

//If form fails validation, show invalid fields and prompt.
else{
resetInvalidFields(validFields);
showInvalidFields(invalidFields);

alert('The form is invalid, please correct the highlighted fields, and submit again');     
}
}

Badge +9

Hi Dan,

I just tested the code you pasted above and was able to create a new item in my list.

I'm using the latest build of Nintex Forms and Nintex Workflow in my Environment (2013). Can you confirm the build of both Forms and Workflow, and also what browser you are testing this in?

Thank you,

Sean

Badge +3

As stated above, we are running  Version: 1.6.0.0 on SharePoint 2010


Badge +9

Also, what browser version are you using? (DOM as well)?

Badge +3

sorry,

We are running IE 10 Version 10.0.9200.17357

Badge +1

any News or an Update?

i struggle with the same problem.

Reply