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>    

  • 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 Nov 4 '14 at 21:24
  • @colbs S i am looking something on client side only . – SPLearner Nov 4 '14 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 '14 at 21:30
  • 1
    Alright. Are you OK with using SPServices? – Michael Colbs Nov 4 '14 at 21:31
  • @Colbs Why not CSOM? – Slaven Semper Nov 4 '14 at 21:42
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());
}
  • 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 '14 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 Nov 5 '14 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 Nov 5 '14 at 15:51
  • but i am using divs no tds and trs how to mention it? – SPLearner Nov 5 '14 at 15:52
  • I'll make the change, couple minutes – Michael Colbs Nov 5 '14 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, privacy policy and cookie policy

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