With SharePoint custom file upload control we can add comments or description for each uploaded file.
for this we have to create a SharePoint Multiline text field to store comments. we can store the comments along with file name. so that we retrieve or save comments with correct file.

      

        DocumentComments
       

       
      


              

and we can handle the comments on the code as below.

var inputtext = document.getElementById("onetidIOComment").value;
            if (inputtext != "") {
                var tdivision = document.createElement("td");
               // tdivision.setAttribute("class", "ms-vb");
      
                var span = document.createElement("span");                       // Create a element
                span.setAttribute("dir", "ltr");
                span.innerText = "Comment:  " + inputtext;
                tdivision.appendChild(span);
                var tRow = document.getElementById("attachRow" + i);

                tRow.appendChild(tdivision);
                document.getElementById("onetidIOComment").value = "";
    $("#attachRow" + i).find('td:last').css('color','#444');
    $("#attachRow" + i).find('td:last').css('padding-left','10px');
    $("#attachRow" + i).find('td:last').prev().css('vertical-align','top');

            }
            i++;

// Here we are tying to show the comments on attached documents table immediatly

function AddDocumentComments(){
    var fileinfo="";
    var MyRows = $('table#idAttachmentsTable').find('tbody').find('tr');
    for (var i = 0; i < MyRows.length; i++) {
        var AttCol = $(MyRows[i]).find('td:eq(0)').find('span').html();

        var lastItem = AttCol.split("\\").pop(-1);

        var ComCol = $(MyRows[i]).find('td:eq(2)').find('span').text();
        fileinfo += lastItem + ";" +ComCol + "#";


    }
    $("textarea[title='DocumentComments']").val(fileinfo);
}

Now we will include all feature step by Step

Step: 1
   
SharePoint Custom file attachment control

Step: 2
 Client Validation for SharePoint file Upload Control

Step: 3
 SharePoint error duplicate file ulpoad error

Attach multiple files to SharePoint list item with custom upload control.
we can do the below features to your file upload control

1. Add Client Validation
2. Avoid duplicate file upload error
3. upload multiple attachments
4. include each document comments

Here we can use Custom Upload Control and OOB Attachments table.

HTML Code for Attachment Control:

Now we will include all feature step by Step

Step: 1
   
Client Validation for SharePoint file Upload Control

Step: 2
 Stop Showing duplicate file upload Error

Step: 3
 SharePoint add comments for each attached document

To get the current user logged in SharePoint group name.
If you trying to iterate all the SharePoint groups the user may get access denied error.
Note: CSOM doesn't have impersonation facelity.

Here we can get only the specific group and find to get the logged user name

ExecuteOrDelayUntilScriptLoaded(IsCurrentUserHasContribPerms, 'SP.js');
function IsCurrentUserHasContribPerms() 
{
    IsCurrentUserMemberOfGroup("Members", function (isCurrentUserInGroup) 
    {
        if(isCurrentUserInGroup)
        {
            // The current user is in the [Members] group!
        }
    });
   

}

function IsCurrentUserMemberOfGroup(groupName, OnComplete) 
{

    var currentContext = new SP.ClientContext.get_current();
    var currentWeb = currentContext.get_web();

    var currentUser = currentContext.get_web().get_currentUser();
    currentContext.load(currentUser);

    var allGroups = currentWeb.get_siteGroups();
    currentContext.load(allGroups);

    var group = allGroups.getByName(groupName);
    currentContext.load(group);

    var groupUsers = group.get_users();
    currentContext.load(groupUsers);

    currentContext.executeQueryAsync(OnSuccess,OnFailure);

    function OnSuccess(sender, args) {
        var userInGroup = false;
        var groupUserEnumerator = groupUsers.getEnumerator();

        var OwnergroupUserEnumerator = OwnergroupUsers.getEnumerator();
   var statusval= $("select[title='ApprovalStatus'] option:selected").val();
        while (OwnergroupUserEnumerator.moveNext()) {
            var OwnergroupUser = OwnergroupUserEnumerator.get_current();
            if (OwnergroupUser.get_id() == currentUser.get_id()) {
                userInGroup = true;
               
                break;
            }
        }



        OnComplete(userInGroup);
    }

    function OnFailure(sender, args) {
        OnComplete(false);
    }    
}

How to show modal dialog box using JQuery. Here we can set multiple buttons with styles, we can include more dialog properties

Heading1


            


                
Title
                

                
            

                
Project
                

                
            



$(function () {
        $("#projectDetails").dialog({
            autoOpen: false,
            height: 500,
            width: 700,
            modal: true,
            closeOnEscape: false,
            show: {
                effect: "slideDown",
                duration: 1000
            },
            hide: {
                effect: "slideUp",
                duration: 500
            },
            // open: function(event, ui) {
            //       var el = $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close');
            //       el.off();
            //       el.on("click", fnCustomerHandler);
            //  },
            buttons: [
   {
       text: "Save",
       icons: {
           primary: "ui-icon-mail-closed"
       },
       click: function () {
     // Call you function here
       }
   },
       {
           text: "Save1",
           icons: {
               primary: "ui-icon-disk"
           },
           click: function () {
               // Call you function here
           }
       },
       {
           text: "Cancel",
           icons: {
               primary: "ui-icon-circlesmall-close"
           },
           click: function () {

                 var r = confirm("Are you sure to close the popup!");
                 if (r == true) {
               $(this).dialog("close");
               //  window.location.href = "http://regula:19430/ITProjectPortfolio";
                 return true;
              
                 } else {

                 }


           }
       }

            ]

        });
    });

// to open open this you can call as below
$("#projectDetails").dialog("open"); // projectDetails ID of your popup main div tag

Get and Set the Users or Names on SharePoint 2013 People Picker (Person Group) field on Custom List Forms using JQuery.

The SharePoint 2013 Client People Picker on Custom List forms is different from OOB control.
The "div" structure is different when compare with both. So we have to write different script on custom forms.

The below code will give an example to get and set the values for Client People Picker or Person Group Field on Custom List forms.

// Get People Picker Values
function getEditorPeoplePickerValues(fieldName) { // Field Title
        editorNames = "";
        var _PeoplePicker = $("div[title='" + fieldName + "']");
        var _PeoplePickerTopId = _PeoplePicker.attr('id');
        var ppobject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
        editorsInfo = ppobject.GetAllUserInfo();

        var i;
        for (i = 0; i < editorsInfo.length; ++i) {
            editorNames += editorsInfo[i].DisplayText + ";#";
        }
    }

// Set People Picker Values
function SetAndResolvePeoplePicker(fieldName, userAccountName) {
       // alert(userAccountName);
        var _PeoplePicker = $("div[title='" + fieldName + "']");
        var _PeoplePickerTopId = _PeoplePicker.attr('id');
        var _PeoplePickerEditer = $("input[title='" + fieldName + "']");

        userAccountName.split(";#").forEach(function (part) {
   if (part !== "" && part !== null) {
          //  alert(part);
            _PeoplePickerEditer.val(part);
            var _PeoplePickerOject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
            _PeoplePickerOject.AddUnresolvedUserFromEditor(true);
   }
        });

    }

// How to use the above function on our code

call direct function to get values. but to set values we have to create an array with names.
var editorNames = "";
getEditorPeoplePickerValues("Field Title");
SetAndResolvePeoplePicker("Field Title", editorNames );

Get deleted names or entries from SharePoint 2010 format People Picker control on list forms using JavaScript or JQuery.

Here we have to get values from the people picker at OnLoad and PreSaveAction and we have to get the values and set the values as below.

/*  */

var onloadViewerNames = [];
var presaveViewerNames = [];

jQuery(document).ready(function () {
 onloadViewerNames = getPickerInputElement("ff2"); // Get Viewer Names on load  
}); 

function PreSaveAction() {
 presaveViewerNames = getPickerInputElement("ff2"); // Get Viewer Names on pre save 
 var getDeletedViewer = $(onloadViewerNames).not(presaveViewerNames).get();
 var delvalues= "";
 if(getDeletedViewer.length){
  for (var i=0; i < getDeletedViewer.length; i++) {
   delvalues += getDeletedViewer[i] + "; ";
  }
  setPickerInputElement("ff6", delvalues)
 }
 
 return true;
}

// Get Users/Names from the Poeple Picker
function getPickerInputElement(identifier) {
 var tags = document.getElementsByTagName('DIV');
 var returnval = [];
 for (var i=0; i < tags.length; i++) {
  var tempString = tags[i].id;
  if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf('UserField_upLevelDiv') > 0)){
   var innerSpans = tags[i].getElementsByTagName("SPAN");
   for(var j=0; j < innerSpans.length; j++) {
    if(innerSpans[j].id == 'content') {
     //return innerSpans[j].innerHTML;
     returnval.push(innerSpans[j].innerHTML);
    }
   }
  }
 }
 return returnval; 
}

// Set Deleted Users into another People Picker
function setPickerInputElement(identifier, value) {
  var tags = document.getElementsByTagName('DIV');

  for (var i=0; i < tags.length; i++) {
    var tempString = tags[i].id;
    //alert('tags[' + i + '].id = ' + tempString);
    if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf('UserField_upLevelDiv') > 0)){
      //alert('HIT for ' + identifier + ' id=' + tags[i].id + ' value=' + tags[i].value);
      tags[i].innerHTML = value;
      break;
    }
  }
}

Get SharePoint People Picker Value using Java Script

var PickerPerson = getPickerInputElement("ff13"); // Here ff13 is your people picker control ID

function getPickerInputElement(identifier) {

var tags = document.getElementsByTagName('DIV');

for (var i=0; i < tags.length; i++) {

var tempString = tags[i].id;

if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf('UserField_upLevelDiv') > 0))        {

var innerSpans = tags[i].getElementsByTagName("SPAN");

for(var j=0; j < innerSpans.length; j++) {

if(innerSpans[j].id == 'content') {

return innerSpans[j].innerHTML;

}

}

}

}

return null;

}

Validate and compare the people picker values..

<script type="text/javascript">

function PreSaveAction(){

var OwnerVal = getPickerInputElement("ff4");

var ManagerVal = getPickerInputElement("ff5");

if(OwnerVal == ManagerVal){

alert("Please enter different names.");

return false;

}

else{

return true;

}

}

function getPickerInputElement(identifier) {

var tags = document.getElementsByTagName('DIV');

for (var i=0; i < tags.length; i++) {

var tempString = tags[i].id;

if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf('UserField_upLevelDiv') > 0)){

var innerSpans = tags[i].getElementsByTagName("SPAN");

for(var j=0; j < innerSpans.length; j++) {

if(innerSpans[j].id == 'content') {

return innerSpans[j].innerHTML;

}

}

}

}

return null;

}

</script>