javascript - 使用 JavaScript 复制模型的输入文本不起作用

Question

我正在努力CakePHP view添加多个model数据，我会让用户选择他想要保存的行数。

如果我通过 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));

CakePHP使用 Chrome 调试器，我以完全烘焙的形式发送所有数据：

 _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>

如果我复制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，只保存了第一行，我错在哪里？

score 0 · Accepted Answer

我编写了一个测试脚本来重现这种情况，但在我的情况下它可以工作。这是测试代码，您可能会知道您在代码中做错了什么。

测试.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);?>

javascript - 使用 JavaScript 复制模型的输入文本不起作用

1 回答 1

Related

Reference