使用JavaScript重複模型的輸入文本不起作用

Question

我正在爲CakePHPview添加多個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)); 

隨着CHRO我調試器我將所有與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> 

如果我複製只烤CakePHP輸入文本發送與jQuery行，但是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沒有影響，只有第一行被保存，我錯了？

Answer 1

我寫了一個測試腳本來repoduce的情況，但在我的情況下，它的工作原理。這裏是測試代碼，你可能會得到一些想法，你在代碼中做錯了什麼。

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