Jquery multiple select / input post array data

I have this html situa开发者_开发技巧tion:

        <div id="art_select">
        <!-- start row 1 -->
             <select name="articolo[]" id="first" class="art">
                        <option value="">Select product</option>
                        <option value="2">IN FERMENTUM ANTE SIT AMET LOREM ELEMENTUM AC ELEIFEND AMET.</option>
            <option value="1">NUNC ID PORTTITOR ARCU. CRAS CONVALLIS ULLAMCORPER VOLUTPAT.</option>
                                    </select>
                                    <input type="text" name="qta[]" id="qta-2"><br>
         <!-- end row 1 -->
 <!-- start row 2 -->
        <select name="articolo[]" class="art">
                                    <option value="">Select product</option>
                                    <option value="2">IN FERMENTUM ANTE SIT AMET LOREM ELEMENTUM AC ELEIFEND AMET.</option>
            <option value="1">NUNC ID PORTTITOR ARCU. CRAS CONVALLIS ULLAMCORPER VOLUTPAT.</option>
                                    </select><input type="text" name="qta[]" id="qta-1">
        <!-- end row  2-->
 </div>
    <a href="#" onclick="return addprd(this)">+ Add row</a>

The Add row link add a new select / qta input text.

Ho can I do to post data of this form?? ( i use php ). An array of key => value foreach row.?? What's the BEST way for do this??? THANKSS

Name each input something like row[0][qta] and row[0][articolo] where you increment that number for each new row.

Then, assuming POST, you will have an array the data under $_POST['row'].

You should wrap your rows in a div to make things easier.

You could call this JavaScript function every time you add or remove a row, to renumber the name attributes correctly.

So long as you make the first one 0.

var renumberInputs = function() {
    $('#art_select > div').each(function(index) {
        $(this).find(':input').attr('name', function(i, name) {
            return name.replace(/\[\d+\]/, '[' + index + ']');
        });
    });
}