CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
Matarishvan
Matarishvan

Reputation: 2422

POST dynamic HTML table values to jQuery AJAX

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.

Upvotes: 2

Views: 6183

Answers (3)

startx
startx

Reputation: 66

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

Upvotes: 1

tzafar
tzafar

Reputation: 664

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>

Upvotes: 3

Flion
Flion

Reputation: 10902

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

Upvotes: 3

Related Questions