使用 JavaScript 复制模型的输入文本不起作用
Using JavaScript to duplicate model's input text don't work
我正在研究一个添加多个model
数据的CakePHP
view
,我会让用户选择他想要保存的行数。
如果我通过 CakePHP 视图创建行,该过程有效,但是如果我使用 jQuery,则不会保存数据,我已经检查了通过 CakePHP 生成的代码和通过 jQuery 复制的代码之间的差异,但没有看到重要的东西:
蛋糕PHP生成的形式:
<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));
使用Chrome调试器,我发送了所有数据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
j查询重复的行
<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>
如果我复制带有jQuery
的行,则仅发送烘焙的CakePHP
输入文本,但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
没有影响,只保存第一行,我错在哪里?
我写了一个测试脚本来重现这种情况,但就我而言,它可以工作。这是测试代码,您可能会知道您在代码中做错了什么。
测试.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>
测试2.php
<?php print_r($_POST);?>
相关文章:
- 尝试在PHP中回显输入文本时出现未定义的索引错误
- 使用模拟按键在输入框中自动输入文本
- 如何添加类,同时开始在文本字段中输入文本
- JQuery使用相同的功能自动完成各种输入文本
- 如何设置输入文本框jquery的值
- 输入文本框为空时的阻止按钮asp.网络表单
- 基于单选框更新页眉,选中并选择输入文本
- 将输入文本与某个选项的值相匹配并自动选择
- 如何在 JavaScript 中创建输入文本框
- 如何使用纯Javascript观看输入文本框
- 需要使用javascript获取输入文本,然后将其添加到句子中
- php&js-将电子邮件添加到输入文本中
- 动态启用/禁用来自控制器的输入文本
- .val()不返回输入文本
- 从确认框中预填充输入文本框
- 如何使用JavaScript解析输入文本中给定的数据
- 添加/删除/更改输入文本的部分值
- 根据输入文本按元素排序,AngularJS
- 如何将(a*b)两个输入文本值相乘,并在javascript中随文本变化动态显示
- 如何从Tr重复的输入文本中获取值