Каков наилучший способ обновления входных имен при их динамическом добавлении в форму? - PullRequest
Новая
       12

Каков наилучший способ обновления входных имен при их динамическом добавлении в форму?

0 голосов
/ 24 августа 2010

Я пытаюсь придумать чистый и эффективный способ обработки входных имен форм при динамическом добавлении большего в массив 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.В качестве «части 2» моего вопроса я хотел бы узнать, как вернуть этот объект для меня, чтобы затем вставить в DOM.

Что-то вроде: 

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

помощь приветствуется.Приветствия.

Ответы [ 3 ]

0 голосов
/ 24 августа 2010 
<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>

перед отправкой формы

получите пользовательские атрибуты и создайте свой атрибут 'name'

[update]

его jsp, но не должно бытьВам трудно конвертировать в php 

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

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

для кода js 

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

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

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

   });

});
0 голосов
/ 24 августа 2010 
<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" />
0 голосов
/ 24 августа 2010

Рассматривали ли вы использование основанных на массиве имен полей?Вам вообще не придется их менять: 

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

, будет ли это работать для вас, конечно, будет зависеть от того, что вы собираетесь делать с полями.

...