如何將數據從自定義HTML表單推送到Sharepoint列表

Question

我已經搜索了一段時間，還沒有找到可行的解決方案。.我有用HTML編寫的自定義表單（它很大且很復雜），並且在JS中附加了一些規則，我需要插入將其放入SP中的iframe（網絡內容編輯器）中，然后將數據推送到同一站點上的現有列表中。.我發現了一些JS庫，例如SPservices和Sharepoint plus，但無法使其正常工作。

不幸的是，我不能使用infopath-否則會很容易。

有人知道該怎么做或給我一些簡單的代碼示例嗎？

提前致謝！！！

編輯：

因此，我使用Web內容編輯器SP插入了這個簡單的html表單：

<script src="js/jquery-3.2.1.min.js"></script> 
<script src="js/jquery-ui.min.js"></script>
<script src="_layouts/15/sp.js" type="text/javascript"></script>
<script src="js/list.js"></script>



Nadpis: <input type="text" id="nadpis"> <br>
Text: <input type="text" id="text"> <p></p>
<input type="button" value="Odeslat" id="submit">

這是list.js

$("#submit").click(function(){

  var vnadpis = document.getElementById("nadpis").value;
  var vtext = document.getElementById("text").value;

  SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
  var ctx = SP.ClientContext.get_current();
  var list = ctx.get_web().get_lists().getByTitle("Test");
  var itemCreateInfo = new SP.ListItemCreationInformation();
  var oListItem = list.addItem(itemCreateInfo);
  oListItem.set_item("Nadpis",vnadpis);
  oListItem.set_item("Text",vtext);
  oListItem.update();
  ctx.load(oListItem);
  ctx.executeQueryAsync(
  Function.createDelegate(this, function(){alert("Success!")}),
  Function.createDelegate(this, function(){alert("Error!")}));
}


});

但是什么都沒發生..建議？

Answer 1

這就像一個烹飪食譜。 這很容易。 以下示例獲取列表“ MyList”，並向其添加標題為“ MyNewItem”的新項目。 確保您包括必要的sharepoint javascript庫。

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
  var ctx = SP.ClientContext.get_current();
  var list = ctx.get_web().get_lists().getByTitle("MyList");
  var itemCreateInfo = new SP.ListItemCreationInformation();
  var oListItem = list.addItem(itemCreateInfo);
  oListItem.set_item("Title","MyNewItem");
  oListItem.update();
  ctx.load(oListItem);
  ctx.executeQueryAsync(
    Function.createDelegate(this, function(){alert("Success!")}),
    Function.createDelegate(this, function(){alert("Error!")}));
}

因此，只需將字符串替換為您的輸入值（由純JS或jQuery檢索）

Answer 2

嘗試將代碼包裝在$( document ).ready() 。 因此，只有頁面文檔對象模型（DOM）准備好執行JavaScript代碼后，您的代碼才能運行。

請參考下面的代碼。 它將為您工作。

$(document).ready(function() {

    $("#submit").click(function() {

        var vnadpis = document.getElementById("nadpis").value;
        var vtext = document.getElementById("text").value;

        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
            var ctx = SP.ClientContext.get_current();
            var list = ctx.get_web().get_lists().getByTitle("Test");
            var itemCreateInfo = new SP.ListItemCreationInformation();
            var oListItem = list.addItem(itemCreateInfo);
            oListItem.set_item("Nadpis", vnadpis);
            oListItem.set_item("Text", vtext);
            oListItem.update();
            ctx.load(oListItem);
            ctx.executeQueryAsync(
                Function.createDelegate(this, function() {
                    alert("Success!")
                }),
                Function.createDelegate(this, function(sender, args) {
                    alert("Error!")
                }));
        });


    });
});

HTML->

注意-相應地更改JS參考路徑。 並嘗試按此順序引用JS文件。

<script src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
<script src="/_layouts/15/sp.runtime.js"></script>
<script src="/_layouts/15/sp.js"></script>
<script src="js/jquery-3.2.1.min.js"></script> 
<script src="js/jquery-ui.min.js"></script>
<script src="js/list.js"></script>



Nadpis: <input type="text" id="nadpis"> <br>
Text: <input type="text" id="text"> <p></p>
<input type="button" value="Odeslat" id="submit">