Jquery + динамические дополнительные строки в форме

Question

Я создаю форму, которая динамически вставляет данные, введенные в поля формы, в базу данных по мере ввода данных. Сейчас я работаю над добавлением динамических строк в форму (т.е. дублирование существующей строки, если пользователю необходимо добавить дополнительную информацию). Я столкнулся с двумя проблемами.

Код, который я использую, основан на следующем:

function addFormField() {
$("#divTxt").append("<div id='education" + id + "'><input name='name' id='name' type='text' size='20'><a href='#' onClick='removeFormField(\"#education" + id + "\"); return false;'><img src='images/minus.gif' width='10px' border=0></img></a></div>");
}

Проблема 1: Исходная строка (до вставки следующей) работает нормально, но я не могу понять, почему новая строка даже не пытается отправлять данные через $ .post, используя функцию размытия ввода. Это потому, что все они имеют одинаковые имена или потому, что фактический код $ .post загружен в готовый документ и игнорирует это, так как поля формы появляются после события click?

Проблема 2: Чтобы вставить данные из вновь добавленных строк, нужно ли мне использовать jquery.each для циклического обхода полей формы , если они имеют одинаковые имя / идентификатор?

Ну, любые предложения были бы хороши в этот момент - время царапин на голове!

Answer 1

Не используйте тот же идентификатор и имя, и вы будете двигаться в правильном направлении. Недопустимый HTML для использования одного и того же идентификатора.

Кроме того, когда вы отправляете данные (будь то с помощью jQuery.serialize ()) или просто стандартным POST, обработка информации будет намного проще.

function addFormField() {
$("#divTxt").append("<div id='education" + id + "'><input name='name' id='name' type='text' size='20'><a href='#' onClick='removeFormField(\"#education" + id + "\"); return false;'><img src='images/minus.gif' width='10px' border=0></img></a></div>");
}

Посмотрев на ваш код: вы можете использовать DOM для ссылки на поле, которое вы также хотите удалить. Надеюсь, это избавит вас от необходимости иметь удостоверение личности.

Это выглядит так:

function addFormField(index) {
$("#divTxt").append("<div ><input name='name"+index+"' type='text' size='20'><a href='#' onClick='$(this.parentNode).remove()'><img src='images/minus.gif' width='10px' border=0></img></a></div>");
}