使用JavaScript重复模型的输入文本不起作用
问题描述：
我正在为CakePHPview添加多个model数据，我会让用户选择他想要保存的行数。使用JavaScript重复模型的输入文本不起作用
这个过程是如果我通过创建视图的CakePHP的行，但如果我使用jQuery的数据不保存，我检查的代码之间的差异通过CakePHP的，并通过jQuery复制的代码没有看到一些重要的东西产生：
CakePHP的产生形式：
<div class="location-row">
<div class="field wrp">
<input name="data[Location][0][name]" value="Location name" maxlength="50" type="text" id="Location0Name">
</div>
<div class="value wrp">
<input name="data[Location][0][value]" value="Location value" maxlength="50" type="text" id="Location0Value">
</div>
</div>
<div class="location-row">
<div class="field wrp">
<input name="data[Location][1][name]" value="Location name" maxlength="50" type="text" id="Location1Name">
</div>
<div class="value wrp">
<input name="data[Location][1][value]" value="Location value" maxlength="50" type="text" id="Location1Value">
</div>
<div class="btn remove-location-row bad">delete</div>
</div>
<div class="location-row">
<div class="field wrp">
<input name="data[Location][2][name]" value="Location name" maxlength="50" type="text" id="Location2Name">
</div>
<div class="value wrp">
<input name="data[Location][2][value]" value="Location value" maxlength="50" type="text" id="Location2Value">
</div>
<div class="btn remove-location-row bad">delete</div>
</div>
保存过程可以完美兼容CakePHP的生成形式：
echo $this->Form->input('Comparison.0.name', array ('div' => array ('class' => 'field wrp'), 'label' => false, 'value' => $name_text));
echo $this->Form->input('Comparison.0.value', array ('div' => array ('class' => 'value wrp'), 'label' => false, 'value' => $value_text));
echo $this->Form->input('Comparison.1.name', array ('div' => array ('class' => 'field wrp'), 'label' => false, 'value' => $name_text));
echo $this->Form->input('Comparison.1.value', array ('div' => array ('class' => 'value wrp'), 'label' => false, 'value' => $value_text));
echo $this->Form->input('Comparison.2.name', array ('div' => array ('class' => 'field wrp'), 'label' => false, 'value' => $name_text));
echo $this->Form->input('Comparison.2.value', array ('div' => array ('class' => 'value wrp'), 'label' => false, 'value' => $value_text));
随着CHRO我调试器我将所有与CakePHP形式完全出炉的数据：
_method:POST
data[Location][0][name]:Location name
data[Location][0][value]:Location value
data[Location][1][name]:Location name
data[Location][1][value]:Location value
data[Location][2][name]:Location name
data[Location][2][value]:Location value
jQuery的重复行
<div class="location-row">
<div class="field wrp">
<input name="data[Location][0][name]" value="Location name" maxlength="50" type="text" id="Location0Name">
</div>
<div class="value wrp">
<input name="data[Location][0][value]" value="Location value" maxlength="50" type="text" id="Location0Value">
</div>
</div>
<!-- FROM HERE THE ROWS ARE DUPLICATED with jQuery -->
<div class="location-row">
<div class="field wrp">
<input name="data[Location][1][name]" value="Location name" maxlength="50" type="text" id="Location1Name">
</div>
<div class="value wrp">
<input name="data[Location][1][value]" value="Location value" maxlength="50" type="text" id="Location1Value">
</div>
</div>
<div class="location-row">
<div class="field wrp">
<input name="data[Location][2][name]" value="Location name" maxlength="50" type="text" id="Location2Name">
</div>
<div class="value wrp">
<input name="data[Location][2][value]" value="Location value" maxlength="50" type="text" id="Location2Value">
</div>
</div>
如果我复制只烤CakePHP输入文本发送与jQuery行，但是HTML似乎到是确定：
_method:POST
data[Location][0][name]:Location name
data[Location][0][value]:Location value
这是我使用克隆输入字段jQuery代码：
var comparison_id = 1;
$('.add-location-row').click(function() {
if ($(this).siblings('.location-row').length > 1) {
$(this).siblings('.location-row').last().clone().insertAfter($('.location-row').last());
} else {
$(this).siblings('.location-row').last().clone().append('<div class="btn remove-location-row bad">delete</div>').insertAfter($('.location-row').last());
}
var element_1 = $(this).prev().find('div:nth-child(1) input');
var element_2 = $(this).prev().find('div:nth-child(2) input');
var id_att_1 = element_1.attr('id');
var id_att_2 = element_2.attr('id');
id_att_1 = id_att_1.replace((comparison_id-1).toString(), comparison_id.toString());
id_att_2 = id_att_2.replace((comparison_id-1).toString(), comparison_id.toString());
var name_att_1 = element_1.attr('name');
var name_att_2 = element_2.attr('name');
name_att_1 = name_att_1.replace((comparison_id-1).toString(), comparison_id.toString());
name_att_2 = name_att_2.replace((comparison_id-1).toString(), comparison_id.toString());
comparison_id ++;
element_1.attr('id', id_att_1);
element_2.attr('id', id_att_2);
element_1.attr('name', name_att_1);
element_2.attr('name', name_att_2);
$(this).prev().find('.remove-location-row').bind('click', function() {
$(this).parent().remove('.location-row');
});
});
使用jQuery对CakePHP没有影响，只有第一行被保存，我错了？
答
我写了一个测试脚本来repoduce的情况，但在我的情况下，它的工作原理。这里是测试代码，你可能会得到一些想法，你在代码中做错了什么。
test.php的
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form id="myform" method="post" action="test2.php">
<input type="submit" value="submit" />
<div class="input-collection">
<div class="input-collection-val"><input type="text" name="val-1-1" value="val-1-1" /></div>
<div class="input-collection-val"><input type="text" name="val-1-2" value="val-1-2" /></div>
</div>
</form>
<input type="button" value="add row" onclick="addRow();" />
<script type="text/javascript">
function addRow(){
var myform = $("#myform");
myform.append($(".input-collection",myform).first().clone());
var index = $(".input-collection",myform).length;
$(".input-collection:last .input-collection-val input").each(function(){
$(this).attr("name",$(this).attr("name").replace(/val-(\d)-(\d)/ig, "val-" + index + "-$2"));
$(this).attr("value",$(this).attr("value").replace(/val-(\d)-(\d)/ig, "val-" + index + "-$2"));
});
$(".input-collection:last").append("<div class='remove-collection'>Delete</div>");
$(".input-collection:last .remove-collection").unbind("click").bind("click",function(){
$(this).closest(".input-collection").detach().remove();
fixIndexes();
});
}
function fixIndexes(){
var myform = $("#myform");
$(".input-collection",myform).each(function(){
var index = $(".input-collection",myform).index(this)+1;
$("input",this).each(function(){
$(this).attr("name",$(this).attr("name").replace(/val-(\d)-(\d)/ig, "val-" + index + "-$2"));
$(this).attr("value",$(this).attr("value").replace(/val-(\d)-(\d)/ig, "val-" + index + "-$2"));
});
});
}
</script>
</body>
</html>
test2.php
<?php print_r($_POST);?>
没有你看看网络数据镀铬网片或萤火虫等，如果后/获得数据是从处理脚本中接收的？ – 2012-04-21 23:19:09
我发布了如何使用javascript复制输入表单元素的数据。 – vitto 2012-04-22 22:24:00
我记得你的问题中有一些jQuery代码。你为什么删除它们？你使用.clone（）来复制行吗？ – 2012-04-22 23:33:21