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

Question

CakePHPviewのデータを複数入力する場合は、保存する行の数を選択できるようにします。

私はCakePHPビューで行を作成しても処理はうまくいきますが、jQueryを使用するとデータは保存されません。重要なことを見ずにCakePHPで生成されたコードとjQueryで複製されたコードの違いを確認しました。

CakePHPの生成されたフォーム：CHROで

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

：

<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は、フォームを生成して完璧に動作します私は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のは、私がjQueryで行を複製する場合にのみ焼きCakePHP入力テキストが送られますが、HTMLは思われる行

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

を重複OKとします

_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には影響しません。最初の行のみが保存されます。どこが間違っていますか？

Answer 1

私は状況を再改造するためのテストスクリプトを書いたが、私の場合はうまくいきます。ここにテストコードがあり、あなたのコードで何が間違っているのかを知ることができます。

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