How do I get the data from forms dynamically created with jQuery into php?

Question

I am trying to create a form, where Users can enter details about (music) albums. I have already created the form for entering the album itself into a products database. What I'm now trying to do is to create a dynamic form where users can add details about the individual tracks on the album. I've already worked this out as well, and all is working well. But somehow I don't get the values entered into this form. How can I extract this data in PHP to then enter it into a database.

Below you see my code. I'm very new to jQuery and you will probably see it in the code :) Any advice will be regarded!

I've tried the array naming method for the fields and have been searching this site quite thoroughly, I think. Here is my jQuery:

<script type="text/javascript">
        $(document).ready(function() {

            var tracktr = '<tr class="tracks">';
                tracktr +='><td class="enum"></td>';
                tracktr += '<td class="tracktd"> <input type="text" name="products_track_name[]" class="track_name"/> </td>';
                tracktr += '<td class="tracktd"> <input type="text" name="products_track_time[]" class="track_time"/> </td>';
                tracktr += '<td class="tracktd"> <input type="text" name="products_track_price[]" class="track_price" </td>';
                tracktr += '<td class="tracktd"> <input type="file" name="products_track_file[]" class="track_file" </td>';
                tracktr += '<td class="tracktd"><input type="text" name="products_track_id[]" class="track_id" disabled="disabled" </td>';
                tracktr += '<td class="main"><a class="addtrack" href=#>+</a> </td>';
                tracktr += '<td class="main"><a class="removetrack" href=#>-</a></td></tr>';
                $('#tracklist tr:last').before(tracktr);

                $('#tracklist').on('click', 'a.addtrack',function() {
                $(this).closest('tr').after(tracktr);
                $('.tracks').each(function(i) {
            $("td:first", this).html(i+1);
            var trackid = '<?php echo $model; ?>';
            trackid += '-';
            if (i+1<10) {
                trackid += '0'
            }
            trackid += (i+1);
            $(".track_id", this).val(trackid).attr('disabled', true);
        }) // end each

        var totaltracks = $('#tracklist .tracks').length;
            $('#totaltracks').html(totaltracks)
      return false;
            }); // end click
            $('table').on('click', '.tracks a.removetrack', function() {
            $(this).closest('tr').remove();
            $('.tracks').each(function(i) {
            $("td:first", this).html(i+1);
            var trackid = '<?php echo $model; ?>';
            trackid += '-';
            if (i+1<10) {
                trackid += '0'
            }
            trackid += (i+1);
            $(".track_id", this).val(trackid).attr('disabled', true);
        }) // end each
        var totaltracks = $('#tracklist .tracks').length;
            $('#totaltracks').html(totaltracks)
            return false;
            }); // end on
}); // end ready
      </script>

This is all nested within a table in HTML:

<table id="tracklist">
<form action="inserttracks.php" method="post" id="tracksform">
        <tr><th colspan="3">Titelerfassung</th></tr>
        <tr>
            <th>Track</th>
            <th>Titel</th>
            <th>Dauer</th>
            <th>Preis</th>
            <th>Upload File</th>
            <th>Titel-ID</th>

        </tr>
 <tr>
        <td colspan="3"><input type="submit" value="Submit" /> </td><td>Total Tracks:</td><td id="totaltracks"></td></form>
      </tr></table>

As I said, everything here works fine, but I don't get any data in the $_POSTarray. I've also tried to submit the data with jQuery's $.postmethod.

The inserttracks.php document currently just prints the $_POSTarray:

Where I can see nothing :)

Any help would be appreciated!

Answer 1

Change you html code to like below and check if it works. Mainly I have changed one thing - have place the whole table inside form.

<form action="inserttracks.php" method="post" id="tracksform">
    <table id="tracklist">
        <tr>
            <th colspan="3">Titelerfassung</th>
        </tr>
        <tr>
            <th>Track</th>
            <th>Titel</th>
            <th>Dauer</th>
            <th>Preis</th>
            <th>Upload File</th>
            <th>Titel-ID</th>
       </tr>
       <tr>
         <td colspan="3">
             <input type="submit" value="Submit" /> 
         </td>
         <td>Total Tracks:</td>
         <td id="totaltracks"></td>
       </tr>
    </table>
</form>