Multiple Entry Single Field

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