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

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。最初の行だけが保存されます。どこが間違っていますか?

score 0 · Accepted Answer

状況を再現するテストスクリプトを作成しましたが、私の場合は機能します。これがテストコードです。コードで何が間違っているのか、いくつかのアイデアが得られるかもしれません。

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

javascript - JavaScript を使用してモデルの入力テキストを複製できない

1 に答える 1

Related

Reference