从嵌套的$_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呈现字段。

         $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计数变量，但很快意识到jquery添加和删除字段不再起作用，因为迭代不在jquery代码中。

是否有php脚本(上面)的最后一部分的jquery变体，我可以用它来重新创建jquery表单字段，填充$_POST数据从我的嵌套数组，或者这将需要重写脚本使用ajax和/或JSON在表单处理?

谢谢你的真知灼见

Answer 1

答案是肯定的，如果JavaScript要返回用$_POST数据填充的动态生成的字段并继续操作它们(添加和删除字段)，则必须处理表单验证。因此，要将表单数据发送到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>