I created a form with HTML and JS for which the ultimate aim is to store data in a SharePoint list when the Submit button is clicked.
For some reason, the code does not work when I embed it inside an SharePoint page. I cannot see any errors in the developer's console.
When I run the code outside of SP it gets to the alert('In submitData');
but obviously does not work since it is not on SP. When I embed the code in an SP page, that alert is not shown.
Code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
html
{
font-family: Calibri;
}
.tbl
{
border: 1px black solid;
}
.tbl table
{
text-align: center;
}
.tbl th
{
border: 1px black solid;
background-color: lightgray;
}
.tbl td
{
border: 1px black solid;
}
</style>
<script type="text/javascript">
// A $( document ).ready() block.
$( document ).ready(function() {
n = new Date();
y = n.getFullYear();
m = n.getMonth() + 1;
d = n.getDate();
<!-- document.getElementById("date").innerHTML = m + "/" + d + "/" + y; -->
for (i = 0; i < 5; i++)
document.getElementsByClassName("date")[i].innerHTML = m + "/" + d + "/" + y;
});
</script>
<script type="text/javascript">
function createListItem(check, description, dpsp1, cmdc1, cmdc2, cmas1, sqn41, sqn42, cmws1, cmws2, issues, correctiveaction) {
var clientContext = new SP.ClientContext(siteUrl);
var oList = clientContext.get_web().get_lists().getByTitle('WeeklyReport');
var itemCreateInfo = new SP.ListItemCreationInformation();
this.oListItem = oList.addItem(itemCreateInfo);
oListItem.set_item('Check', check);
oListItem.set_item('Check Description', description);
oListItem.set_item('DPSP1', dpsp1);
oListItem.set_item('CDMDC1', cmdc1);
oListItem.set_item('CDMDC2', cmdc2);
oListItem.set_item('CMAS1', cmas1);
oListItem.set_item('SQN41', sqn41);
oListItem.set_item('SQN42', sqn42);
oListItem.set_item('CMWS1', cmws1);
oListItem.set_item('CMWS2', cmws2);
oListItem.set_item('Issues', issues);
oListItem.set_item('Corrective Action', correctiveaction);
oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded() {
alert('Item created: ' + oListItem.get_id());
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
function submitData()
{
alert('In submitData');
/*GET SYSTEM CLOCK VALUES FOR SERVER*/
var DPSP1_Clock = document.getElementById("getDPSP1Clock").value;
var CMDC1_Clock = document.getElementById("getCMDC1Clock").value;
var CMDC2_Clock = document.getElementById("getCMDC2Clock").value;
var CMAS1_Clock = document.getElementById("getCMAS1Clock").value;
var SQN41_Clock = document.getElementById("getSQN41Clock").value;
var SQN42_Clock = document.getElementById("getSQN42Clock").value;
var CMWS1_Clock = document.getElementById("getCMWS1Clock").value;
var CMWS2_Clock = document.getElementById("getCMWS2Clock").value;
var Issues_Clock = document.getElementById("getClockIssues").value;
var CA_Clock = document.getElementById("getClockCorrectiveActions").value;
createListItem("System Clock",
"System Clock Verification of the correct Time",
DPSP1_Clock,
CMDC1_Clock,
CMDC2_Clock,
CMAS1_Clock,
SQN42_Clock,
SQN41_Clock,
CMWS1_Clock,
CMWS2_Clock,
Issues_Clock,
CA_Clock);
/*GET BACKUP VALUES FOR SERVER*/
var DPSP1_Backup = document.getElementById("getDPSP1Backup").value;
var CMDC1_Backup = document.getElementById("getCMDC1Backup").value;
var CMDC2_Backup = document.getElementById("getCMDC2Backup").value;
var CMAS1_Backup = document.getElementById("getCMAS1Backup").value;
var SQN41_Backup = document.getElementById("getSQN41Backup").value;
var SQN42_Backup = document.getElementById("getSQN42Backup").value;
var CMWS1_Backup = document.getElementById("getCMWS1Backup").value;
var CMWS2_Backup = document.getElementById("getCMWS2Backup").value;
var Issues_Backup = document.getElementById("getBackupIssues").value;
var CA_Backup = document.getElementById("getBackupCorrectiveActions").value;
createListItem("Backups",
"Confirm status of DPM backups",
DPSP1_Backup,
CMDC1_Backup,
CMDC2_Backup,
CMAS1_Backup,
SQN42_Backup,
SQN41_Backup,
CMWS1_Backup,
CMWS2_Backup,
Issues_Backup,
CA_Backup);
/*GET ULS LOGS VALUES FOR SERVER*/
var DPSP1_Logs = document.getElementById("getDPSP1Logs").value;
var CMDC1_Logs = document.getElementById("getCMDC1Logs").value;
var CMDC2_Logs = document.getElementById("getCMDC2Logs").value;
var CMAS1_Logs = document.getElementById("getCMAS1Logs").value;
var SQN41_Logs = document.getElementById("getSQN41Logs").value;
var SQN42_Logs = document.getElementById("getSQN42Logs").value;
var CMWS1_Logs = document.getElementById("getCMWS1Logs").value;
var CMWS2_Logs = document.getElementById("getCMWS2Logs").value;
var Issues_Logs = document.getElementById("getLogsIssues").value;
var CA_Logs = document.getElementById("getLogsCorrectiveActions").value;
createListItem("ULS Logs",
"Check for high level errors",
DPSP1_Logs,
CMDC1_Logs,
CMDC2_Logs,
CMAS1_Logs,
SQN42_Logs,
SQN41_Logs,
CMWS1_Logs,
CMWS2_Logs,
Issues_Logs,
CA_Logs);
/*GET SQL CLUSTER STATUS VALUES FOR SERVER*/
var DPSP1_SQL = document.getElementById("getDPSP1SQL").value;
var CMDC1_SQL = document.getElementById("getCMDC1SQL").value;
var CMDC2_SQL = document.getElementById("getCMDC2SQL").value;
var CMAS1_SQL = document.getElementById("getCMAS1SQL").value;
var SQN41_SQL = document.getElementById("getSQN41SQL").value;
var SQN42_SQL = document.getElementById("getSQN42SQL").value;
var CMWS1_SQL = document.getElementById("getCMWS1SQL").value;
var CMWS2_SQL = document.getElementById("getCMWS2SQL").value;
var Issues_SQL = document.getElementById("getSQLIssues").value;
var CA_SQL = document.getElementById("getSQLCorrectiveActions").value;
createListItem("SQL Cluster Status",
"Look for errors in the SQL Fail over cluster Manager",
DPSP1_SQL,
CMDC1_SQL,
CMDC2_SQL,
CMAS1_SQL,
SQN42_SQL,
SQN41_SQL,
CMWS1_SQL,
CMWS2_SQL,
Issues_SQL,
CA_SQL);
/*GET HEALTH ANALYZER STATUS VALUES FOR SERVER*/
var DPSP1_Health = document.getElementById("getDPSP1Health").value;
var CMDC1_Health = document.getElementById("getCMDC1Health").value;
var CMDC2_Health = document.getElementById("getCMDC2Health").value;
var CMAS1_Health = document.getElementById("getCMAS1Health").value;
var SQN41_Health = document.getElementById("getSQN41Health").value;
var SQN42_Health = document.getElementById("getSQN42Health").value;
var CMWS1_Health = document.getElementById("getCMWS1Health").value;
var CMWS2_Health = document.getElementById("getCMWS2Health").value;
var Issues_Health = document.getElementById("getHealthIssues").value;
var CA_Health = document.getElementById("getHealthCorrectiveActions").value;
createListItem("Sharepoint Health Analyzer",
"Check the Health Analyser in the Central Admin",
DPSP1_Health,
CMDC1_Health,
CMDC2_Health,
CMAS1_Health,
SQN42_Health,
SQN41_Health,
CMWS1_Health,
CMWS2_Health,
Issues_Health,
CA_Health);
alert('Added successfully');
}
</script>
<table class="tbl">
<tr>
<th colspan="13">Weekly Health Check: Collaboration</th>
</tr>
<tr>
<th>Date</th>
<th>Check</th>
<th>Check Description</th>
<th>DPSP1</th>
<th>CMDC1</th>
<th>CMDC2</th>
<th>CMAS1</th>
<th>SQN41</th>
<th>SQN42</th>
<th>CMWS1</th>
<th>CMWS2</th>
<th>Issues</th>
<th>Corrective Action</th>
</tr>
<tr>
<td><p class="date"></p></td>
<td>System Clock</td>
<td>System Clock Verification of the correct Time</td>
<td>
<select id="getDPSP1Clock">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMDC1Clock">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMDC2Clock">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMAS1Clock">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getSQN41Clock">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getSQN42Clock">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMWS1Clock">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMWS2Clock">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<textarea rows="4" cols="30" id="getClockIssues">
</textarea>
</td>
<td>
<textarea rows="4" cols="30" id="getClockCorrectiveActions">
</textarea>
</td>
</tr>
<tr>
<td><p class="date"></p></td>
<td>Backups</td>
<td>Confirm status of DPM backups</td>
<td>
<select id="getDPSP1Backup">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMDC1Backup">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMDC2Backup">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMAS1Backup">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getSQN41Backup">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getSQN42Backup">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMWS1Backup">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMWS2Backup">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<textarea rows="4" cols="30" id="getBackupIssues">
</textarea>
</td>
<td>
<textarea rows="4" cols="30" id="getBackupCorrectiveActions">
</textarea>
</td>
</tr>
<tr>
<td><p class="date"></p></td>
<td>ULS Logs</td>
<td>Check for high level errors</td>
<td>
<select id="getDPSP1Logs">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMDC1Logs">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMDC2Logs">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMAS1Logs">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getDSQN41Logs">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getSQN42Logs">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMWS1Logs">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMWS2Logs">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<textarea rows="4" cols="30" id="getLogsIssues">
</textarea>
</td>
<td>
<textarea rows="4" cols="30" id="getLogsCorrectiveAction">
</textarea>
</td>
</tr>
<tr>
<td><p class="date"></p></td>
<td>SQL Cluster Status</td>
<td>Look for errors in the SQL Fail over cluster Manager</td>
<td>
<select id="getDPSP1SQL">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMDC1SQL">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMDC2SQL">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMAS1SQL">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getSQN41SQL">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getSQN42SQL">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMWS1SQL">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMWS2SQL">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<textarea rows="4" cols="30" id="getSQLIssues">
</textarea>
</td>
<td>
<textarea rows="4" cols="30" id="getSQLCorrectiveActions">
</textarea>
</td>
</tr>
<tr>
<td><p class="date"></p></td>
<td>Sharepoint Health Analyzer</td>
<td>Check the Health Analyser in the Central Admin</td>
<td>
<select id="getDPSP1Health">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMDC1Health">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMDC2Health">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMAS1Health">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getSQN41Health">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getSQN42Health">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMWS1Health">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<select id="getCMWS2Health">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<textarea rows="4" cols="30" id="getHealthIssues">
</textarea>
</td>
<td>
<textarea rows="4" cols="30"id="getHealthCorrectiveActions">
</textarea>
</td>
</tr>
<tr>
<td colspan='13'><button id ="submitBtn"type="button" style="float: right" onclick="submitData();"> Submit</button></td>
</tr>
</table>
List:
Any idea what I am doing wrong?