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>
<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>
<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'>
<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.
*/
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 '';
}
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.
*/
Do nothing more until all questions are answered.
*/
if (question1 == '' || question2 == '') {
alert('Please answer all questions.')
return;
}
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();
var web = context.get_web();
// Get the survey list
var list = web.get_lists().getByTitle('SampleSurvey');
var list = web.get_lists().getByTitle('SampleSurvey');
// Create a new list item
var itemCreateInfo = new SP.ListItemCreationInformation();
var listItem = list.addItem(itemCreateInfo);
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();
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);
var success = Function.createDelegate(this, this.onSuccess);
var failure = Function.createDelegate(this, this.onFailure);
// Execute an async query
context.executeQueryAsync(success,failure);
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);
}
// Refresh the page.
// SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
}
// Async query failed.
function onFailure(sender, args)
{
alert(args.get_message());
}
</script>
}
</script>