Как продублировать и очистить элемент формы с помощью jQuery? - PullRequest
Новая
       19

Как продублировать и очистить элемент формы с помощью jQuery?

4 голосов
/ 18 сентября 2011

Если у меня есть следующий HTML в форме: 

<div class='example'>
   <div class='row'>
       <input name='first_field' type='text' value='Hello' />
       <input name='second_field' type='text' value='World!' />
   </div>
</div>

Как мне создать копию этой (первой) строки со значением, удаленным, чтобы впоследствии добавить его по желанию для нескольких записей пользователя. Причина, по которой значение может уже существовать (как в этом примере), относится к случаям, когда данные редактируются. Я хотел бы получить: 

   <div class='row'>
       <input name='first_field' type='text' value='' />
       <input name='second_field' type='text' value='' />
   </div>

Я думал так: 

var row = $('.example').find('.row:first-child').clone(); 
row.find('[name]').each(function() {
  $(this).val('');
});

но это не работает в том смысле, что оно, похоже, не удаляет значения и не захватывает внешний html (упаковщик).

Кто-нибудь может посоветовать?

Спасибо.

1 Ответ

2 голосов
/ 18 сентября 2011

У вас есть синтаксическая ошибка в вашем JS..find('.row:first-child) должно быть .find('.row:first-child'), но что касается клонирования, поведение по умолчанию - вырезать значения. вычеркните это ... это только для клонирования фактических элементов ввода.

http://jsfiddle.net/Yb2Ym/

var row = $('.example').find('.row:first-child').clone();  
row.find('[name]').each(function() {
  $(this).val('');
});
$(".row:last").after(row)
...