Inserting html data to SharePoint list using javascript

Question

I have tried inserting my data to my SharePoint list to no avail, kindly assist with what could be wrong with my code..am new to SharePoint.

When you click submit, nothing appears, instead, it adds a # at the end of the url. Under Requester details, it should pick automatically when the person is logged in ofiice365.

Under Department head, it should pick my department heads based where I work ie if am in Engineering, only my boss should appear, else if sales, only my sales boss, else if security, only my boss should appear.

 <script type="text/javascript"> function save() { var siteUrl = 'https://mysite.sharepoint.com/sites/'; //receiving inputs var pcv = document.getElementById('pcv').value; var amountFigures = document.getElementById('amountFigures').value; var amountWords = document.getElementById('amountWords').value; var reason = document.getElementById('reason').value; var requester = document.getElementById('requester').value; var phone = document.getElementById('phone').value; var approver = document.getElementById('approver').value; var clientContext = new SP.ClientContext(siteUrl); var oList = clientContext.get_web().get_lists().getByTitle('myListName'); var itemCreateInfo = new SP.ListItemCreationInformation(); this.oListItem = oList.addItem(itemCreateInfo); //Field list Sharepoint oListItem.set_item('pcv', Title); oListItem.set_item('amountFigures', amountFigures); oListItem.set_item('amountWords', amountWords); oListItem.set_item('reason', reason); oListItem.set_item('requester', requester); oListItem.set_item('phone', phone); oListItem.set_item('approver', approver); oListItem.update(); clientContext.load(oListItem); clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); } function onQuerySucceeded() { alert('The record was created successfully'); } function onQueryFailed(sender, args) { alert('Request failed.'); } function randomNumber(len) { var randomNumber; var n = ''; for(var count = 0; count < len; count++) { randomNumber = Math.floor(Math.random() * 10); n += randomNumber.toString(); } return n; } document.getElementById("pcv").value = randomNumber(9); </script> 

 [data-list-name]{ min-height: 100px; overflow: hidden; clear: both; background_color: red; } [data-list-name] input[type="file"] { border:none; box-shadow:none; padding-left: 0; padding-right: 0; } [data-list-name].loading{ background:url('spinner.gif') no-repeat center center #fff; } [data-list-name] .error-msg, [data-list-name] .success-message { background: #f9d3d3; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #dfabab; border-radius: 4px; font-size: 12px; font-style: italic; color: #5f5f5f; margin-bottom: 20px; margin-top: 5px; } [data-list-name] .success-message { background: #dff8e6; border: 1px solid #b9eac6; } [data-list-name] .error { color: #ef0000; margin-top: 5px; margin-bottom: 5px; font-size: 12px; } [data-list-name] .btn-submit { background-color: #5cb85c; border-color: #4cae4c; padding: 7px 10px; clear: both; display: block; width: 72px; text-align: center; margin-top: 5px; margin-bottom: 5px; } [data-list-name] .btn-submit:hover { color: #fff; background-color: #449d44; border-color: #398439; text-decoration: none; cursor: pointer; } [data-list-name] h5 { margin-bottom: 15px; font-weight: 700; } ::-webkit-input-placeholder { color: #ababab !important; font-size: 12px !important; } :-moz-placeholder { /* Firefox 18- */ color: #ababab !important; font-size: 12px !important; } ::-moz-placeholder { color: #ababab !important; font-size: 12px !important; } :-ms-input-placeholder { color: #ababab!important; font-size: 12px !important; } input:focus::-webkit-input-placeholder { color:transparent !important; } input:focus:-moz-placeholder { color:transparent !important; } /* FF 4-18 */ input:focus::-moz-placeholder { color:transparent !important; } /* FF 19+ */ input:focus:-ms-input-placeholder { color:transparent !important; } /* IE 10+ */ .btn-submit { color:#fff !important; clear:both; } #h3{ text-align: center; background-color: #272940; color: red; height: 100px; padding-top: 30px; } #id{ text-align: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.js "></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery.SPServices-0.7.2.js "></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src=http://ajax.aspnetcdn.com/ajax/jquery-2.1.1.js> </script> <script src=https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js></script> <!--CHANGE THE SRC AND HREF OF THE JS AND CSS HERE!!!--> <script src=http://ajax.aspnetcdn.com/ajax/jquery-2.1.1.js> </script> <script src=https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js></script> <div class="container" style="border: 2px solid black"> <!--ENTER YOUR LIST NAME HERE!!! INSIDE data-list-name--> <div class="row" data-list-name="Petty Cash" id="form"> <h3 id="h3">PETTY CASH VOUCHER</h3> <br><br> <div class="col-sm-6"> <table id="tableData" class="tableData" type="hidden"> <tr><thead> <th>Account</th> <th>Cost Centre</th> <th>Amount</th></thead> </tr> <tr> <td><input type="text" name="" size="12"></td> <td><input type="text" name="" size="12"></td> <td><input type="text" name="" size="9.5"></td> </tr> <tr> <td><input type="text" name="" size="12"></td> <td><input type="text" name="" size="12"></td> <td><input type="text" name="" size="9.5"></td> </tr> <tr> <td><input type="text" name="" size="12"></td> <td><input type="text" name="" size="12"></td> <td><input type="text" name="" size="9.5"></td> </tr> <tr> <td><input type="text" name="" size="12"></td> <td><input type="text" name="" size="12"></td> <td><input type="text" name="" size="9.5"></td> </tr> <tr> <td><input type="text" name="" size="12"></td> <td><input type="text" name="" size="12"></td> <td><input type="text" name="" size="9.5"></td> </tr> <tr> <td><input type="text" name="" size="12"></td> <td><input type="text" name="" size="12"></td> <td><input type="text" name="" size="9.5"></td> </tr> <tr> <td><input type="text" name="" size="12"></td> <td><input type="text" name="" size="12"></td> <td><input type="text" name="" size="9.5"></td> </tr> <tr> <td><input type="text" name="" size="12" value="Total"></td> <td><input type="text" name="" size="12"></td> <td><input type="text" name="" size="9.5"></td> </tr> <tr> <td><input type="text" name="" size="12"></td> <td><input type="text" name="" size="12"></td> <td><input type="submit" name="" size="9.5" value="Submit"></td> </tr> </table> </div> <div class="col-sm-6" id="col2"> <div class="success-message" style="display:none;"> Thank you for your submission. Click <a href="#" id="addAnother">Here</a> to another. </div> <div class="form-group"> <label for="countries">VOUCHER No:</label> <input name="pcv" class="form-control input-sm" id="pcv" " data-rules="required|email" autocomplete="off" maxlength="16" readonly/> </div> <div class="form-group"> <label for="countries">CASH Received</label> <input name="amountFigures" class="form-control input-sm" placeholder="Enter here..." data-rules="required|email" autocomplete="off"/> </div> <div class="form-group"> <label for="countries">AMOUNT IN WORDS</label> <textarea name="amountWords" class="form-control input-sm" placeholder="Enter here..." data-rules="required|email" autocomplete="off"/></textarea> </div> <div class="form-group"> <label for="countries">Reason for Request</label> <textarea name="reason" class="form-control input-sm" placeholder="Enter here..." data-rules="required|email" autocomplete="off"/></textarea> </div> <div class="form-group"> <label for="countries">Requested By</label> <input name="requester" class="form-control input-sm" placeholder="Enter here..." data-rules="required|email" autocomplete="off"/> <!--PICKS YOUR NAME WHEN YOU ARE LOGGED IN--> </div> <div class="form-group"> <!--START OF A CHECKBOX--> <label for="countries">Phone Number</label> <input name="phone" class="form-control input-sm" placeholder="Enter here..." data-rules="required|email" autocomplete="off"/> </div> <div class="form-group"> <label for="countries">Who is your approver </label> <select class="form-control input-sm" name="approver" data-rules="required"> <option value="">-Your department head-</option> <!--PICK FROM THE ACTIVE DIRECTORY, LIST OF ALL MANAGERS--> </select> </div> <input type="submit" name="submit" class="submit" onclick="save()" id="submit"> <br><br> </div> </div> </div> 

Answer 1

I checked your code and I see there are many references to jquery library which are not required and needs to be removed. Just one reference to jquery library is enough.

I see you are using jquery SPServices library. If you are new to SharePoint then I would recommend you to go through article at https://www.c-sharpcorner.com/blogs/crud-operation-on-list-in-sharepoint-using-jquery-and-spservices

This would help you to implement CRUD operations with ease than to use JSOM script. Also you can refer that article to see how it has used jquery and SPServices library references.

Hope this helps you.