drj58429 2015-09-17 17:45
浏览 242

在JQuery中从动态表单创建多维数组

I'm trying to capture values from inputs and put them in JQuery object instead of having to deal with PHP indexing.

This is the form

<form name="second_form" id="second_form" action="#" method="POST">         
    <a href="#" id="AddChampion" onclick="return false;">Add Champion</a>
        <div id="ChampionInput">
        </div>
        <br><br>
        <input id="obj" type="hidden" name="obj">
        <input type="submit" name="submit">
    </form>

My script that I'm trying to use to recreate the array:

$("#second_form").submit(function(event) {   
    var object = [];        
    $('.Champion').each(function() {
        var champion = {
            'name': $(this).find(".ChampionInput").val(),
            'change': $(this).find("input:radio:checked").val(),
            'General_Description': [],
            'General_Change':[]
        };
        $(this).find('.GeneralChange').each(function() {            champion.General_Description.push($(this).children(".GeneralChangeDescription").val());
            champion.General_Change.push($(this).children(".General_Change").val());
        });         
        object.push(champion);
    });
    object = JSON.stringify(object);
    $('#obj').val(object); //Sending object to hidden input   
});

And here is the way I used to create this PHP array which messes up indexing when I delete some inputs when creating the form

 foreach($_POST['champion'] as $champion){
                if(isset($_POST['Release'][$ChampionNumber])){
                    $_POST['Release'][$ChampionNumber]=='New' ? $champions[$champion]['New']=1 : $champions[$champion]['New']=0;

                    $_POST['Release'][$ChampionNumber]=='Rework' ? $champions[$champion]['Rework']=1 : $champions[$champion]['Rework']=0;

                }
                if(!empty($_POST['GeneralChangeDescription'][$ChampionNumber])){
                    foreach($_POST['GeneralChangeDescription'][$ChampionNumber] as $indexGeneral=>$GeneralChangeDescription){
                    $GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1] =ucfirst(trim($GeneralChangeDescription));
                    if(substr($GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1], -1)!='.'){
                        $GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1] = $GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1].'.';
                    }
                    $GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1] = preg_replace('/\s\/\s/','/',$GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1]);
                    $GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1] = preg_replace( '/(\.?\d\/?%?)+/', '<strong>$0</strong>', $GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1]);
                    $GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1] = preg_replace( '/\b\w+\.(jpg|png|gif)/', '', $GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1]);                   
                    $champions[$champion]['General']['Change'][] =  $GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1];
                    $champions[$champion]['General']['Type'][] = $_POST['GeneralChange'][$ChampionNumber][$indexGeneral];

                    }
                }

                $ChampionNumber++;              
            }

Removing champions

$('div#ChampionInput').on('click', 'a.Remove',function(){
    var champion = $(this).closest('.Champion');
    var id = champion.data("id");
    var nextChampion = champion;

    while((nextChampion = nextChampion.next()).length != 0){

        nextChampion.attr("data-id",id++);
        nextChampion.children('.ChampionInput').attr('placeholder','Champion '+ id);

    }
    championNumber=id+1;
    championNumberArray=id;
    champion.remove();
});

Removing changes

$('div#ChampionInput').on('click', 'a.RemoveGeneralChange',function(){
        $(this).closest('.GeneralChange').remove();
    });

Here is how my array looks like in PHP: http://i.imgur.com/rURnNTG.png and I want to get array looking like that after sending JQuery object through hidden input in form and obtaining it in PHP. Here is how my JQuery object looks like right now http://imgur.com/2r9iyKN which is not even close.

Here is also JSfiddle of form creation: jsfiddle.net/g50zd384/

  • 写回答

1条回答 默认 最新

  • dongxun1142 2015-09-17 18:55
    关注

    If you really need that array, so create it in PHP after sending the form:

    $array;
    for($i = 1; $i <= count($_POST['champion']); $i++) {
        $champion = $_POST['champion'][$i];
        $array[$champion]['General'] = $_POST['GeneralChangeDescription'][$i];
        $array[$champion]['Type'] = $_POST['GeneralChange'][$i];
        $array[$champion]['Release'] = $_POST['Release'][$i];
    }
    

    Your form should be created with this names:

    championNumber = 1;
        championNumberArray = 0;
        $('a#AddChampion').on('click',function(){
            $('div#ChampionInput').append(
            '<div class="Champion">\
                 <br>\
                 <input type="text" class="ChampionInput" name="champion['+championNumber+']" placeholder="Champion '+championNumber+'">\
                 <datalist id="champions"></datalist>\
                 <input type="radio" name="Release['+championNumber+']" value="New">New\
                 <input type="radio" name="Release['+championNumber+']" value="Rework">Rework\
                 <input type="radio" name="Release['+championNumber+']" value="None" checked>None\
                 <a href="#" class="AddGeneralChange" data-id="'+championNumber+'" onclick="return false;">Add General Change</a>\
                 <div class="GeneralChanges">\
                 </div>\
                 <br>\
             <div>');
            championNumber++;
        });
        $('div#ChampionInput').on('click','a.AddGeneralChange', function(){
            var id = $(this).data('id');
            $(this).siblings('.GeneralChanges').append(
               '<div class="GeneralChange">\
                    <textarea type="text" size="20" rows="3" cols="50" maxlength="500" class="GeneralChangeDescription" name="GeneralChangeDescription['+id+'][]" placeholder="Enter General Change Description"></textarea>\
                    <select class="General_Change" name="GeneralChange['+id+'][]">\
                       <option value="buff">Buff</option>\
                       <option value="nerf">Nerf</option>\
                       <option value="new">New</option>\
                       <option value="change">Change</option>\
                       <option value="bugfix">Bugfix</option>\
                    </select>\
                </div>');
        });
    

    It is important, that you name your inputs in this way! ..not the best way, but better than sending json data in a hidden input form. I hope this could help you.

    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题