將動態添加到表單時更新輸入名稱的最佳方法是什麼？

Question

我試圖想出一個乾淨有效的方式來處理表單輸入名稱時，動態添加更多的POST數組。

例如，如果我有以下形式：

<fieldset> 
    <input type="text" name="users-0.firstname" /> 
    <input type="text" name="users-0.lastname" /> 
</fieldset> 

我然後單擊「addmore」按鈕，複製該HTML並將其添加回文檔。導致：

<fieldset> 
    <input type="text" name="users-0.firstname" /> 
    <input type="text" name="users-0.lastname" /> 
</fieldset> 

我試圖找到遞增該名稱索引，所以我可以使用服務器上的數據的最佳方式。到目前爲止，我一直在使用下面的代碼：

$('.addmore').click(function() 
{ 
    var $button = $(this); 
    var $fieldset = $button.prev('fieldset'); 
    var $newset = $('<div class="new">' + $fieldset[0].innerHTML + '</div>'); 

    $newset.insertBefore($button); 
    updatenames($newset, $('fieldset').length + 1); 
}); 

function updatenames($set, newIndex) 
{ 
    /* 
     updates input names in the form of 
     set-index.name 
     set-index 
    */ 
    var findnametype = function(inputname) 
    { 
     if (inputname.indexOf('-') != -1 && inputname.indexOf('.') != -1) 
     { 
     var data1 = inputname.split('-'); 
     var data2 = data1[1].split('.'); 

     // [type, set, index] 
     return [1, data1[0], parseInt(data2[0])] 
     } 

     if (inputname.indexOf('-') != -1 && inputname.indexOf('.') == -1) 
     { 
     var data = inputname.split('-'); 
     return [2, data[0], data[1]]; 
     } 

     return false; 
    }; 

    var type = findnametype($set.find('input:eq(0)')[0].name); 

    $set.find('input, select').each(function() 
    { 
     var $input = $(this); 

     var oldname = $input[0].name; 
     var newname = false; 

     switch (type[0]) 
     { 
     case 1: newname = oldname.replace('-' + type[2], '-' + newIndex); 
      break; 
     case 2: newname = oldname.replace('-' + type[2], '-' + newIndex); 
      break; 
     } 

     $input[0].name = newname; 
    }); 

    return type; 
} 

這updatenames功能是我一直使用的是什麼最近的變化。在這種情況下，我檢查以找到輸入名稱的格式。然後我增加索引。

正如您可能注意到的那樣，遞增會發生在DOM中。作爲我的問題的「第二部分」，我想了解如何讓該對象返回給我，然後插入到DOM中。

喜歡的東西：

$newset = updatenames($newset, $('fieldset').length +1); 
$newset.insertBefore($button); 

您的幫助表示讚賞。乾杯。

Answer 1

您是否考慮過使用基於數組的字段名？你不必改變這些都：

<input type="text" name="users.firstname[]" /> 
<input type="text" name="users.lastname[]" /> 

這是否爲你的作品當然取決於你要與田野做什麼。

Answer 2

<fieldset> 
    <input index=1 var=user prop=firstname /> 
    <input index=1 var=user prop=lastname /> 
</fieldset> 

<fieldset> 
    <input index=2 var=user prop=firstname /> 
    <input index=2 var=user prop=lastname /> 
</fieldset> 

您提交表單之前

獲得自定義屬性和構建你的「名」屬性

[更新]

它的JSP，但不應該是很難u到轉換to php

<% 
for (int i = 0; i < 1000; i++) { 
%> 

<fieldset> 
<input index=<%=i%> var=user prop=firstname /> 
<input index=<%=i%> var=user prop=lastname /> 
</fieldset> 
<% 
} 
%> 

for js code

$('button').click(function(){ 

    $('input').each(function(i, node){ 
     var $node = $(node); 

     $node.attr('name', $node.attr('var') + $node.attr('index') + "."+ $node.attr('prop')) 

    }); 

}); 

Answer 3

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.addmore').click(function() { 
      var fieldset = $(this).prev('fieldset'); 
      var newFieldset = fieldset.clone(); 
      incrementFieldset(newFieldset); 
      newFieldset.insertBefore($(this)); 
     }); 
    }); 

    function incrementFieldset(set) { 
     $(set).find('input').each(function() { 
      var oldName = $(this).attr('name'); 
      var regex = /^(.*)-([0-9]+)\.(.*)$/; 
      var match = regex.exec(oldName); 
      var newName = match[1] + '-' + (parseInt(match[2]) + 1) + '.' + match[3]; 
      $(this).attr('name', newName); 
     }); 
    } 
</script> 

<fieldset> 
    <input type="text" name="users-0.firstname" /> 
    <input type="text" name="users-0.lastname" /> 
</fieldset> 
<input type="button" class="addmore" value="Add" />