我的ajax成功方法DOM元素创建有一点错误。在成功方法我已经创建了一个html表行,并在该行内部创建了一个表单,但这个表单不是预期的工作。
这是关于ajax成功的代码
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 screenshot
请帮助,提前谢谢。
你的代码的问题是你实际上没有遵循标准来在你的ajax回调中创建html。您不能在表格行中包含表单。唯一的方法是将表格行划分为子表单。请看一下这个问题。 HTML: Is it possible to have a FORM tag in each TABLE ROW in a XHTML valid way?