Почтовая форма не работает с полями jquery

Question

я не могу получить форму для отправки переменных в другой скрипт, используя динамические поля?

edit: скрипт создает новую строку полей ввода, но ни одному из них не удается опубликовать переменные в php-скрипте.

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){
                            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>

Answer 1

<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>

Answer 2

Входные элементы должны быть внутри элемента ...

Answer 3

Почему бы вам просто не потерять счетчик и не сделать это так:

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

После динамического добавления строк вы должны связать ('click') или просто использовать метод live ().

Answer 4

Я не вижу, как вы инициализируете переменную i. Мы не можем видеть весь источник, но я думаю, что это, вероятно, проблема.