Multiple Entry Single Field


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.

  1. <script type=“text/javascript”>
  2. $(document).ready(function()
  3. {
  4. $(‘[title=”Sub-Project name”]’).css(“display”, “none”);
  5. $(‘[title=”Sub-Project Description”]’).css(“display”, “none”);
  6. $(‘[title=”Sub-Project name”]’).parent().parent().prev().append();
  7. $(‘[title=”Sub-Project name”]’).parent().append(“<ul id=’subProjectList’>”);
  8. $(‘[title=”Sub-Project Description”]’).parent().append(“”);
  9. });
  10. function AddProject()
  11. {
  12. var count = $(‘.subProject’).length;
  13. if(count < 5)
  14. {
  15. $(‘#subProjectList’).append(“<li><input class=’subProject’ type=’text’/></li>”);
  16. $(‘.subProject’).bind(‘keyup’, function()
  17. {
  18. var text = ;
  19. $(‘.subProject’).each(function(i)
  20. {
  21. var value = $(this).val();
  22. text += value;
  23. text += ‘,’;
  24. });
  25. $(‘[title=”Sub-Project name”]’).val(text);
  26. });
  27. $(‘#subProjectDescriptions’).append(

  28. <textarea cols=’40’ rows=’3′ class=’subProjectDescription’/>
  29. );

  • $(‘.subProjectDescription’).bind(‘keyup’, function()
  • {
  • var text = ;
  • $(‘.subProjectDescription’).each(function(i)
  • {
  • var value = $(this).val();
  • text += value;
  • text += ‘,’;
  • });
  • $(‘[title=”Sub-Project Description”]’).val(text);
  • });
  • }
  • }
  • </script>
    1. No comments yet.
    (will not be published)


    %d bloggers like this: