Question

我有一个用户可以通过添加某些字段来修改的表单。这些字段可以是同一类型，并且通过引入HTML使用ajax注入代码。

我想在字段名称后附加一个增加的数字 - 所以当提交表单时，我会有唯一的字段名称。

以下是示例代码（简化）。

<!DOCTYPE html >
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" ></script>

        <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" >

        <script type="text/javascript" >
            rowNumber = 1;

            // INSERT FIELD(s)
            function addField( type ) {

                var url = type + '.html';
                var renamed = '';

                $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: 'html',
                    success: function( data ) {

                        console.log( data );

                        // I want to append an incrimented number to the field name
                        // I want my field names are taken from the incoming HTML but are incremented, so I don'thave conflicts when I submit
                        // So it will look like this <input type="text" name="field1" value="" /> or <input type="text" name="field2" value="" /> etc...
                        // I think I should do that here BEFORE I append it to the dom.
                        renamed = $( data ).attr( 'name', function() { return $( this ).attr( 'name' ) + rowNumber });

                        // append the html - with the unique name
                        $( '.segments' ).append( renamed );
                        rowNumber = rowNumber + 1;

                    },
                    error: function() {

                        console.log( 'error' );

                    }

                });

            };
        </script>
    </head>

    <body>

        <div class="content" >
            renaming field names when adding html field via ajax

            <form>
                <input type="button" value="+Add Field" onClick="addField( 'standard' );" />

                <div class="segments" >
                    <div class="row" >Name:<input type="text" name="fname" value="" /><input type="text" name="lname" value="" /></div>
                </div>

                <input type="submit" />
            </form>

        </div>

    </body>

</html>

这是＆＃34;标准＆＃34;通过Ajax调用的html文件

<div class="row" >Name:<input type="text" name="fname" value="" /><input type="text" name="lname" value="" /></div>

我很确定我想在成功中重命名（或追加）传入的字段*：然后我将它附加到DOM。但我完全不知道该怎么做。

*应该注意的是，在某些情况下，HTML中会出现多个字段，我希望为每个字段添加相同的增量编号。

Answer 1

经过多次试验 - 这对我有用。如果有人发现可能出现的任何问题 - 请说些什么：

    <script type="text/javascript" >
            rowNumber = 1;

            // INSERT HTML 
            function addField( type ) {

                var url = type + '.html';
                var renamed = '';

                $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: 'html',
                    success: function( data ) {

                        // rename the form elements
                        var renamed = jQuery( data );
                            renamed.find( '[name]' ).attr( 'name', function() { return $( this ).attr( 'name' ) + rowNumber });

                        // append the html - with the unique name
                        $( '.segments' ).append( renamed );

                        rowNumber = rowNumber + 1;

                    },
                    error: function() {

                        console.log( 'error' );

                    }

                });

            };
        </script>

Answer 2

我认为最简单的方法是将计数器作为ajax函数中的数据传递然后在服务器端准备你的html元素并将其传递给客户端，如下所示：

 rowNumber = 1;  
 $.ajax({
                type: 'GET',
                url: url,
                dataType: 'html',
                data:{rowNumber:rowNumber},
                success: function( data ) {

                    console.log( data );




                    // append the html - with the unique name
                    $( '.segments' ).append( renamed );
                    rowNumber = rowNumber + 1;

                },
                error: function() {

                    console.log( 'error' );

                }

            });

通过ajax，jQuery添加HTML字段时重命名字段名称

2 个答案: