0

So my table is 1 row where rows can be added, although it does not have unique id's for each row. I'd imagine this is the issue.

 $('#submitdata').click(function(){
var table = document.getElementById('tableAc');

var rowLength = table.rows.length;

for (var i = 0, row; row = table.rows[i]; i++) {

    var data = {
            __metadata: { 'type': 'SP.Data.myList_x005f_ListListItem' },
    "OData__x0065_c91": $("#Select1").val(),
    "selectn": $("#SelectNumb").val(),
    "sSurname": $("#spSurname").val(),
    "JointAC": $("#checkboxAC").val(),
    "firstName": $("#spFirstName").val(),
    "mobile": $("#spMobile").val(),

      };
         $.ajax({
                   url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('myList')/items",
                   method: "POST",
                                 data: JSON.stringify(data),

                   headers: { "Accept": "application/json;odata=verbose", "Content-Type": "application/json;odata=verbose", "X-RequestDigest": $("#__REQUESTDIGEST").val(), },

                   success: function (data) {
                              alert('Item added successfully');
                  },
                  error: function (error) {
                      alert("Error: "+ JSON.stringify(error));
                 }
          });

}


});
});

This is my addrow function -

   $('#AddAccountRow').click(function () {
                   document.getElementById("tableAc").insertRow(-1).innerHTML = '<td>Mycolumn</td><td>Mycolumn2</td>..etc'(html row);

Each row that gets added has the same ID. When I click to run the function "submitdata" it only adds the first row
3
  • SharePoint Online allows you to use JSON Light. So instead of dealing with the __metadata : { type : 'SP.Data.myList_x005f_ListListItem' } business, you can simply set the metadata you need to, and change the odata=verbose to odata=minimalmetadata or odata=nometadata.
    – wjervis
    May 9, 2016 at 12:01
  • In your submitdata click event you have used table with ID 'myTable' and in addrow function you are using table with ID 'tableAc'. Ensure you are getting the proper rowcount in your rowLength variable. Also SharePoint will automatically generate item ID for newly created items, so we need not worry about your HTML table not having unique row IDs.
    – Karvannan
    May 9, 2016 at 12:30
  • Hi, yes I fixed that but still have the issue
    – Stacker
    May 9, 2016 at 12:36

1 Answer 1

0

If I understand correctly, you have a form in a Sharepoint page.

In that form, there's some fields to complete, like first name, surname, mobile...

When you click AddAccountRow, the values entered in your form are inserted into a table tableAc.

Then, when someone pressed the submitdata button, all data inside the table tableAc are posted to a Sharepoint list.

I created this code in my Sharepoint environment and it works.

<script>
  $(document).ready(function() {
    $('#AddAccountRow').on('click',function () {
      $('#tableAc').append('<tr><td>'+$('#spSurname').val()+'</td><td>'+$('#spFirstName').val()+'</td><td>'+$('#spMobile').val()+'</td></tr>');
    });

    $('#submitdata').on('click',function(){
      $('#tableAc tbody tr').each(function(){
          var spSurnameVal = $(this).find('td:nth-child(0)').text();
          var spFirstNameVal = $(this).find('td:nth-child(1)').text();
          var spMobileVal = $(this).find('td:nth-child(2)').text();
          var data = {
            __metadata: { 'type': 'SP.Data.MyListListItem' },
            "spSurname": spSurnameVal,
            "spFirstName": spFirstNameVal,
            "spMobile": spMobileVal,
          }; 

          $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('MyList')/items",
            method: "POST",
            data: JSON.stringify(data),
            headers: { 
              "Accept": "application/json;odata=verbose", 
              "Content-Type": "application/json;odata=verbose", 
              "X-RequestDigest": $("#__REQUESTDIGEST").val(), 
            },
            success: function (data) {
              alert('Item added successfully');
            },
            error: function (error) {
              alert("Error: "+ JSON.stringify(error));
            }
          });   
      });
    });
  });
</script>

<div>
  <label>Surname</label><input type="text" id="spSurname"><br>
  <label>First Name</label><input type="text" id="spFirstName"><br>
  <label>Mobile</label><input type="text" id="spMobile"><br>
  <a id="AddAccountRow" style="border:1px solid #000;">Add account row</a><br>
</div>

<div>
  <table id="tableAc">
    <thead>
      <th>Surname</th>
      <th>First Name</th>
      <th>Mobile</th>
    </thead>
    <tbody>
    </tbody>
  </table>
  <br>
  <a id="submitdata" style="border:1px solid #000;">Submit data</a>
</div>
3
  • Hi, the data is actually inputted into the dynamic table and then the user can add rows to add extra information. Once it is all entered, they can then submit all the data. I'll check out your answer now, thanks
    – Stacker
    May 16, 2016 at 12:46
  • As in no row gets saved when Addrow is pressed. it just adds an extra row to add another user
    – Stacker
    May 16, 2016 at 12:54
  • Hi can you look at my newest question? stackoverflow.com/questions/37258426/…
    – Stacker
    May 16, 2016 at 16:36

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.