使用javascript將HTML數據插入SharePoint列表

Question

我嘗試將數據插入到SharePoint列表中均無濟於事，請協助解決SharePoint的我的code..am問題。

單擊提交時，沒有任何顯示，而是在URL末尾添加了＃。 在“請求者詳細信息”下，當該人登錄ofiice365時它將自動選擇。

在部門負責人的下面，應該根據我工作的地點來選擇部門負責人，即如果在工程部門，則只應出現我的老板，否則，如果是銷售人員，則只能出現我的銷售老板，否則，如果出現安全問題，則只應該出現我的老板。

 <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

我檢查了您的代碼，發現有很多對jquery庫的引用，這些引用不是必需的，需要刪除。 只需一個對jquery庫的引用就足夠了。

我看到您正在使用jquery SPServices庫。 如果您不熟悉SharePoint，那么我建議您瀏覽一下https://www.c-sharpcorner.com/blogs/crud-operation-on-list-in-sharepoint-using-jquery-and-spservices中的文章

與使用JSOM腳本相比，這將幫助您輕松實現CRUD操作。 您也可以參考該文章，以了解它如何使用jquery和SPServices庫引用。

希望這對您有所幫助。