Collect input from custom input fields and store in multiline plain text field

16.11.2009 Fixed an error found by Marc Verner, resulting in values returning “undefined”. This error var introduced by my previous update because i didn’t test it thoroughly…

I have added some code to show how to use this code with multiple fields. This code is commented out, but is found in lines 6, 10 and 54-63. Uncomment these lines and you are good to go with another field with FieldInternalName “MultilinePlain2”. I have also added an attribute “labelPosition”, value “above” or “before” to determine label position.

14.11.2009 Small update on alignment of the input field – thanks to Larry. There are now two options on alignment. the default is to have the label above the input-field. Comment out line 17 and activate line 19 to have the label before the input-field (note that a long label will fall behind the input-field).

I got a request that i thought was worth doing a post on. Its from Marc Verner and sounded like this:

Hey Alexander,
I currently have a MS Word based form that contains a 2 column by 10 row table where users provide up to 10 keycodes and their corresponding descriptions. I am hesitant to make 20 sharepoint variables to capture this since it will make a mess of the form – and I don’t need to query or report on these fields. Instead I’m looking for a possible solution for pre-populating a rich text field with a table template including column names. This way when a user creates a new item, they will see the familiar table and simply fill it in as per usual.
Not sure if its possible but you have really amazed me so far so figured I’d ask =)
Many thanks,
Marc

I do not like SharePoint’s rich text fields as the clutter the HTML-code to the non recognizable when editing. This solution is therefore based on generating some custom input fields and storing the result in a multi line text field of type “plain text”.

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):
IMG

You start with a standard multiline text field like this:
IMG

Add the script, and you end up with this:
IMG

Add a CEWP below your NewForm list-form (and EditForm if you like) like this:
IMG

And add this code:
You must replace any occurrence of “MultilinePlain” with your FieldInternalName

<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
fields = init_fields();
// Array to create the input fileds from
var arr = ['Label 1','Long Label 2','Even longer Label 3','Label 4','Label 5'];
//var arr2 = ['Label 6','Long Label 7','Even longer Label 8','Label 9','Label 10'];

// Call the script with the array, and the FieldInternalName of the multiline text field
generateInputAndStoreInMultilineText(arr,'MultilinePlain','above',300);
//generateInputAndStoreInMultilineText(arr2,'MultilinePlain2','before',300);

function generateInputAndStoreInMultilineText(arrOfLabels,FieldInternalName,labelPosition,widthOfInputField){
if(widthOfInputField==undefined)widthOfInputField=250;
// Hide the multiline text field
$(fields[FieldInternalName]).find(".ms-formbody :input:last").hide().next().hide();
	var customInputFields = '';
	// Loop trough all "Labels" and create the input field
	$.each(arrOfLabels,function(idx,item){
		// Label position
		if(labelPosition=='above'){
			customInputFields += "<div id='customInput_" + idx + "' value='" + item + "' style='padding:2px'>" + item + "<br><input type='Text' style='width:100%;margin:0 13 0 0;'></div>";
		}else if(labelPosition=='before'){
			customInputFields += "<div id='customInput_" + idx + "' value='" + item + "' style='padding:2px;'>" + item + "<div style='text-align:right;margin: -17px 13px 0 0;'><input type='Text' style='width:" + widthOfInputField + "px'></div></div>";
		}
	});
	// Insert the custom input fields
	$(fields[FieldInternalName]).find('.ms-formbody').prepend(customInputFields);
	// Handle page refresh due to form validation, and preserve the values in the custom inputs
	$(document).ready(function(){
	// Read the values from the hidden multiline textfield
		if($(fields[FieldInternalName]).find(".ms-formbody :input:last").val()!=''){
			// Split the values
			var raw = $(fields[FieldInternalName]).find(".ms-formbody :input:last").val();
			var split = raw.split('n');
			// Insert the values in the correct "custom input"
			$(fields[FieldInternalName]).find(".ms-formbody div[id^='customInput_']").each(function(idx){
			var splitAgain = split[idx].split(': ');
				$(this).val(splitAgain[0]);
				$(this).find('input').val(splitAgain[1]);
			});
		}
	});
}

function PreSaveAction(){
var valToSave = '';
// Build the content to write to the hidden multiline field
$(fields['MultilinePlain']).find(".ms-formbody div[id^='customInput_']").each(function(){
	valToSave += $(this).val() + ": " + $(this).find('input').val() + "n";
});
// Write to multiline field
$(fields['MultilinePlain']).find(".ms-formbody :input:last").val(valToSave);

/*
// Field nr 2
var valToSave = '';
// Build the content to write to the hidden multiline field
$(fields['MultilinePlain2']).find(".ms-formbody div[id^='customInput_']").each(function(){
	valToSave += $(this).val() + ": " + $(this).find('input').val() + "n";
});
// Write to multiline field
$(fields['MultilinePlain2']).find(".ms-formbody :input:last").val(valToSave);
*/
return true; // Must return true for item to be saved
}

function init_fields(){
  var res = {};
  $("td.ms-formbody").each(function(){
	  if($(this).html().indexOf('FieldInternalName="')<0) return;
	  var start = $(this).html().indexOf('FieldInternalName="')+19;
	  var stopp = $(this).html().indexOf('FieldType="')-7;
	  var nm = $(this).html().substring(start,stopp);
	  res[nm] = this.parentNode;
  });
  return res;
}
</script>

The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.3.2.min. If you download another version, be sure to update the script reference in the sourcecode.

The script handles page refresh due to form validation, and preserves the values in the custom input fields (it reads them back from the hidden text field). The code can be used for both NewForm and for EditForm due to the same logic.

The values are stored in a proper format to present in DispForm and in list view’s like this:
IMG
IMG

Read here how to find the FieldInternalName of your field

Don’t hesitate to ask if all is not clear

Regards
Alexander

30 Comments on “Collect input from custom input fields and store in multiline plain text field”

  1. I am always amazed at your work. I had an issue this morning. I have 10 different secitons in a form, but not all are used on every form. I needd a way to display current activity, but because there are 10 I can not use a calculated field. This might pull it off for me. can the fields be changed from text to say, people or date?

  2. Hi Larry,
    I’m not sure if i understand your question. Can you explain it further – or send some screen shots by email.

    A calculated field cannot “read” from a multi line field. These “generated” input fields can not be of type “People picker” or any other SharePoint-field type, but you can use a jQuery datepicker.

    Alexander

  4. a couple of helpful hints for this post. I added a few small modifications. On line 7, 40 and 44 the field name is written. I realized this when I could not get this to work right away. I added a var for the field name and replaced it in those lines. Now update field name in one place.

    Also added some formatting for the field layout. if field names are different length the format looks sloppy.
    line 16 I added some inline styles to align the fields right like this:

    customInputFields += “[div id=’customInput_” + idx + “‘ value='” + item + “‘ style=’padding:2px;font-weight:bold;’]” + item + ”  [div style=’text-align:right;margin: -17px 13px 0 0;’][input type=’Text’ style=’width:” + widthOfInputField + “px’][/div][/div]”;

    gives it a cleaner look

  6. sure thing here you go
    Add this to line 5
    var fieldName = ‘Enter your Filed name here’;
    Removed field name from next line and add var
    generateInputAndStoreInMultilineText(arr,fieldName,300);

    around line 39-40 replace fieldname with var
    $(fields[fieldName]).find(“.ms-formbody div[id^=’customInput_’]”).each(function(){

    around line 43 replave fieldname with var
    $(fields[fieldName]).find(“.ms-formbody :input:last”).val(valToSave);

  7. Hi,
    This is more a “proof of concept” than a fully tested solution.

    The reason for not using a variable in the function PreSaveAction was to enable the users to have more than one instance of the “generateInputAndStoreInMultilineText-function” present in one list form.

    You can se another way of achieving this in this post:
    Accumulate selections from dropdown to mulitline textfield

    Here i have used a loop in the PreSaveAction and therefore can address the variables in just one place.

    The align:right added by Larry is of course a necessary fix. I have not tested this in “real life”, and will update the code as i get feedback.

    Alexander

  8. Hi Alexander,
    I just added the code to my site and it works like a charm! This is a much cleaner approach than using a rich text field solution. This is a real life-saver – thanks so much for another great solution, I really appreciate your help.
    Larry – thank you kindly for the right alignment add-on. Copying and pasting the code didn’t work, but after manually adding the changes everything worked fine and everything lines up nice.
    Marc

  10. The updated code works great!
    I have been trying to modify the code for two multi-line text fields on the same form. The pre-save loop is giving me some difficulty as I can only seem to save data into one of the fields or create undefined values for both.
    When you have a spare moment can you please advise how best to modify the code for multiple multi-line text fields? Many thanks.
    Marc

  13. Pingback: SharePoint Kaffeetasse 141 - Michael Greth [SharePoint MVP] - SharePointCommunity

  15. What is the easiest way to have this build 2 columns of text fields. Example Start Date and End Date columns. Also if using dates, how to add a popup calendar (icon link) to populate the field with date and time.

  16. Hi,

    I tried to use this script in my WSS 3.0 environment,
    exactly did what was mentioned here but could not get this working, did anyone faced this situation.

    I made the change for the var in field name, please let me know.

    Thanks

    1. Hi,
      Are you sure your jQuery library is loaded?
      To test if the jQuery library is loaded, you write this line in the CEWP:

      alert($);

      The alert this one gives if jQuery is loaded is this:

      function (E, F) {
    return new (o.fn.init)(E, F);
}

      Remember to place the CEWP below the form.

      Alexander

  17. Very efficiently written information. It is going to be helpful to anybody who usess it, including myself. Keep up the good work – for certain i’ll check out extra posts.

  18. Hi Alexander, wonderful concept and just what I’m looking for but whilst the code created the multiple field list in ‘NewForm’ for a new item I cannot get the code to be accepted properly on an ‘EditForm’ and it does not show properly in ‘DispForm’ or the list view itself. I’m using MOSS 2007 and JQuery 1.4.2. Any help would be much appreciated.

    Regards,

    David

    1. I’ve just re-read the article for the nth time and realise it is about a ‘Document Library’. I have been trying to use the code on a ‘Custom List’ which might account for it not working as described above.

      Is it possible for the code to be used on any type of SharePoint ‘list’?

      Regards,

      David

    2. Ignore my comment above, the reference to a document library was for the JQuery. Clutching at straws to try and understand why this won’t work for me. David

    3. Hi,
      This solution was all about collecting the information in NewForm and will not work in EditForm. I will look at it and see if i can post an update.

      Updated: I actually had forgotten how this worked… It does work in both NewForm, DispForm and EditForm.

      Are you sure you use a multi line field of “plain text type”?

      Alexander

    4. Alexander, thanks for the prompt reply.

      Yes I’ve just checked and the field I’m using in the code is a multiple line text field of ‘plain text type’. The separate entries appear on the ‘NewForm’ and I can add to them but having added a new item the field does not display anything in list view. If I add the code to the EditForm is does display the fields for edit but seems to be in a part ‘published’ state and has a ‘Save & Exit’ button with the page tool bar – which appears in view. Note I’m using ‘Publisher’ pages, could this have bearing on the problem?

      Regards,

      David

    5. Alexander, just a thought but should I add the code to the relevant ‘forms’ before adding any items to the list? I’ve added the field and code to an existing list I’m experimenting with which already has some test data in it. David

    6. Alexander, sorted it. You used the field name directly in the last part of the code where it saves the entries. I’d not edited this to match with the name of my field which was different to yours.

      It now works on all ‘Forms’ and in list views however in EditForm it displays the ‘page tool bar’ included with a Publising page and a button that says ‘Save & Stop Editing’. In the EditForm the field is shown as a multiple line text field with the individual line labels and content on a separate lines. I was hoping it would display as for the NewForm but can live with it for my purposes.

      Thanks again for the code, and the other solutions you regularly post. Really useful.

      Regards,

      David

    7. Hi,
      Yes, you must edit the code to replace “MultilinePlain” with your own FieldInternalName – this should have been specified in the text.

      I do not have access to a site with the publishing features activated so i cannot test it, but i know others have had issues with some of the scripts when used in a publishing site.

      Alexander

  19. Hi Alexander

    This one solve a few problems for me and is working pretty good.

    Now that everything is working and is in a list view, as I added in a number of entries, the mulitlineplain column is now very long.

    I want to be able to do a collapse text – I have tried some of the options out there, but is not working.

    Do you have any suggestions ?

    Iain

  20. Hi Alexander

    I got the Collaspe working now – so dont worry about that.

    I also now have your side by side and multiline working – except for that now it is not saving the vales in the multilines.

    Any ideas ?

    Iain

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.