Sunday, May 17, 2015

Introduction

In SharePoint 2013 there is nice feature that we can use script editor web part to insert JavaScript along with HTML code in Home page or  other content pages.

Background

Before going to actual code let me tell you on some of the important tips to follow.

1. use  script referene as below lines.
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
2.  use executeFunc to load sharepoint javascript files  in 2013, if your using 2010 version the use sp.sod.executeordelayuntilscriptloaded
In Sharepoint 2013
SP.SOD.executeFunc('sp.js','SP.ClientContext',MainFunction);
In Sharepoint 2010
refer:https://msdn.microsoft.com/en-us/library/office/ff411788%28v=office.14%29.aspx 
sp.sod.executeordelayuntilscriptloaded
3. I am giving a sample script which takes a survey from users and submit the data to survey list,
Note: SampleSurvey list needs to be created before executing this script.
4. Add Script editor webpart to your page and edit the snippet and paste the below code.
Using the code
    <div onkeydown='javascript:if (event.keyCode == 13) postSurvey()'>
    <p>1. How is the weather?<br />
         <input name='q1' id='q1Bad' type='radio' value='Bad'/><label for='q1Bad'> Bad</label><br />
         <input name='q1' id='q1Good' type='radio' value='Good'/><label for='q1Good'> Good</label><br />
         <input name='q1' id='q1Great' type='radio' value='Great'/><label for='q1Great'> Great</label>
    </p>
    <p>2. How are you doing?<br />
         <input name='q2' id='q2Fine' type='radio' value='Fine'/> <label for='q2Fine'>Fine</label><br />
         <input name='q2' id='q2Good' type='radio' value='Good' /><label for='q2Good'> Good</label><br />
         <input name='q2' id='q2Great' type='radio' value='Great' /><label for='q2Great'> Great</label>
    </p>
    <input type='button' value='Submit' onclick='javascript:postSurvey();' />
</div>
 <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>
  <script language='javascript' type='text/javascript'> 
        /* Returns the value of the input element that is checked.
           Accepts either an array or a single input element of
           type radio or checkbox.
           Returns an empty string if none are checked or if
           there are no radio buttons or check boxes.
        */ 
        function getCheckedValue(buttonGroup) {
            if (!buttonGroup)
                return '';
            var objLength = buttonGroup.length;
            if (objLength == undefined) {
                if (buttonGroup.checked)
                    return buttonGroup.value;
                else
                     return '';
            }
            for (var i = 0; i < objLength; i++) {
                if (buttonGroup[i].checked)
                    return buttonGroup[i].value;
            }
            return '';
        }
     
       
        function postSurvey() {
         
            // Retrieve the radio button values 

         
            var question1 = getCheckedValue(document.getElementsByName('q1'));
            var question2 = getCheckedValue(document.getElementsByName('q2')); 
            /* Validate the response.
               Do nothing more until all questions are answered.
            */ 
            if (question1 == '' || question2 == '') {
                alert('Please answer all questions.')
                return;
            } 
          SP.SOD.executeFunc('sp.js','SP.ClientContext',MainFunction);
       
       
        }

      function MainFunction()
      {

            var question1 = getCheckedValue(document.getElementsByName('q1'));
            var question2 = getCheckedValue(document.getElementsByName('q2'));
          // Get the current context
           var context = new SP.ClientContext.get_current(); 
              // Get the current site (SPWeb)

           var web = context.get_web(); 
           // Get the survey list
           var list = web.get_lists().getByTitle('SampleSurvey'); 
           // Create a new list item
           var itemCreateInfo = new SP.ListItemCreationInformation();
           var listItem = list.addItem(itemCreateInfo); 
           /* Set fields in the item.
              In managed code, this would be listItem[fieldname] = value.
              In Javascript, call listItem.set_item(fieldName,value).
           */
           listItem.set_item('How_x0020_is_x0020_the_x0020_wea', question1);
           listItem.set_item('How_x0020_are_x0020_you_x0020_do', question2);
           listItem.update(); 
           // Create callback handlers
           var success = Function.createDelegate(this, this.onSuccess);
           var failure = Function.createDelegate(this, this.onFailure); 
           // Execute an async query
           context.executeQueryAsync(success,failure);
        }
    // Async query succeeded.
    function onSuccess(sender, args)
    {
        alert('Thank you for responding to our survey!');
       
        // Refresh the page.

     //   SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
        }
    // Async query failed.
    function onFailure(sender, args) 
    {
    alert(args.get_message());
      }

    </script>