0

I have a knowledge check in HTML form, so I cant inject into CEWP or SP pages. It needs to be JS, CSS, and HTML. How do I populate a list if someone completes a Knowledge Check? It will add the score, module#, name, and date to list 'JAcerts' upon completion.

Here is my check: https://jsfiddle.net/Lance_Bitner/6gkL92av/6/

This line needs to be the action where I submit, I think? When the cert taker hits this button I need their info to go to the list, 'JAcerts'.

 <a id="btn" type="submit" onclick="window.location.href='#game-over'">Next</a> 

enter image description here

Check out my js in my jsfiddle. I HAVE TRIED so many JS codes but not connecting them correctly.

The list and Knowledge check are in the same site "/sites/OA03/Lists/JAcerts'" for the list and "sites/OA03/JA%20Training/" for Knowledge Check.

UPDATE - I did AddListItem but it is not populating:

 if (window.location.href === "JATrainingModule.html"){ document.getElementById("cert5").style.display = 'block'; } var thisUserAccount ; var login; $(document).ready(function() { thisUserAccount= $().SPServices.SPGetCurrentUser({ fieldName: "Name", debug: false }); if(thisUserAccount) { var pair = thisUserAccount.split("\\"); login = pair[1]; } document.getElementById("user").innerHTML = login; var d = new Date(); document.getElementById("date").innerHTML = d; $("#finalbtn").click(function(){ ExecuteOrDelayUntilScriptLoaded(AddListItem, "sp.js"); }); }); function AddListItem() { var q1Val,q2Val,q3Val,q4Val,q5Val,q6Val; var q1Answer = $("input[name='yes-1']:checked")[0]; var q2Answer = $("input[name='no-2']:checked")[0]; var q3Answer = $("input[name='no-3']:checked")[0]; var q4Answer = $("input[name='no-4']:checked")[0]; var q5Answer = $("input[name='no-5']:checked")[0]; var q6Answer = $("input[name='yes-6']:checked")[0]; var score = 0; if(q1Answer.classList.contains("one-a")){ q1Val = "Correct - "+ q1Answer.nextElementSibling.innerText.replace('\n','-'); score += 10; }else{ q1Val = "Incorrect - "+ q1Answer.nextElementSibling.innerText.replace('\n','-') } if(q2Answer.classList.contains("two-c")){ q2Val = "Correct - "+ q2Answer.nextElementSibling.innerText.replace('\n','-'); score += 10; }else{ q2Val = "Incorrect - "+ q2Answer.nextElementSibling.innerText.replace('\n','-') } if(q3Answer.classList.contains("three-d")){ q3Val = "Correct - "+ q3Answer.nextElementSibling.innerText.replace('\n','-'); score += 10; }else{ q3Val = "Incorrect - "+ q3Answer.nextElementSibling.innerText.replace('\n','-') } if(q4Answer.classList.contains("four-b")){ q4Val = "Correct - "+ q4Answer.nextElementSibling.innerText.replace('\n','-'); score += 10; }else{ q4Val = "Incorrect - "+ q4Answer.nextElementSibling.innerText.replace('\n','-') } if(q5Answer.classList.contains("five-a")){ q5Val = "Correct - "+ q5Answer.nextElementSibling.innerText.replace('\n','-'); score += 10; }else{ q5Val = "Incorrect - "+ q5Answer.nextElementSibling.innerText.replace('\n','-') } if(q6Answer.classList.contains("six-d")){ q6Val = "Correct - "+ q6Answer.nextElementSibling.innerText.replace('\n','-'); score += 10; }else{ q6Val = "Incorrect - "+ q6Answer.nextElementSibling.innerText.replace('\n','-') } var listTitle = "JAcerts"; //Get the current client context //context = SP.ClientContext.get_current(); new SP.ClientContext("https://-------.----.---.---.---/sites/OA03/"); var list = context.get_web().get_lists().getByTitle(listTitle); //Create a new record var listItemCreationInformation = new SP.ListItemCreationInformation(); var listItem = list.addItem(listItemCreationInformation); //Set the values /*listItem.set_item("Title", login); listItem.set_item("Module", 'Module 1'); listItem.set_item("Q1", q1Val); listItem.set_item("Q2", q2Val); listItem.set_item("Q3", q3Val); listItem.set_item("Q4", q4Val); listItem.set_item("Q5", q5Val); listItem.set_item("Q6", q6Val);*/ listItem.set_item("Title", login); listItem.set_item("Module", 'Module 1'); listItem.set_item("_x0051_1", q1Val); listItem.set_item("_x0051_2", q2Val); listItem.set_item("_x0051_3", q3Val); listItem.set_item("_x0051_4", q4Val); listItem.set_item("_x0051_5", q5Val); listItem.set_item("_x0051_6", q6Val); listItem.set_item("Score", score); listItem.update(); context.load(listItem); context.executeQueryAsync(Function.createDelegate(this, this.AddListItemSucceeded), Function.createDelegate(this, this.AddListItemFailed)); } function AddListItemSucceeded() { alert('Saved Successfully!'); } function AddListItemFailed(sender, args) { alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); } 
2
  • Where are you going to host your HTML/JS solution? In SharePoint? Or in a different platform? Commented May 1, 2021 at 21:35
  • SP2013 environment. Commented May 1, 2021 at 21:42

1 Answer 1

1

Please following steps:

1.Create a Web Part Page

2.Add a Script Editor web part

3.Paste the below code:

HTML:

<h2>Add Items to Test77</h2> <div id="AddListData"> <div> Title: <br/> <input type="text" id="txtTitle" /> </div> <br/> <div> Module: <br/> <input type="text" id="txtModule" /> </div> <br/> <div> Score: <br/> <input type="text" id="txtScore" /> </div> <br/> <div> <input id="btnSubmit" type="button" value="Submit" /> </div> </div> <div id="divResult"></div> 

JSON:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function(){ bindButtonClick(); }); function bindButtonClick() { $("#btnSubmit").on("click", function() { addListItem(); }); } function addListItem() { var title = $("#txtTitle").val(); var module = $("#txtModule").val(); var score = $("#txtScore").val(); var clientContext = new SP.ClientContext(); var oList = clientContext.get_web().get_lists().getByTitle('Test77'); var itemCreateInfo = new SP.ListItemCreationInformation(); this.oListItem = oList.addItem(itemCreateInfo); oListItem.set_item('Title', title); oListItem.set_item('Module', module); oListItem.set_item('Score', score); oListItem.update(); clientContext.load(oListItem); clientContext.executeQueryAsync( Function.createDelegate(this, this.onAddSucceeded), Function.createDelegate(this, this.onAddFailed) ); } function onAddSucceeded(sender, args) { $("#divResult").html("Item successfully added!"); } function onAddFailed(sender, args) { alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); } </script> 

enter image description here

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.