1

I have a html table which holds some data and has a submit button at the bottom of the table.I am trying to save this data of table on button click to SharePoint 2010 list which is having same columns as table fields. How to follow for this kind of scenario to save table data to list.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

contactus Contact Information

Name:
Company Name:
Email Address:
Phone Number:
Extension:
Comment:

<script type="text/javascript">
    function submitValues() {
        var Name = $('#fullName').val();
        var CompanyName = $('#companyName').val();
        var EmailAddress = $('#email').val();
        var PhoneNumber = $('#area').val();
        var Extension = $('#Text1').val();
        var Comment = $('#comments').val();
        createListItem(Name, CompanyName, EmailAddress, PhoneNumber, Extension, Comment);
    }
    function createListItem(Na, Cna, em, ph, ext, comm) {
        var clientContext = new SP.ClientContext.get_current();
        var oList = clientContext.get_web().get_lists().getByTitle('ContactUs');
        var itemCreateInfo = new SP.ListItemCreationInformation();
        var oListItem = oList.addItem(itemCreateInfo);
    }
    try {
        oListItem.set_item('Title', 'HTML List item');
        oListItem.set_item('Name', Na);
        oListItem.set_item('CompanyName', Cna);
        oListItem.set_item('EmailAddress', em);
        oListItem.set_item('PhoneNumber', ph);
        oListItem.set_item('Extension', ext);
        oListItem.set_item('Comment', comm);
        oListItem.update();

        clientContext.load(oListItem);
        clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded),
        Function.createDelegate(this, this.onQueryFailed)
    );
    }
    catch (err) {
        alert(err);
    }

    //end function createListItem

    function onQuerySucceeded() {
        alert('Item Created: ' + oListItem.get_id());
    }

    function onQueryFailed(sender, args) {
        alert('Request failed. ' + args.get_message() +
'\n' + args.get_stackTrace());
    }


</script>    

8
  • I'm assuming you want to do this using client side code? Not server / C#? Can we see a sample of the HTML table? The fields need to be extracted and mapped Nov 4, 2014 at 21:24
  • @colbs S i am looking something on client side only .
    – SPLearner
    Nov 4, 2014 at 21:25
  • @colbs it is a basic table with properties like name email and phone number as table columns and a submit button at the bottom of table.
    – SPLearner
    Nov 4, 2014 at 21:30
  • 1
    Alright. Are you OK with using SPServices? Nov 4, 2014 at 21:31
  • @Colbs Why not CSOM? Nov 4, 2014 at 21:42

2 Answers 2

3

You may have to tweak the jQuery selector depending on the structure of your HTML table:

<input value='Submit' type='button' onclick='submitValues()' />

function submitValues() {
    var email= $('#email').val();
    var phone = $('#area').val();

    //Create a list item for each table row
    createListItem(phone, email);
}


function createListItem(ph, em) {

    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('ListName');
    var itemCreateInfo = new SP.ListItemCreationInformation();
    var oListItem = oList.addItem(itemCreateInfo);

    try {   

        oListItem.set_item('Title', 'HTML List item');
        oListItem.set_item('Email', em);
        oListItem.set_item('PhoneNumber', ph);
        oListItem.update();

        clientContext.load(oListItem);
        clientContext.executeQueryAsync(
            Function.createDelegate(this, this.onQuerySucceeded),
            Function.createDelegate(this, this.onQueryFailed)
        );
    }
    catch(err)
    {
        alert(err);
    }

} //end function createListItem

function onQuerySucceeded() {
    alert('Item Created: ' + oListItem.get_id());
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() +
    '\n' + args.get_stackTrace());
}
15
  • Hi colbs i have updated my html code i am little confused with the jquery you have provided. I am real beginner on this stuff so help me out find right way. thanks
    – SPLearner
    Nov 5, 2014 at 15:43
  • Just made an edit. I forgot to declare var phone, var email. Have you replaced the #tableID with your table's ID? Nov 5, 2014 at 15:50
  • It basically loops through each table row ('tr').each and you have to set the index of each column. This assumes phone is your first column and email is your second column Nov 5, 2014 at 15:51
  • but i am using divs no tds and trs how to mention it?
    – SPLearner
    Nov 5, 2014 at 15:52
  • I'll make the change, couple minutes Nov 5, 2014 at 15:58
0

If you don't mind using jQuery and my library called SharepointPlus then you can do the below things

<!-- let's say your HTML Table looks like that: -->
<table id="YourTable">
  <thead>
    <tr>
      <td>Name</td>
      <td>Phone Number</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>123456</td>
    </tr>
    <tr>
      <td>Mike</td>
      <td>789456</td>
    </tr>
  </tbody>
</table>

<input type="button" value="Save" id="ButtonSave">

<!-- The JavaScript code will look like that: -->
<script>
// bind the click on the button with jQuery
$('#ButtonSave').on('click', function(event) {
  // prevent the default action
  event.preventDefault();

  // based on the documentation of SharepointPlus (http://aymkdn.github.io/SharepointPlus/symbols/%24SP%28%29.list.html#.add)
  // you have to create an array of hash for all your rows
  // let's suppose your Sharepoint List is called "Phonebook"
  // let's also suppose that the fields in the "Phonebook" list are "Full Name" and "Phone Number"
  //   --> then the internal Sharepoint names for the fields are "Full_x0020_Name" and "Phone_x0020_Number"
  var dataToAdd=[];
  // go thru the rows
  $('#YourTable > tbody').find('tr').each(function() {
    // get the cells
    var cells = $(this).find('td');
    // add the data
    dataToAdd.push({
      "Full_x0020_Name":    cells.eq(0).text(),
      "Phone_x0020_Number": cells.eq(1).text()
    });
  });

  // you're now ready to add the data to your list
  $SP().list("Phonebook").add(dataToAdd, {
    error:function() {
      alert("There are some errors!");
    },
    success:function() {
      alert("Data added!");
    }
  })
})
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.