POST dynamic HTML table values to jQuery AJAX

Question

I am trying to get all the values present in my dynamic HTML table and POST the values to AJAX.

I have HTML table like this

enter image description here

When i press '+' , I can able to add rows dynamically . When i click save, How to POST array values from this HTML table to AJAX, so that i can meanwhile INSERT those values into MYSQL

I have tried getting the 'text' of each td present in my table

var rows = $("tbody tr",$("#myTable")).map(function() { 
    return [$("td",this).map(function() { 
      return this.innerHTML;     
    }).get()];
  }).get();

This is getting me -> <input type="text"> and so on.

Try using jQuery .serialize() on the form to create JSON which can be sent in POST — Arun Kumar
– Arun Kumar, Commented Dec 10, 2014 at 9:25

Flion · Accepted Answer · 2014-12-10 09:31:34Z

3

you are returning the innerHTML, which is... HTML. you can get the value of a input element with .val() how does this work for you?

return $("td input").map(function() { 
  return $(this).val();     
});

answered Dec 10, 2014 at 9:31

Flion

11.1k14 gold badges54 silver badges77 bronze badges

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

Comments

tzafar · Accepted Answer · 2014-12-10 09:37:15Z

3

Use serialize function using jQuery

<script type="text/javascript">
    (function ($) {
        $('#formID').on('submit', function (e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: '/pathTo/process_form.php',
                data: $('#formID').serialize()
            });
        });
    })(jQuery);
</script>

edited Dec 10, 2014 at 9:37

answered Dec 10, 2014 at 9:30

tzafar

6643 silver badges12 bronze badges

Comments

startx · Accepted Answer · 2014-12-10 09:49:21Z

1

var rows = $("td input",$("#myTable")).map(function() { 
    return { name : $(this).attr('name'), value :$(this).val()};
  });

and you should get :

[ 
  { 
    name : 'inputname',
    value :  'inputval' 
  },
  { ... }
]

This would return an array like the .serialize() method

answered Dec 10, 2014 at 9:49

startx

663 bronze badges

1 Comment

Matarishvan Over a year ago

i am getting this error Uncaught TypeError: Illegal invocation - jquery 1.6.1 min.js

Collectives™ on Stack Overflow

POST dynamic HTML table values to jQuery AJAX

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related