Post form not working with jquery fields

i cant get the form to post the variables to another script using dynamic fields?

edit: the script creates a new row of input fields, but none of them manage to post variables to a php script.

jquery:

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

            var newRowNum = 2;


            $('#addnew').click(function(){
                    // increment the counter
                    newRowNum += 1;

                    var addRow = $(this).parent().parent();


                    var newRow = addRow.clone();


                    $('input', addRow).val($(this).val());
                    $('name', addRow).val('os' + newRowNum);


                    $('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');


                    $('input', newRow).each(function(i){
                           开发者_StackOverflow var newID = 'os' + newRowNum + i;
                            $(this).attr('id',newID).attr('name',newID);
                    });



                    addRow.before(newRow);


                    $('a.remove', newRow).click(function(){
                            $(this).parent().parent().remove();
                            return false;                           
                    });


                    return false;
            });
    });

html:

<tr>
<td>
<input name="os21" type="text" id="os21" value="" size="24" maxlength="60" /></td>
<td>
<input name="os22" type="text" id="os22" value="" size="24" maxlength="60" /></td>
<td>
<input name="os23" type="text" id="os23" value="" size="10" maxlength="60" /></td>
<td><a id="addnew" href="">Add +</a></td>
</tr>
<tr><td colspan="3" align="left" style="text-align: right; padding-top: 10px;">
<input type="submit" value="Update">
</td></tr>

<script language="text/javascript">
    function postMyForm()
    {
        $.ajax({
            url: "url from your file to post to",
            data: $('#myForm').serialize(),
            type: 'post',
            success: function(data) {
                // do stuff when request is done
            }
        });
    }

    function AddNewRule() {
        // get last ID
        // convert to a int to count with it
        var LastID = parseInt( $('#myTable tr:last td input').attr('id').replace(/os/gi, '') );
        // add 1 to get next ID
        LastID += 1; // OR LastID = LastID + 1;  what you wanna use

        // create new rule and set the next ID
        var newRule = $('<tr><td><input name="os'+ LastID +'" type="text" id="os'+ LastID +'" value="" size="10" maxlength="60" /></td></tr>');

        // append / insert at the end of your table
        $('#myTable').append(newRule);
    }
</script>

<form id="myForm">
<table id="myTable">
    <tr>
        <td>
            <input name="os21" type="text" id="os21" value="" size="24" maxlength="60" />
        </td>
    </tr>
    <tr>
        <td>
            <input name="os22" type="text" id="os22" value="" size="24" maxlength="60" />
        </td>
    </tr>
    <tr>
        <td>
            <input name="os23" type="text" id="os23" value="" size="10" maxlength="60" />
        </td>
    </tr>
</table>
    <a id="addnew" onclick="AddNewRule();"  href="javascript:void(0);">Add +</a>
<table>
    <tr>
        <td colspan="3" align="left" style="text-align: right; padding-top: 10px;">
            <input type="submit" onclick="postMyForm();" value="Update">
        </td>
    </tr>
</table>
</form>

I don't see you initializing the variable i. We can't see all the source but I imagine this is probably the problem.

Input elements supposed to be inside element...

Why don't you just lose the counter and do it like this:

<input name="os[]" type="text" class="os" value="" size="24" maxlength="60" /> 

After you add rows dynamically you must bind('click') or just use live() method.