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

我有一个表单，用户可以通过添加某些字段进行修改，这些字段可以是相同类型的，并且通过引入HTML使用ajax注入代码。通过AJAX添加HTML字段时重命名字段名称，jQuery

我想追加一个递增的数字到字段名称 - 所以当表单被提交时，我将有唯一的字段名称。

这里是一个示例代码（简化）。

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

这里是一个被通过Ajax被称为“标准”的HTML文件

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

我敢肯定，我想重新命名（或追加）进入的领域中取得成功*：我追加前它到了DOM。但我完全不清楚如何做到这一点。

*需要注意的是，在某些情况下，HTML中会出现多个字段，我想为每个字段追加相同的增量编号。

来源

2016-12-02 jpmyob

为什么不用数组，像'fname []'？无需在js中更改名称，并且在后端处理可能会更容易，并且您可以遍历所收到的数组。 – Pevara

@Pevara - 我会玩这个想法 - 最初，由于实际形式的工作原理，我需要知道每个加法都是唯一编号的......如果我正确地阅读了您的建议，常用名称将被分组在一个数组中 - 这对这个项目不起作用 - 但可能对其他人很好。谢谢。 – jpmyob

设置一个计数器，每次增加它：

JS：

i = 1;    

// INSERT FULL 
function addField(type) {   
    $('.segments').append('<div class="row" >Name:<input id="'+i+'" type="text" name="fname" value="" /><input type="text" name="lname" value="" /></div>');  
    i = i + 1  
};

DEMO：https://jsfiddle.net/fb4fvkps/1/

来源

2016-12-02 17:05:04 Brad

啊是的 - 但我怎么引用这个，就好像它来自ajax调用？这js小提琴是一个'例子' - 看问题，那些输入将作为html ... – jpmyob

所以只需设置增量数字，当你做ajax调用并将其追加到输入名称，最新的问题是什么？ – Brad

“data”是从ajax调用返回的变量... 现在我倾向于：$（data）.attr（“name”，function（）{return $（this）.attr（“name”）+一世 }）;但即时消息在黑暗中拍摄，并希望得到帮助。 – jpmyob

多试验后 - 这为我工作。如果有人点可能出现的任何问题 - 请说一下：

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

来源

2016-12-02 19:06:27 jpmyob

我认为最简单的方法是通过柜台在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'); 

       } 

      });

来源

2016-12-02 19:06:37 farhadamjady

是farhadamjady是简单的递增 - 我的问题是如何引用从阿贾克斯数据的name属性...添加增量器然后简单。 thx – jpmyob

我可以理解你为什么要重命名html元素，你可以在服务器端准备name属性和其他属性，然后将它们传递给客户端，并直接将它附加到html表单;你能显示“数据”内容吗？ – farhadamjady

HTML是一种模板，不受服务器端技术的驱动。新一代的用户界面被认为独立于服务器技术。 – jpmyob

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

回答

相关问题