CODEWITHSUNDEEP
javascripthtmlformslistsharepoint
Tomáš Vítů
Tomáš Vítů

Reputation: 39

How to push data from custom HTML form into Sharepoint list

I´be been searching this for some time now and have not found a working solution yet.. I have custom form written in HTML (it is quite big and complicated) and some rules in JS attached to it and what I need is to insert it into iframe (web content editor) in SP and push the data into existing list on the same site.. I have found some JS libraries like SPservices and Sharepoint plus but was not able to make it work..

I cannot use infopath unfortunately - otherwise it would be easy.

Does anybody know how to do it or give me some simple example of code?

Thanks in advance!!!

Edit:

So I have this simple html form inserted using web content editor is 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">

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


});

but nothing happens.. suggestions?

Upvotes: 1

Views: 6512

Answers (2)

Rohit Waghela
Rohit Waghela

Reputation: 874

try to wrap your code inside $( document ).ready(). So that your code will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

Refer below code. It will work for you.

$(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 -->

Note - Change JS reference path accordingly. And try to reference JS files in this sequence.

<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">

Upvotes: 1

Sector
Sector

Reputation: 47

It is like a cooking recipe. It is fairly easy. Following example takes the List "MyList" and adds a new Item with title "MyNewItem" to it. Make sure you included the necessary sharepoint javascript libraries.

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

So just replace the string with your input value (retrieved by plain JS or with jQuery)

Upvotes: 0

Related Questions