save html table data to list

Question

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>

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 — Michael Colbs
– Michael Colbs, Commented Nov 4, 2014 at 21:24
@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
– SPLearner, Commented Nov 4, 2014 at 21:30

Michael Colbs · Accepted Answer · 2014-11-05 17:26:18Z

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());
}

edited Nov 5, 2014 at 17:26

answered Nov 4, 2014 at 22:35

Michael Colbs

3,9214 gold badges52 silver badges99 bronze badges

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
– SPLearner

2014-11-05 15:43:18 +00:00
Commented 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?

Michael Colbs
– Michael Colbs

2014-11-05 15:50:25 +00:00
Commented 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

Michael Colbs
– Michael Colbs

2014-11-05 15:51:37 +00:00
Commented Nov 5, 2014 at 15:51
but i am using divs no tds and trs how to mention it?

SPLearner
– SPLearner

2014-11-05 15:52:27 +00:00
Commented Nov 5, 2014 at 15:52
I'll make the change, couple minutes

Michael Colbs
– Michael Colbs

2014-11-05 15:58:05 +00:00
Commented Nov 5, 2014 at 15:58

| Show 10 more comments

AymKdn · Accepted Answer · 2014-11-05 14:29:43Z

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>

Stack Exchange Network

save html table data to list

2 Answers 2

Hot Network Questions

save html table data to list

2 Answers 2

Related

Hot Network Questions