Question

我无法使用动态字段将表单发布到另一个脚本？

编辑：脚本创建一个新的输入字段行，但它们都没有设法将变量发布到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

我没有看到你初始化变量i。我们看不到所有的来源，但我想这可能是问题所在。

Answer 3

输入元素应该在元素内...

Answer 4

你为什么不丢失计数器并按照这样做：

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

动态添加行后，必须绑定（'click'）或只使用live（）方法。

发布表单不适用于jquery字段

4 个答案: