2011-02-08 2 views
3

У меня есть следующие:Jquery клон и переименовывать поля ввода

   <!-- group clone //--> 
       <div class="section"> 
        <div class="parent row infoOn"> 
         <div class="validGroup"> 
          <a title="remove" class="iconClose" href="#">remove</a> 
          <div class="grouping"> 
           <div class="clearfix valid"> 
            <label>Name<span class="iconReq">&nbsp;</span>:</label> 
            <input type="password" class="text inpButton" name="items[0].first"> 
           </div> 
           <div class="clearfix"> 
            <label>Email<span class="iconReq">&nbsp;</span>:</label> 
            <input type="text" class="text inpButton" name="items[0].first"> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="row addControl"> 
         <a href="#" class="button">Add</a> 
        </div> 
       </div> 
       <!-- group clone //--> 

и jqery:

$(function(){ 
    // Control clone 
    $('div.addControl a.button').click(function (e){ 
     e.preventDefault(); 
     var parent = $(this).closest('.section').find('.parent:last'); 
     var parentInput = parent.clone(); 
     parentInput.find("input").val(""); 
     parent.after(parentInput); 

    }); 
    $('div.validGroup a.iconClose').live('click', function (e){ 
     e.preventDefault(); 
     if ($(this).closest('.section').find('.parent').length > 1){ 
      $(this).closest('div.parent').remove(); 

     } 
    }); 
    reflesh(); 
}); 
  1. нажав на кнопку "Добавить" удаляет значения из полей ввода и клонов группа (2 поля ввода).
  2. нажав «удалить» ссылка удаляет группу

Вопрос: как бы я изменить его так, чтобы при добавлении или удалении новой группы, поля ввода будет переименован в name="items[INDEX].first" и name="items[INDEX].last"

Например. когда есть только одна "группа", поля ввода будут иметь имена:

  • name="items[0].first"
  • name="items[0].last"

, если добавить еще один, новый один будет иметь

  • name="items[1].first"
  • name="items[1].first"

и так далее. Когда я удаляю первый (один с items[0].first), имена второго входа будут изменены с "items[1].first" на items[0].first.

вот что я похож: enter image description here

благодаря

ответ

4

Я понял это:

var size = parseInt($('.form .section .parent').size()); 
$('.form .section .parent').each(function(index){ 
    $(this).find('input.text').each(function(){ 
     $(this).attr("name", $(this).attr("name").replace($(this).attr("name").match(/\[[0-9]+\]/), "["+index+"]")); 
    }); 
    if (size > 1) { $(this).find('a.iconClose').show(); }else{ $(this).find('a.iconClose').hide(); } 
}); 
+1

Вместо 'заменить ($ (это) .attr (" имя ") .match (/ \\ [[0-9] + \\] /)," ["+ index +"] "))' вы могли бы использовать 'replace (/ \\ [\ d + \\] /," ["+ index +"] ")' непосредственно. – Felipe

0
$('.add-more').on('click',function(){ 
var newelement= $(".form-content").eq(0).clone(); 
var num = $('.form-content').length; 
var newNum = num + 1; 
newelement.find('input').each(function(i){ 
    $(this).attr('name',$(this).attr('name')+newNum); 
    $(this).attr('id',$(this).attr('id')+newNum); 
}); 
$('.form-content').last().after(newelement); 
}); 
+0

Хотя ответ на основе кода действительно является ответом, немного объяснением (почему код OP не работал, какова общая идея вашего кода, важные моменты, предупреждения и т. Д.) Могли бы сделать его лучше * ответ. – lfurini

Смежные вопросы