Динамически создаваемые элементы DOM по методу успеха ajax

Question

У меня небольшая ошибка при создании DOM-элементов с помощью моего метода успеха ajax. в методе успеха я создал строку html-таблицы, а внутри этой строки я создал форму, но эта форма не является ожидаемой.

это код на ajax success

success: function(data) {   

        html='';
        for (i = 0; i < data['qoutations'].length; i++) {
            html+='<tr><form method="post" action="index.php?route=catalog/product/getForm&user_token={{ user_token }}">';
            html+='<td class="text-center"><input type="checkbox" name="selected[]" value="'+data['qoutations'][i]['qoutation_id']+'" /></td>';

            html+='<td class="text-left">'+data['qoutations'][i]['customer_id'];
            html+='<input type="hidden" id="customer_id" value="'+data['qoutations'][i]['qoutation_id']+'"/></td>';
            html+='<td class="text-left">'+data['qoutations'][i]['description']+'</td>';                    
            html+='<td class="text-left"> <div class="form-group">';
            html+='<textarea class="form-control" rows="2" id="qouted"></textarea>';
            html+='</div></td>';

            html+='<td class="text-left">';
            var customer_id1=data['qoutations'][i]['customer_id'];
            var qoutation_id1=data['qoutations'][i]['qoutation_id'];                                
            html+='<input class="btn btn-info" type="submit" id="createproduct" value="Create Product" onClick="createProduct(\'' + customer_id1 + '\',\''+qoutation_id1+'\')"/></td>';

            html+='<td class="text-left">'+data['qoutations'][i]['qouted']+'</td>';
            html+='<td class="text-left">'+data['qoutations'][i]['status']+'</td>';

            html+='<td class="text-left">'+data['qoutations'][i]['date'];
            html+='<input type="hidden" id="date" value="'+data['qoutations'][i]['date']+'"/></td>';

            html+='<td class="text-left">';
            html+='<input class="btn btn-danger" type="button" id="cancel" value="cancel"/></td>';
            html+='</tr>';
        }
        $('#detail').html(html);
}

и эта картина проясняет мою ошибку. как показано на рисунке, элемент формы открывается и закрывается немедленно. Скриншот DOM

помогите пожалуйста, заранее спасибо.

Answer 1

Проблема с вашим кодом в том, что вы на самом деле не следуете стандарту для создания html в вашем обратном вызове ajax. Вы не можете иметь форму внутри строки таблицы. Единственный способ сделать это - разделить строку таблицы на подформу. Пожалуйста, взгляните на этот вопрос.
HTML: возможно ли иметь тег FORM в каждой строке TABLE ROW допустимым способом XHTML?