如何将数据从自定义HTML表单推送到Sharepoint列表

时间:2017-07-17 13:57:04

标签: javascript html forms list sharepoint

我现在已经搜索了一段时间了,还没有找到一个可行的解决方案..我有用HTML编写的自定义表单(它非常庞大和复杂)和JS中的一些规则附加到它以及我需要什么是将其插入SP中的iframe(Web内容编辑器)并将数据推送到同一站点上的现有列表中..我发现了一些JS库,如SPservices和Sharepoint plus但是无法使其工作..

不幸的是,我不能使用infopath - 否则会很容易。

有人知道怎么做或者给我一些简单的代码示例吗?

提前致谢!!!

编辑:

所以我使用Web内容编辑器插入这个简单的html表单是SP:

<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!")}));
}


});

但没有任何反应......建议?

2 个答案:

答案 0 :(得分:0)

这就像一个烹饪食谱。这很容易。以下示例采用List&#34; MyList&#34;并添加一个标题为&#34; MyNewItem&#34;它。确保包含必要的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检索)

答案 1 :(得分:0)

尝试将代码包装在$( 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 - &gt;

注 - 相应地更改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">