Sharepoint SIG

Thoughts and ideas from your SharePoint support team

Using jQuery in a Nintex Form to count words

| 0 comments

Recently I need to provide a form to be filled out where the desire was to limit the input on a text field to about 150 words. Since Nintex Forms includes jQuery already, it was natural to use it to build up the word counter.

You can see the completed form and try it out on our demosite (U of S login required) or through the Nintex Live version

You can learn more about jQuery at http://jquery.com/

As I said earlier, jQuery is available in the Nintex form using NWF$ instead of just $ as shown in jQuery examples.

The first challenge is to deal with finding the field you want to count in the DOM.  While jQuery makes this easy by using the name, Nintex uses a generated name that can make it difficult to find. As an example, here is the ID field from the form:

id="ctl00_m_g_c75c6025_0b9d_4284_8e65_69f17a6f2da4_ctl00_ListForm2_formFiller_FormView_ctl25_2d3d8996_cf8c_4c43_9033_3df864b0f0ce"

Also, the name may change over time (I don’t know if it does or not). Fortunately Nintex provides a way to help with this, in the field settings you can set it to store the field name in a Javascript variable.  In my case I used a variable named “uofsDescription”.

A quick search on the internet found several javascript word counters that gave me a good starting place.

One of the first challenges was using the variable that contained the field name.  In jQuery you refer to fields by prefixing them with a # symbol so it is very simple to define a new variable that concatenates this character onto the front of the other variable.  Trouble is that the custom javascript appears in the HTML page before the variable definition for that field.  This is easily solved using the .ready function:

NWF$(document).ready(function() {
 var textareaSelectorId = '#'+uofsDescription;
}

The other thing you need to do is to display the word count.  This is easily accomplished by including a “rich text” control with a div for the display “<div id=”wordCount”><div>”

var wordCounts = {};
NWF$(document).ready(function() {
 var textareaSelectorId = '#'+uofsDescription;

 NWF$(textareaSelectorId).keyup(function() {
 var matches = this.value.match(/\b/g);
 wordCounts[this.id] = matches ? matches.length / 2 : 0;
 var finalCount = 0;
 NWF$.each(wordCounts, function(k, v) {
 finalCount += v;
 });
 NWF$('#wordCount').html(finalCount+"/150 words");
 if (finalCount > 150) {
   NWF$('#wordCount').attr("style","color:red;font-weight:bold");
 } else {
   NWF$('#wordCount').attr("style","");
 }
}).keyup();
});

To make this even better, we can prevent submission of the form if there are more than 150 words in a couple of ways:

1. Using a custom validator.  For how to do this see http://connect.nintex.com/files/folders/tutorials_and_how_tos_nf2010/entry25890.aspx

2. Using javascript to disable the save button.  In this case we need to add a style because the save button does not have the option to have the ID stored in a javascript variable.

Once the class is set, we can update our if statement from above to include disabling and enabling the save button:

  if (finalCount > 150) {
    NWF$('#wordCount').attr("style","color:red;font-weight:bold");
    NWF$('.saveButton').attr("disabled",true);
  } else {
    NWF$('#wordCount').removeAttr("style");
    NWF$('.saveButton').removeAttr("disabled");
  }

This is just an example of what is possible with Nintex Forms and javascript, so make sure you consider the possibilities when you are designing your solutions.

Leave a Reply