Несколько текстовых полей в одном div с динамической формой jQuery

Использование кода jQuery от here, но я пытаюсь иметь несколько текстовых входов в каждом div. Он отображает правильно и увеличивает и сохраняет имя и идентификатор для первого элемента, но для входа второго возраста он сохраняет только первый вход.Несколько текстовых полей в одном div с динамической формой jQuery

<html> 
    <head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#btnAdd').click(function() { 
       var num  = $('.clonedInput').length; 
       var newNum = new Number(num + 1); 

       var newElem = $('#input' + num).clone().attr('id', 'input' + newNum); 

       newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); 
       $('#input' + num).after(newElem); 
       $('#btnDel').attr('disabled',''); 

       if (newNum == 5) 
        $('#btnAdd').attr('disabled','disabled'); 
      }); 

      $('#btnDel').click(function() { 
       var num = $('.clonedInput').length; 

       $('#input' + num).remove(); 
       $('#btnAdd').attr('disabled',''); 

       if (num-1 == 1) 
        $('#btnDel').attr('disabled','disabled'); 
      }); 

      $('#btnDel').attr('disabled','disabled'); 
     }); 
    </script> 
</head> 

<body> 

<form id="myForm"> 
    <div id="input1" style="margin-bottom:4px;" class="clonedInput"> 
     Name: <input type="text" name="name1" id="name1" /> 
    </div> 

    <div> 
     <input type="button" id="btnAdd" value="add another name" /> 
     <input type="button" id="btnDel" value="remove name" /> 
    </div> 
</form> 

</body> 
</html>

Вот как выглядит моя новая форма и код jQuery.

<form id="myForm"> 
<div id="input1" style="margin-bottom:4px;" class="clonedInput"> 
    Name: <input type="text" name="name1" id="name1" /> 
    Age: <input type="text" name="age1" id="age1" /> 
</div> 

<div> 
    <input type="button" id="btnAdd" value="add another name" /> 
    <input type="button" id="btnDel" value="remove name" /> 
</div>

newElem.children(':first') 
      .attr('id', 'age' + newNum) 
      .attr('name', 'age' + newNum);

источник

2013-07-30 user2532297

Ваш скрипт обновляет только первый вход, необходимо перебрать и обновить все входы в клонированной DIV

$('#btnAdd').click(function() { 
    var num = $('.clonedInput').length; 
    var newNum = num + 1; 

    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum); 

    newElem.find(':input').each(function() { 
     $(this).attr('id', $(this).attr('id').replace(/\d+/, newNum)); 
     $(this).attr('name', $(this).attr('name').replace(/\d+/, newNum)); 
    }); 

    $('#input' + num).after(newElem); 
    $('#btnDel').attr('disabled', ''); 

    if (newNum == 5) $('#btnAdd').attr('disabled', 'disabled'); 
});

источник

2013-07-30 18:22:19

Несколько текстовых полей в одном div с динамической формой jQuery

ответ

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