Добавление полей формы с Javascript

Question

При использовании Javascript для добавления дополнительных полей формы, которые содержатся в одном наборе полей, я столкнулся с проблемой закрытия тега fieldset, который все еще применяется после первого поля формы. Это приводит к разрыву макета, и мне нужно выяснить, как я могу обойти это.

Я попытался переместить тэг закрытия поля закрытия вне DIV, где добавляются дополнительные поля, но проверка Firebug по-прежнему показывает его закрытие после первого элемента.

JAVASCRIPT

<script type="text/javascript"> 
$(function() 
{ 
    var template = $('#inventoryItems .inventory:first').clone(), 
     inventoryCount = 1; 

    var addInventory = function() 
    { 
     inventoryCount++; 
     var inventory = template.clone().find(':input').each(function() 
     { 
      var newId = this.id.substring(0, this.id.length-1) + inventoryCount; 
      $(this).prev().attr('for', newId); // update label for (assume prev sib is label) 
      this.name = this.id = newId; // update id and name (assume the same) 
     }).end() // back to .attendee 
     .attr('id', 'inv' + inventoryCount) // update attendee id 
     .appendTo('#inventoryItems'); // add to container 
    }; 

    $('.btnAddInventory').click(addInventory); // attach event 
}); 
</script> 

HTML

    <div id="inventoryItems" class="inventoryItems" style="margin:0; padding:0;"> 

         <fieldset style="width:62%; float:left; margin-left: 19%;"> 

          <div id="inv1" class="inventory"> 
           <label>Inventory</label> 
           <select name="invItem" style="width:92%;"> 
            <?php 
             $invItem_values = array("id", "name"); 
             display_options_list($dp_conn, $invItem_values, "inventory", "id"); 
            ?> 
           </select> 

           <a class="btnAddInventory"><img src="images/icn_new_article.png"></a> 
           <a href="#"><img src="images/icn_trash.png"></a> 
          </div> 
        </div> 
         </fieldset><div class="clear"></div> 

Answer 1

У вас ошибка в вашей HTML-разметки, дополнительный закрытие DIV тега сразу перед закрывающим тегом Fieldset. Переместите его после метки .clear, и вы должны быть в порядке.

При анализе HTML-кода и обнаружении закрывающего тега DIV (который соответствует #inventoryItems), он отмечает, что у вас все еще есть тег FIELDSET, который открыт, поэтому он вставляет тег close для него. После этого, когда вы сталкиваетесь с фактическим закрывающим тегом FIELDSET, он просто игнорируется, потому что нет открытых тегов FIELDSET.

Оригинальная ошибка находится в вашем коде JS. Следующая строка добавляет к DIV #inventoryItems вместо FIELDSET.

.appendTo('#inventoryItems'); // add to container 

Попробуйте заменить его:

.appendTo('#inventoryItems > fieldset'); // add to fieldset