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代码中。

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

感谢您的见解。

Answer 1

答案是肯定的，如果要返回动态生成的填充了$ _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>

从嵌套数组$ _POST填充jquery表单

1 个答案: