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

时间：2012-04-21 23:10:12

标签： javascript jquery model-view-controller view model

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

如果我通过CakePHP视图创建行，则该过程有效，但如果我使用jQuery数据未保存，我检查了通过CakePHP生成的代码与通过jQuery复制的代码之间的差异，但没有看到重要的事情：< / p>

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));

使用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

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没有影响，只保存第一行，我错了？

1 个答案:

答案 0 :(得分：0)

我写了一个测试脚本来重现这种情况但在我的情况下它可行。这是测试代码，您可能会在代码中得到一些错误。

的 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);?>
相关问题
最新问题