Add Feedback in any Area /Item

Code  In  WebPart:

<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">

                <SharePoint:ListItemProperty Property="BaseName" maxlength="40" runat="server"/>

<ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><ZoneTemplate></ZoneTemplate><WebPartPages:WebPartZone runat="server" ID="__WebPartPageLibraryZone__"><ZoneTemplate><WebPartPages:TitleBarWebPart runat="server" HeaderTitle="Untitled_1" Title="Web Part Page Title Bar" FrameType="None" SuppressWebPartChrome="False" Description="" IsIncluded="True" ZoneID="__WebPartPageLibraryZone__" PartOrder="1" FrameState="Normal" AllowRemove="False" AllowZoneChange="True" AllowMinimize="False" AllowConnect="True" AllowEdit="True" AllowHide="True" IsVisible="True" DetailLink="" HelpLink="" HelpMode="Modeless" Dir="Default" PartImageSmall="" MissingAssembly="Cannot import this Web Part." PartImageLarge="" IsIncludedFilter="" ExportControlledProperties="True" ConnectionID="00000000-0000-0000-0000-000000000000" ID="g_72a98a1d_b438_4292_bffa_fa3540ee16ea" AllowClose="False" ChromeType="None" ExportMode="All" __MarkupType="vsattributemarkup" __WebPartId="{72A98A1D-B438-4292-BFFA-FA3540EE16EA}" WebPart="true" Height="" Width=""></WebPartPages:TitleBarWebPart>

                </ZoneTemplate></WebPartPages:WebPartZone></asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

                <meta name="GENERATOR" content="Microsoft SharePoint" />

                <meta name="ProgId" content="SharePoint.WebPartPage.Document" />

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                <meta name="CollaborationServer" content="SharePoint Team Web Site" />

                <SharePoint:ScriptBlock runat="server">

                var navBarHelpOverrideKey = "WSSEndUser";

                </SharePoint:ScriptBlock>

<style type="text/css">

.Empty

    {

     

       /* background:url("../SiteAssets/StarFeedbackImages/Empty.jpg") no-repeat top left;*/

       /* background-image:url('../SiteAssets/StarFeedbackImages/Empty.jpg');*/

       background: url("../SiteAssets/StarFeedbackImages/Empty.jpg") !important;

       min-width:2em !important;

       padding:3px 10px !important;

      

              

     }

   

        .Empty:hover

    {

                       background-image: url("../SiteAssets/StarFeedbackImages/Filled.png") !important;

                        min-width:2em !important;

                        padding:3px 10px !important;

                      /*  background: url('/SiteAssets/StarFeedbackImages/Filled.png');*/

    }

    .Filled

    {

                       background-image: url("../SiteAssets/StarFeedbackImages/Filled.png") !important;

                        min-width:2em !important;

                        padding:3px 10px !important;

                       

                               

        /*background: url('/SiteAssets/StarFeedbackImages/Filled.png') no-repeat top left;*/

    }

   

    input[type=button]button

    {

                min-width:2em!important;

}

.btnSubmitCss

{

/*background-color:gray!important;

color:white!important;*/

position:absolute;

margin-left:520px;

margin-top:-30px;

}

.ms-dlgTitle

{

                background:lightgray!important;

}

.ms-cui-topBar2

{

                display:none;

}

</style></asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderSearchArea" runat="server">

                <SharePoint:DelegateControl runat="server"

                                ControlId="SmallSearchInputBox"/>

</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderPageDescription" runat="server">

                <SharePoint:ProjectProperty Property="Description" runat="server"/>

</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

<script src="../SiteAssets/Script/jquery-3.1.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

    function Decide(option) {

    //alert('Hi');

        var temp = "";

        document.getElementById('lblRate').innerText = "";

        if (option == 1) {

            document.getElementById('Rating1').className = "Filled";

            document.getElementById('Rating2').className = "Empty";

            document.getElementById('Rating3').className = "Empty";

            document.getElementById('Rating4').className = "Empty";

            document.getElementById('Rating5').className = "Empty";

            temp = "1-Poor";

        }

        if (option == 2) {

            document.getElementById('Rating1').className = "Filled";

            document.getElementById('Rating2').className = "Filled";

            document.getElementById('Rating3').className = "Empty";

            document.getElementById('Rating4').className = "Empty";

            document.getElementById('Rating5').className = "Empty";

            temp = "2-Ok";

        }

        if (option == 3) {

            document.getElementById('Rating1').className = "Filled";

            document.getElementById('Rating2').className = "Filled";

            document.getElementById('Rating3').className = "Filled";

            document.getElementById('Rating4').className = "Empty";

            document.getElementById('Rating5').className = "Empty";

            temp = "3-Fair";

        }

        if (option == 4) {

            document.getElementById('Rating1').className = "Filled";

            document.getElementById('Rating2').className = "Filled";

            document.getElementById('Rating3').className = "Filled";

            document.getElementById('Rating4').className = "Filled";

            document.getElementById('Rating5').className = "Empty";

            temp = "4-Good";

        }

        if (option == 5) {

            document.getElementById('Rating1').className = "Filled";

            document.getElementById('Rating2').className = "Filled";

            document.getElementById('Rating3').className = "Filled";

            document.getElementById('Rating4').className = "Filled";

            document.getElementById('Rating5').className = "Filled";

            temp = "5-Nice";

        }

        document.getElementById('lblRate').innerText = temp;

        return false;

    }

   

    

    function AddFeedbacInList()

{

   var siteurl=_spPageContextInfo.siteAbsoluteUrl;

    var clientContext = new SP.ClientContext(siteurl);

    var web=clientContext.get_web();

    var oList = web.get_lists().getByTitle('Feedback');

    var itemCreateInfo = new SP.ListItemCreationInformation();

    this.oListItem = oList.addItem(itemCreateInfo);

    var feedback=$('#txtfeedback').val();

    if (feedback.length<1)

    {

     alert('Comment cannot be blank');

     return false;

    }

  

    var feedbackRatingVal=$('#lblRate').text();

    oListItem.set_item('Title', feedback);

    oListItem.set_item('feedback',feedback);

    oListItem.set_item('FeedbackRating',feedbackRatingVal);

    oListItem.update();

    clientContext.load(oListItem);

    clientContext.executeQueryAsync(

        Function.createDelegate(this, this.onQuerySucceeded),

        Function.createDelegate(this, this.onQueryFailed)

    );

}

function onQuerySucceeded() {

   alert('Submitted Successfully!!');

   $('#txtfeedback').val('');

   window.frameElement.commitPopup();

}

function onQueryFailed(sender, args) {

   alert('Request failed. ' + args.get_message() +

       '\n' + args.get_stackTrace());

}

</script>

<!--<table id="tblfeedback" style="position:relative;"><tr><td style="padding-top:45px;"><b>Feedback:</b></td><td><div id="Divfeedbackdiv" style="padding-top:13px;position:absolute;"><textarea id="txtfeedback" maxlength="500" placeholder="Please Type your feedback here" style="width:400px;height:200px;border:1px solid black;padding-top:0px;"></textarea></div></td></tr>-->

<table id="tblfeedback" style="position:relative;"><tr><td><div id="divFeedback" style="position:absolute;padding-top:3px;"><b>Feedback:</b></div></td><td><div id="Divfeedbackdiv" style="padding-top:0px;position:absolute;"><textarea id="txtfeedback" maxlength="500" placeholder="Please Type your feedback here" style="width:400px;height:200px;border:1px solid black;padding-top:0px;"></textarea></div></td></tr>

<tr><div id="divfeedbackRating"><td style="padding-top:230px;"><b>Please give an overall rating :</b></td><td style="padding-top:226px;"><label id="lblRate"></label>

<input type="button"  ID="Rating1" class="Empty"  onclick="return Decide(1);" style="border:none;" width="20px" height="20px"/>

<input type="button"  ID="Rating2" class="Empty"   onclick="return Decide(2);" style="border:none;"/>

<input type="button"  ID="Rating3"  class="Empty"   onclick="return Decide(3);" style="border:none;"/>

<input type="button"  ID="Rating4"  class="Empty"   onclick="return Decide(4);" style="border:none;"/>

<input type="button"  ID="Rating5" class="Empty"  onclick="return Decide(5);" style="border:none;"/>

</td></div></tr>

<tr><td><div class="btnSubmitCss"><input type="button" value="Submit" id="btnSubmit" onclick="AddFeedbacInList();" style="background:lightgray;color:black;font-weight:bold"></div></td></tr>

</table>

</asp:Content>