Submit User Details using ECMA script

Hi,

There was requirement i.e.

First user clicks on the checkbox as an indication that content as acceptable

After clicking on the Submit button, user details like employee name, employee id have been fetched using JSON.

After that the same have been inserted into the Sharepoint list

For this I have created list with columns Employee Name, Employee Number as Single line of text

Below is the piece of script that has been written to achieve the same

<script language="ecmascript" type="text/ecmascript">

var userarray = [];

$(function(){

                SP.SOD.executeFunc('sp.js', 'SP.ClientContext', GetCurrentUserDetails);

                $(document).on('change','#chkboxagree',function(){

                                if($(this).is(":checked")) {           

                                                $('#btnsaveuserdetails').removeAttr('disabled');

                                }

                                else{$('#btnsaveuserdetails').attr('disabled' , 'disabled');}       

                });

               

                $('#suiteBar').hide();

                var hidechek = $('input[type="checkbox"]');      

                window.onbeforeprint = hidechek.hide();

});

var userid = _spPageContextInfo.userId;

function GetCurrentUserDetails() {

                var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";

                var requestHeaders = { "accept" : "application/json;odata=verbose" };

                $.ajax({

                  url : requestUri,

                  contentType : "application/json;odata=verbose",

                  headers : requestHeaders,

                  success : onSuccess,

                  error : onError

                });

}

function onSuccess(data, request){ 

                var loginName = data.d.LoginName.split('|')[1];

                loginName=loginName.replace("mindtree\\","")

                loginName=loginName.toUpperCase();

                $('.lblMID').text(loginName);

                displayname = data.d.Title;

                userarray.push(displayname);

                userarray.push(loginName);

                var currentDate = new Date();

                var day = currentDate.getDate();

                var month = currentDate.getMonth() + 1;

                var year = currentDate.getFullYear();

                document.getElementById('lblsignaturedate').innerHTML = day + "/" + month + "/" + year;

}

function onError(error) {

  alert(error);

}

function SaveUserDetails(){                       

                $('#chkboxagree').attr('disabled' , 'disabled');                    

                var clientContext = SP.ClientContext.get_current();

                var oList = clientContext.get_web().get_lists().getByTitle('listname');

                               

                var itemCreateInfo = new SP.ListItemCreationInformation();

                this.oListItem = oList.addItem(itemCreateInfo);

                oListItem.set_item('EmployeeName', userarray[0]);

                oListItem.set_item('EmployeeMID', userarray[1]);

                oListItem.update();

                clientContext.load(oListItem);

                $("#successmsg").css("display","block");

                document.getElementById('successmsg').innerHTML=userarray[0]+'('+userarray[1]+')'+' HAVE READ THE ABOVE INFORMATION AND ACCEPTED THE SAME';

                clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

function onQuerySucceeded() {

                $('#btnsaveuserdetails').attr('disabled' , 'disabled');

                var empName= $('.lblcurrentusername').text(displayname);

}

function onQueryFailed(sender, args) {

}

function printDiv(divName) { 

                var printContents = document.getElementById(divName).innerHTML;

                document.body.innerHTML = printContents;  

                 var printdivdata=window.open('','_blank');

               

                 printdivdata.document.write(printContents);

                printdivdata.document.close();

                printdivdata.focus();

                printdivdata.print();

                printdivdata.close();

}

</script>

<div id="transportladycontent">

<div class="cabdetails">

<br/><br/><br/>

<h1>header</h1><br/>

  <p>Effective date: 01, January 2013</p><br/>

</div>

<b><u>text</u></b><br/><br/>

<b><h3> header:</h3><br/></b>

<b><h3>Header </h3><br/></b>

<ul class="list">

<li>text.</li><br/>

<li> text </li><br/>

<li> text </li><br/>

<li> text  </li><br/>

<li>I text </li><br/>

<li> text.</li></ul>

<br/>

<div class="no-print">

<label for="chkboxagree"><input type="checkbox" id="chkboxagree"> I accept that I have read the above information and understood the same.</label><br/><br/>

</div>

<div class="userdata" style="display:none">

                <p class="sig"><br/>Signature of the Employee<br/><br/><br/><br/></p>

                <p class="name">Name : <span class="lblcurrentusername shw"></span></p>

                <p class="eid">Employee ID : <span class="lblMID shw"></span></p>

                <p class="dat">Date : <span id="lblsignaturedate"></span></p>

</div>

<!--<p class="mesg" id="lbluserdetails"></p>-->

</div>

<div class="footerbtns">

<input type="button" id="btnsaveuserdetails" value="Submit" class="btn save-btn" onclick="SaveUserDetails()" disabled="disabled">

</div>

<p><b><label id="successmsg" value="" style="display:none"></b></p>

<style type="text/css">

@media screen {

                #transportladycontent .cabdetails, .empsign, .sig, .dat{display: none;}

                .userdata span{display: inline;}

                .footerbtns{float:right;}

                .footerbtns .btn{display:inline-block;margin:0 0 0 10px;}

                #transportladycontent ul{list-style:disc}

                #transportladycontent ul li{margin:0 0 0 20px;}

                .ms-rtestate-field h3{float:none;}

                .userdata p span{padding:0 0 0 5px;font-family:open_sanssemibold;}

                .userdata p{margin:0 0 4px;}

                .sig,.name,.eid,.dat{line-height:25px;}

                input[type=button].save-btn {color: #fff;padding: 8px 20px;border: 0;font: 15px 'open_sansbold',Arial, Helvetica, sans-serif;cursor: pointer;width: auto;margin-top: 15px;}

                .save-btn:disabled {opacity: .45;cursor: not-allowed !important;}

                input{display:inline-block!important;}

                #konnectHdr .konnect-head,.knct-ppl-hb{background:none;}

                .konnect-hdr{background:url(/_layouts/15/PeopleHub/images/green_stripes.png) repeat scroll 0 0;}

}

@media print {

                * {display: none;margin: 0;

                padding: 0;

                font-size: 9.5pt}

                body {display: none; }

                h1{padding:50px 0 0 0;}

                .cabdetails, .empsign,.sig, .dat{display: none;} 

                #transportladycontent ul li{margin:0 0 10px 20px!important;}

                #transportladycontent ul{list-style-type:disc!important}

                #transportladycontent p{margin: 0px 0px 10px 0px;line-height: 1.2;}

                .shw{display:none;}

                .empsign p{float:right;text-align:right;line-height:15px;}

                .userdata .name,.userdata .eid,.mesg{display:none;}

                .no-print {display:none!important;}            

}

</style>

Finally has been achieved as below