Multiple Entry Single Field
February 14, 2011 Leave a comment

Slalom Consultant Maarten Sundman specializes in .NET, SharePoint, and Silverlight solutions and has experience in the Financial Services, Software, and Utilities and Energy sectors.
by Maarten Sundman
This is a method I came up with to use jQuery to fake an n+1 relationship for one or more columns within a single list item. You can see in the image below that the user is initially presented with the designated fields empty; they have a button for adding the new ‘rows’ in to the fields specified. This is a simple method for basic scenarios where you need a relational style input within a single form.
The code works by adding an event handle to each new text box inserted that is triggered on KeyUp to concatenate the values into a CSV list that is stored in the hidden original field. So if you have added three ‘rows’ you would get something like this saved: “Value1,Value2,Value3,”
To use, insert a content editor web part and edit the [title=”Column” selector to be the display value of the field to treat in this manner.
<script type="text/javascript"> $(document).ready(function() { $('[title="Sub-Project name"]‘).css(“display”, “none”); $(‘[title="Sub-Project Description"]‘).css(“display”, “none”); $(‘[title="Sub-Project name"]‘).parent().parent().prev().append(“Add SubProject”); $(‘[title="Sub-Project name"]‘).parent().append(“<ul id=’subProjectList’>”); $(‘[title="Sub-Project Description"]‘).parent().append(“”); }); function AddProject() { var count = $(‘.subProject’).length; if(count < 5) { $(‘#subProjectList’).append(“<li><input class=’subProject’ type=’text’/></li>”); $(‘.subProject’).bind(‘keyup’, function() { var text = ”; $(‘.subProject’).each(function(i) { var value = $(this).val(); text += value; text += ‘,’; }); $(‘[title="Sub-Project name"]‘).val(text); }); $(‘#subProjectDescriptions’).append(“ <textarea cols=’40′ rows=’3′ class=’subProjectDescription’/> “); $(‘.subProjectDescription’).bind(‘keyup’, function() { var text = ”; $(‘.subProjectDescription’).each(function(i) { var value = $(this).val(); text += value; text += ‘,’; }); $(‘[title="Sub-Project Description"]‘).val(text); }); } } </script>
– Maarten