Store dynamic table data into database

Question

I have a table that I create using JQuery dynamically. The name of the fields are marked with [] at the end to define an array and I have a submit button at the end of the form.

<input name="customFieldName[]" type="text" id="customFieldName" size="50" />

I have a link that allows the user to enter a new row

<a href="javascript:void(0)" class="addCF">Add A Service</a>

Now once all the information has been entered into the fields and the user clicks on submit, how do I go about saving all of that into the database?

I am quite confused about that part. Sorry, I am a newbie at this.

Answer 1

$customFieldNameArray = $_POST['customFieldName'];
var_dump($customFieldNameArray);

Answer 2

Try this, hope this will work for you.

HTML:

  <table id="dynamicTbl" style="border:1px;">
  </table>
  <input type="button" id="btnSubmit" value="Save"/>
  <input type="button" id="btnAdd" value="Add"/>

Script

$(document).ready(function(){
var html="<tr>";
    html +="<td>";
    html +="<input type='text'/>";
    html+="</td>";
    html +="<td>";
    html +="<input type='text'/>";
    html+="</td>";
    html +="<td>";
    html +="<input type='text'/>";
    html+="</td>";
    html+="</tr>";
     $('#dynamicTbl').html(html);
    $('#btnSubmit').on('click',function(){
        var myData=[]; //declaring arrary
    var rows = $('#dynamicTbl').find('tr');
        rows.find('td input').each(function(){
            myData.push($(this).val());
        });
        alert(myData);
    });
    $('#btnAdd').on('click',function(){
    var html="<tr>";
    html +="<td>";
    html +="<input type='text'/>";
    html+="</td>";
    html +="<td>";
    html +="<input type='text'/>";
    html+="</td>";
    html +="<td>";
    html +="<input type='text'/>";
    html+="</td>";
    html+="</tr>";
     $('#dynamicTbl').append(html);
    });
});

jsfiddle example