PHP - Ajax post with values from an editable HTML table

Question

<div class="container" id="assignPackage">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
            <th>Group Name</th>
            <th style="text-align: center" valign="middle">Minmum Transaction Limit</th>
            <th style="text-align: center" valign="middle">Maximum Transaction Limit</th>
            <th style="text-align: center" valign="middle">Day Transaction Limit</th>
            <th style="text-align: center" valign="middle">No. of Transaction Per Day</th>
            </tr>
      </thead>
      <tbody data-bind="foreach: records">
          <tr>
            <td data-bind="text:packageName"></td>                
            <td> <div contenteditable></div> </td>
            <td> <div contenteditable></div> </td>
            <td> <div contenteditable></div> </td>
            <td> <div contenteditable></div> </td>
         </tr>
    </tbody>
  </table>    
<br><br>
 <button data-bind="click :$root.create" class="btn btn-success">Create Group</button>
<a href="<?php echo base_url(); ?>transaction_limit_setup" class="btn btn-success"><i class="icon-plus icon-white"></i><span>Cancel</span></a> 
</div>

Here is My html table in which the column Group Name is created with data binding and the rest of the columns are editable i.e. user will put values there. Now when I click button "Create Group" it will call a Js function named create.

<script type="text/javascript" charset="utf-8">
    var initialData = jQuery.parseJSON('<?= $packages ?>');//data for building initial table
    var vm = function() {
        var self = this;
        self.records = ko.observableArray(initialData);
        $.each(self.records(), function(i, record){
            record.packageName = record.packageName;
        })
        self.create = function()
        {

        }
    }
    ko.applyBindings(new vm());
 </script>

and inside the function I want to initiate an Ajax post to a PHP function with all the values from the table i.e. the values from column "Group name" and also the other columns which the user will give input.

How can I do that.

haliphax · Accepted Answer · 2015-02-25 06:33:00Z

1

Well, break it down into parts. First, you need a loop, and that loop needs to touch each row in the table. You've already used $.each in your code, so let's re-use that:

$('#assignPackage tr').each(function(){ /* ... */ });

Now, what to do with each row? You know that the first table cell is to be treated differently than the rest; the rest have <div> wrappers around their content. The first one you can pull like this (where this is the current row in the table):

row['group_name'] = $(this).find('td:first').html();

But the others will be different, and since there are more than one of them, we've got to add another level to our loop:

var columns = $(this).find('td div')  // this is an array, too!

And you can loop through that without $.each, since having a counter is handy for knowing which column you're looking at:

for(var i = 0; i < columns; i++) {
    var value = $(columns[i]).html();

    switch(i) {
        case 0:
            row['min_trans_limit'] = value;
            break;
        case 1:
            // etc.
    }
}

So, if we package that all together into one algorithm:

var values = [];

$('#assignPackage tr').each(function(){
    var row = [],
        group = $(this).find('td:first').html(),
        columns = $(this).find('td div');

    row['group_name'] = group;

    for(var i = 0; i < columns.length; i++) {
        var value = $(columns[i]).html();

        switch(i) {
            case 0:
                row['min_trans_limit'] = value;
                break;
            case 1:
                row['max_trans_limit'] = value;
                break;
            case 2:
                row['day_trans_limit'] = value;
                break;
            case 3:
                row['trans_per_day'] = value;
                break;
        }
    }

    values.push(row);
});

You now have converted your HTML table into what is essentially a table in JavaScript (a 2-dimensional array). One dimension for rows, the other for columns. As for pushing that to the server, if you're already using AJAX, $.post can be very helpful for that. Here's a link: http://api.jquery.com/jQuery.post/ You may want to take advantage of Knockout's ko.fromJS and ko.toJS functions for mapping to/from JS objects.

answered Feb 25, 2015 at 6:33

haliphax

3831 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ohgodwhy Over a year ago

Well written post, great explanation, should help future users of ko and ajax alike Too bad it has lost it's front page presence.

haliphax Over a year ago

Thanks! Though, the more I think about it, the more I wonder why those editable fields aren't tied back to the same ViewModel object that the 'group name' is tied to... would make things much easier. :)

Collectives™ on Stack Overflow

PHP - Ajax post with values from an editable HTML table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related