如何将数据从自定义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">