從$ _POST的嵌套數組填充jquery表單

Question

PHP表單使用jquery腳本添加基於http://jsfiddle.net/L3s3w/4/的字段和子字段。

$(function(){
    var nbIteration = 1;
    var detailIteration = 1;
    $("#addIteration").click(function(){
        nbIteration++;
        $("#content-contact").append('<div class="iteration"><h3>Track '+ nbIteration +'<span class="controlButtons"><input type="button" value="+" class="plus" /><input type="button" value="-" class="moins" /></span></h3><input type="text" name="Track'+ nbIteration +'" value="Track Title" /></div>');
    });
    $("#removeIteration").click(function(){
        if($(".iteration").length > 0){
            nbIteration--;
            $(".iteration").last().remove();
        }
    });
    $("#content-contact").on("click", ".plus",function(){
        var parent = $(this).closest(".iteration");
        parent.append('<input type="text" value="Track Details" name="Track_'+ nbIteration + '_' + detailIteration +'"/>');
        detailIteration++;
        var nbinput = parent.find("input[type='text']").length;
        if(nbinput == 5)
            parent.find(".plus").prop("disabled",true);
        if(nbinput > 0)
            parent.find(".moins").prop("disabled",false);
    });
    $("#content-contact").on("click",".moins", function(){ 
        var parent = $(this).closest(".iteration");
        parent.children("input").last().remove();
        var nbinput = parent.find("input[type='text']").length;
        if(nbinput < 5)
            parent.find(".plus").prop("disabled",false);
        if(nbinput == 0)
            parent.find(".moins").prop("disabled",true);
    });
});

我使用php來驗證表單，並通過基於$ _POST數據生成的嵌套數組簡單地重新創建初始的jquery-rendered字段來重新填充字段。

         $num_tracks = 0;
         $num_deets = 0;
        foreach ($_POST as $detail => $specific)
        {//If it's not one of the fields above
            if (!in_array($detail, $basic_info))

                //If no underscore goes in outer array
                if (!strpos($detail, "_"))
                    {
                    if ($num_deets != 0) $num_tracks++;
                    //assign new top level key for track
                    $tracks[$num_tracks][$detail] = $specific;
                    }
            else
                {
                $tracks[$num_tracks][$detail] = $specific;
                $num_deets++;
                }

然后在php中重新創建字段：

        <?php //if we have tracks
        if (isset($tracks)){
            $track_no = 0;
            $detail_no = 0;
            foreach ($tracks as $track => $track_detail)
            {
            $track_no++;
            ?>
             <h3>Track <?php echo "$track_no"; ?> <span class="controlButtons"><input type="button" value="+" class="plus" /><input type="button" value="-" class="moins" /></span></h3>
             <?php foreach ($track_detail as $detail => $specific)
             {
             $detail_no++;
             ?>
             <input type="text" value="<?php echo $specific; ?>" name="<?php echo $detail; ?>"/>
             <?php } ?>
            <?php
            }
        }else{

我嘗試在jquery中使用php count變量，但很快意識到，由於迭代不在jquery代碼內，因此添加和刪除字段的jquery不再起作用。

我是否可以使用php腳本最后一部分的jquery變體（上面）來重新創建jquery表單字段，並使用嵌套數組中的$ _POST數據填充該字段，或者是否需要重寫腳本以使用ajax和/或JSON在表單處理中？

感謝您的見解。

Answer 1

答案是肯定的，如果JavaScript要返回由$ _POST數據填充的動態生成的字段並繼續操作它們（添加和刪除字段），則JavaScript必須處理表單驗證。 因此，將表單數據發送到php將需要第二個php文件和ajax來將信息加載到頁面上。

最終僅使用http://formvalidator.net/進行驗證，然后再提交到服務器，然后返回提交的值僅用於查看（不更新）。

這是用於解析表單中數據的代碼，將頂級迭代字段與輔助字段（或其他字段）分開，以發送至電子郵件或瀏覽器：

//Define what is not to be considered as a track detail
 $basic_info = array('Name','Email','Notes','Project_Name','Artist_Name');

 $num_tracks = 0;
foreach ($_POST as $detail => $specific)
{//If it's not one of the fields above
    if (!in_array($detail, $basic_info))
        //If no underscore it's a TRACK so goes in outer array
        if (!strpos($detail, "_"))
            {
            $num_deets = 0; // reset number of details
            $num_tracks++; // we have a new track
            //assign new top level key for track
            $tracks[$num_tracks][$detail] = $specific;
            $num_deets++; //we have one detail
            }
    else
            {
            //assign to secondary array of details
            $tracks[$num_tracks][$detail] = $specific;
            $num_deets++;//we have a new detail
            $detail = "\tDetail";
            }
            //add to the message with underscore removed
        $message .= "\n" . str_replace("_", " ", $detail).": ". $specific."\n";
    } 

這是JavaScript：

<script type="text/javascript">
$(function(){
    var nbIteration = 1;
    var detailIteration = 1;
    $("#addIteration").click(function(){
        nbIteration++;
    var detailIteration = 1;
        $("#content-contact").append('<div class="iteration"><h3>Track '+ nbIteration +'<span class="controlButtons"><input type="button" value="+" class="plus" /><input type="button" value="-" class="moins" /></span></h3><input type="text" name="Track'+ nbIteration +'" value="Track Title" /></div>');
    });
    $("#removeIteration").click(function(){
        if($(".iteration").length > 0){
            nbIteration--;
            $(".iteration").last().remove();
        }
    });
    $("#content-contact").on("click", ".plus",function(){
        var parent = $(this).closest(".iteration");
        parent.append('<input type="text" value="Track Details" name="Track_'+ nbIteration + '_' + detailIteration +'"/>');
        detailIteration++;
        var nbinput = parent.find("input[type='text']").length;
        if(nbinput == 5)
            parent.find(".plus").prop("disabled",true);
        if(nbinput > 0)
            parent.find(".moins").prop("disabled",false);
    });
    $("#content-contact").on("click",".moins", function(){ 
        var parent = $(this).closest(".iteration");
        parent.children("input").last().remove();
        var nbinput = parent.find("input[type='text']").length;
        if(nbinput < 5)
            parent.find(".plus").prop("disabled",false);
        if(nbinput == 0)
            parent.find(".moins").prop("disabled",true);
    });
});
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>


<script> $.validate({
  form : '#registration'
}); </script>