I am trying to insert dynamic data (question number, question and answer checked) to a new sharepoint list. The data needs to be read from another list, i.e. "Questions1List". I have a quiz page in HTML (.aspx). The data to be captured in another list (StudentList) is:
- The student ID that student fills in a textbox
- Question number coming from Questions1List
- Question number coming from Questions1List
- Answer (radio button value) checked by student. I am not getting how to insert those values (values from Questions1List) to StudentList dynamically.
I want to capture StudentID, Question number, Question and Answer. Whenever I am trying to insert the values in StudentList, the last value of question number is coming while question and answer both are coming as "NaN". Please help me to resolve this issue.
HTML Code:
<html>
<head>
<meta name="WebPartPageExpansion" content="full" />
<link rel="stylesheet" type="text/css" href="bootstrap.css"/>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript"
src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
<script src="/_layouts/15/init.js" type="text/javascript"></script>
<script src="/_layouts/15/sp.core.js" type="text/javascript"></script>
<script src="/_layouts/15/sp.runtime.js" type="text/javascript"></script>
<script src="/_layouts/15/sp.js" type="text/javascript"></script>
<script type="text/javascript" src="jsom.js"></script>
<script src="https://rawgit.com/kswedberg/jquery-smooth-
scroll/master/jquery.smooth-scroll.js"></script>
</head>
<body>
<header>
<div class="logo">
<a href=""><img alt="" src="Logo.jpg" typeof="foaf:Image"
class="site-logoDiv"></a>
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="">Register</a></li>
<li><a href="">Login</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Terms of Use</a></li>
<li><a href="">Privacy Statement</a></li>
<li><a href="">Help</a></li>
</ul>
</div>
</nav>
</header>
<form>
<section>
<div class="studID">
<label id="IDlabel">Student ID:</label>
<input type="text" id="stID" name="studentID" placeholder="Please enter your ID" />
</div>
</section>
<div class="container">
<div class="testContent">
<h2 id="titleText">MULTIPLE CHOICE QUESTIONS</h2>
</div>
<div id="qDiv" class="questionDiv"></div>
<div id="optDiv" class="optionsDiv">
</div>
<div class="submitBtnDiv">
<input type="submit" class="submitBtn" value="SUBMIT" onclick="addListItem()"/>
</div>
</div>
</form>
<footer style="margin-top:100px;">
<div class="container fttop">
<div class="col col-lg-3 col-md-3 col-sm-5">
<h2>Contact Us</h2>
<hr>
<p>Institute Name, <br>
#123, M. G. road,<br>
Near IIT College,<br>
City - 122 433<br>
<img src="mobile_icon.png"> 123456789<br>
<img src="email_icon.png"> contact@institute_name.com
</p>
</div>
<div class="col col-lg-3 col-md-3 col-sm-5">
<h2>Important Links</h2>
<hr>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="">Register</a></li>
<li><a href="">Login</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Terms of Use</a></li>
<li><a href="">Privacy Statement</a></li>
<li><a href="">Help</a></li>
</ul>
</div>
</div>
<div class="ftbottom">
<div class="container">
© institute_name 2019 - All Rights Reserved.
</div>
</div>
</footer>
</body>
</html>
JS code:
function retriveListItem()
{
var siteUrl = '/sites/NewWorkSite';
var context = new SP.ClientContext(siteUrl);
var list = context.get_web().get_lists().getByTitle('Questions1List');
var caml = new SP.CamlQuery();
caml.set_viewXml("<View><Query><OrderBy><FieldRef Name='QuestionNumber' Ascending='TRUE' /></OrderBy></Query></View>");
returnedItems = list.getItems(caml);
context.load(returnedItems);
context.executeQueryAsync(onSucceededCallback, onFailedCallback);
}
$(document).ready(function ()
{ ExecuteOrDelayUntilScriptLoaded(retriveListItem, "sp.js");
});
function onSucceededCallback(sender, args)
{
var enumerator = returnedItems.getEnumerator();
//Formulate HTML from the list items
var MainResult = 'Items in the Divisions list: <br><br>';
//Loop through all the items
while(enumerator.moveNext())
{
var count = count + 1;
var listItem = enumerator.get_current();
var qNo = listItem.get_item("QuestionNumber");
var qst = listItem.get_item("Question");
var optionA = listItem.get_item("OptionA");
var optionB = listItem.get_item("OptionB");
var optionC = listItem.get_item("OptionC");
var optionD = listItem.get_item("OptionD");
$('#qDiv').append("<label>" + qNo+ "." + "</label> " + "<label id='qts'>" + qst + "</label>" + "</br>"
+ "<label>A: </label> " + "<input id='one' class='rdBtn' type='radio' name = '" + qNo+ "' value = 'A'/> " + optionA + " </br>"
+ "<label>B: </label> " + "<input id='two' class='rdBtn' type='radio' name = '" + qNo+ "' value = 'B'/> " + optionB + "</br>"
+ "<label>C: </label> " + "<input id='three' class='rdBtn' type='radio' name = '" + qNo+ "' value = 'C'/> " + optionC + "</br>"
+ "<label>D: </label> " + "<input id='four' class='rdBtn' type='radio' name = '" + qNo+ "' value = 'D'/> " + optionD + "</br>" + "</br>");
}
}
//This function fires when the query fails
function onFailedCallback(sender, args)
{
//Formulate HTML to display details of the error
var markup = '<p>The request failed: <br>';
markup1 = 'Message: ' + args.get_message() + '<br>';
//Display the details
}
// Adding list items code starts here
function addListItem()
{
var itemArray = [];
var clientContext = SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('StudentList');
for (var i = 0; i < 5; i++) {
var itemCreateInfo = new SP.ListItemCreationInformation();
var oListItem = oList.addItem(itemCreateInfo);
oListItem.set_item('StudentID', "100" );
oListItem.set_item('QuestionNumber', "1"); // Here I need dynamic value from Questions1List
oListItem.set_item('Question', "Some Question"); // Here I need dynamic value from Questions1List
oListItem.set_item('Answer', "Some Answer"); // Here student answer option checked value needed
oListItem.update();
itemArray[i] = oListItem;
clientContext.load(itemArray[i]);
}
clientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);
}
function onQuerySucceeded() {
itemArray.forEach(function(item) {
console.log(item.get_id());
});
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
