3

Health Check Form

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:

health check list

Any idea what I am doing wrong?

Improve this question

1 Answer 1

Reset to default
0

In case you need to run it withing ShrePoint you need to use ExecuteOrDelayUntilScriptLoaded method that used to delay a function call unless a particular script (SP) is loaded.

To use ExecuteOrDelayUntilScriptLoaded do the following :

<script type="text/javascript">
      function yourfunction(){

                             }
     ExecuteOrDelayUntilScriptLoaded(yourfunction,"SP.js");
</script>

In case you need to run it outside Sharepoint try to reference the following

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js">
</script>
<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">
      // Type your code here.
</script>

Alternative way to load SP scripts files 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
<script>


   $(document).ready(function(){
        var scriptbase = "http://Qassas/" + "/_layouts/15/";
    //Do not change the order, scripts should load by order.  
     $.getScript(scriptbase + "init.js",
            function () {
                $.getScript(scriptbase + "SP.Runtime.js",
                   function () {
                $.getScript(scriptbase + "SP.js", execOperation);
              });
          });
           });
// **add your code**
</script>
Improve this answer
7
  • I updated the code and added ExecuteOrDelayUntilScriptLoaded(yourfunction,"SP.js"); (do i need to do this for all functions?) I also added reference to sp.js with no success. pastebin.com/09A58yi8
    – Brian
    May 12, 2017 at 12:10
  • Please paste your final code here to try it in my side !!
    – Mohamed El-Qassas MVP ♦
    May 12, 2017 at 12:14
  • Hi, I provided a pastebin link with the full code (pastebin.com/09A58yi8)
    – Brian
    May 12, 2017 at 12:16
  • great let me check it in my side don't go far :)
    – Mohamed El-Qassas MVP ♦
    May 12, 2017 at 12:17
  • please in your code where you set siteUrl ? also are you will embed the above code in script editor or independent HTML file? meanwhile, i will provide you code that will add list item with one column in a simple list and you should update it with your columns okay ?
    – Mohamed El-Qassas MVP ♦
    May 12, 2017 at 12:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.