none
REST Fails when trying to update SharePoint list from HTML Form. Error 403 RRS feed

  • Question

  • I have created an html form to read and post data to the corresponding SharePoint list. Im positive I have the code correct, but when I execute it in SharePoint, I get a 403 error. And the JSON Object it writes doesn't appear in the console like it should. Here is my code, I don't have the proper SharePoint urls inserted because they don't work on external sources outside of SharePoint. Now I can't even get the JSON to show up in the console on the JSFiddle either.

    Code:

    <!DOCTYE HTML>
    <html>
    <link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"/>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
    <script src="https://momentjs.com/downloads/moment.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.3/js/buttons.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
    <link rel ="stylesheet" href="https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.bootstrap4.min.css"/>
    <link rel ="stylsheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"/>
    <link rel ="stylesheet" href="https://cdn.datatables.net/buttons/1.6.3/css/buttons.bootstrap4.min.css"/>
      
    <div class ="container">
    <table id="myTable" class="table table-bordered" cellspacing="0" width="100%">
      <thead class="thead-dark">
        <tr>
          <th>Program</th>
          <th>Deliverable</th>
          <th>To</th>
          <th>Date</th>
          <th>Approved</th>
          <th>Notes</th>
        </tr>
      </thead>
      <tfoot class="thead-dark">
      <tr>
          <th>Program</th>
          <th>Deliverable</th>
          <th>To</th>
          <th>Date</th>
          <th>Approved</th>
          <th>Notes</th>
        </tr>
      </tfoot>
    </table>
    <form id="myform" type="post">
      <fieldset>
        <legend align="center">Update Datatable</legend>
        <p>Please fill out the shown fields to add data to the DataTable</p>
        <div class="elements">
          <label for="program">Program :</label>
           <select name = "program">
                <option value = "AHR">AHR</option>
                <option value = "AMMO">AMMO</option>
                <option value = "DAR-Q">DAR-Q</option>
                <option value = "Doctrine Development">Doctrine Development</option>
                <option value = "Operational Energy">Operational Energy</option>
                <option value = "Ordnance Multimedia">Ordnance Multimedia</option>
                <option value = "SRC Handbook">SRC Handbook</option>
                <option value = "WTBn">WTBn</option>
             </select>
        </div>
    	 <div class="elements">
          <label for="Deliverable">Deliverable :</label>
          <select name="Deliverable">
                  <option value = "Meeting Minutes">Meeting Minutes</option>
                <option value = "Monthly Status Report (MSR)">Monthly Status Report (MSR)</option>
                </select>
        </div>	
        <div class="elements">
          <label for="To"> To:</label>
    	  <input type="text" align= "center" id="to" name="to" placeholder="example@example.com">
        </div>  	
    	<div class="elements">
    	<label for="Date">Date: </label>
          <input type="date" align= "center" id="date" name="date" placeholder="MM/DD/YYYY"> 
    </div>	
        <div class="elements">
          <label for="Approved">Approved :</label>
          <select name="Approved">
                  <option value = "Yes">Yes</option>
            <option value = "No">No</option></select>
    </div>
          
          <div class="elements">
          <label for="Notes"> Notes :</label>
    	  <input type="text" align= "left" id="Notes" name="notes" placeholder="Please provide notes">
       </div>
        
          <div class="submit">
           <input type="submit" id="btn" name="btn" class="btn" value="Submit" />
        </div>
      </fieldset>
    </form>
    <style>
    #myform {
    	margin:0 auto;
    	width:250px;
    	padding:14px;
    	align: center;
    }
    
    label {
    	width: 10em;
    	float: left;
    	margin-right: 0.5em;
    	display: block;
    	vertical-align: middle;
    }
    .submit {
    	float:right;
    }
    
    fieldset {
    	background:#EBF4FB none repeat scroll 0 0;
    	border:2px solid #B7DDF2;
    	width: 450px;
    }
    
    legend {
    	color: #fff;
    	background: #80D3E2;
    	border: 1px solid #781351;
    	padding: 2px 6px
    	text-align: center;
    }
    .elements {
    	padding:10px;
    }
    p {
    	border-bottom:1px solid #B7DDF2;
    	color:#666666;
    	font-size:12px;
    	margin-bottom:20px;
    	padding-bottom:10px;
    }
    span {
    	color:#666666;
    	font-size:12px;
    	margin-bottom:1px;
    	
    }
    .btn{
      padding: 4px 12px;
      margin-bottom: 0;
      font-size: 14px;
      line-height: 20px;
      color: #333333;
      text-align: center;
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
      vertical-align: middle;
      cursor: pointer;
      background-color: #f5f5f5;
      border: 1px solid #B7DDF2;
      
    }
    
    .btn:hover{
      color: #333333;
      background-color: #e6e6e6;
    }
    
    div.container {
    	min-width: 980px;
    	margin: 0 auto;
    }
    .header {
      padding: 10px;
      text-align: center;
    }
    body {
    	font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    	margin: 0;
    	padding: 0;
    	color: #333;
    	background-color: #fff;
    }
    div.dt-button-collection {
        ;
    }
    </style>
    <script>
    function loadData() { //Initializing the AJAX Request function to load in the external list data from different subsites
    	//create an array of urls to run through the ajax request instead of having to do multiple AJAX Requests
        var urls = ["url1","url2","url3"];
           
        for (i=0; i < urls.length; i++) { //for loop to run through the AJAX until all URLs have been reached
          $.ajax({
            url: urls[i],
    		'headers': { 'Accept': 'application/json;odata=nometadata' },
            success: function (data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
              data = data;
              var table = $('#myTable').DataTable();
              table.rows.add( data.value ).draw();
            }
          }); 
        }
    }
    
    $(document).ready(function() {
        var collapsedGroups = {}; 
        var top = '';
        var parent = '';
        
      var table = $('#myTable').DataTable( {
        "columns": [
          { "data": "Program", visible: false },
          { "data": "Deliverable", visible: false },
          { "data": "To" },
          { "data": "Date" },
          { "data": "Approved" },
          { "data": "Notes" }
        ],
    	
    	dom: "<'row'<'col-sm-12 col-md-10'f><'col-sm-12 col-md-2'B>>" +
    "<'row'<'col-sm-12'tr>>" +
    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
    	 buttons: [{
          extend: 'collection',
          className: "btn-dark",
          text: 'Export',
          buttons:
          [{
          extend: "excel", className: "btn-dark"
        },
    	  {
          extend: "pdf", className: "btn-dark"
        },
           {
          extend: "print", className: "btn-dark"   
        },
          ],
        }],
    	order: [[0, 'asc'], [1, 'asc'] ],	
    	rowGroup: {
                dataSrc: [
    			'Program',
    			'Deliverable'
    			],
                startRender: function (rows,group,level){
    				var all;
                	if (level === 0) {
                        top = group;
                        all = group;
                    } else if (level === 1) {
                        parent = top + group; 
                        all = parent; 
                        // if parent collapsed, nothing to do
                        if (!collapsedGroups[top]) {
                            return;
                        }                   
                    } else {
                        // if parent collapsed, nothing to do
                        if (!collapsedGroups[parent]) {
                            return;
                        } 
                        all = top + parent + group;
                    }
    
                    var collapsed = !collapsedGroups[all];
    				console.log('collapsed:', collapsed);
                  
                  rows.nodes().each(function(r) {
                  	r.style.display = collapsed ? 'none' : '';
                  });
                  //Add category name to the <tr>.
                  return $('<tr/>')
                  	.append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
                    .attr('data-name', all)
                    .toggleClass('collapsed', collapsed);
    				
                
                }
                
            }
      } );
        
     loadData();
    
     $('#myTable tbody').on('click', 'tr.dtrg-start', function () {
            var name = $(this).data('name');
            collapsedGroups[name] = !collapsedGroups[name];
            table.draw(false);
        });   
    
    	
    } );
     $(document).ready(function() {
      $("#btn").click(function(e){
    	 var jsonData = {};
    	 
       var formData = $("#myform").serializeArray();
      // console.log(formData);
       
       $.each(formData, function() {
            if (jsonData[this.name]) {
               if (!jsonData[this.name].push) {
                   jsonData[this.name] = [jsonData[this.name]];
               }
               jsonData[this.name].push(this.value || '');
           } else {
               jsonData[this.name] = this.value || '';
           }
    	       
    	   
       });
       console.log(jsonData);
    	$.ajax(
    	{
    		url : "url1",
    		type: "POST",
    		headers: { "Accept": "application/json; odata=verbose" },
    		data : jsonData,
    		
    	});
        e.preventDefault();	
    });
    });
    </script>
    </html>
    Monday, September 14, 2020 3:59 PM