CODEWITHSUNDEEP
javascriptphpforms
Kevin
Kevin

Reputation: 2688

Form Field Grouping Array

I am trying to get a Make/Model/Year form running properly... and while I've got the UI part of it working good... on retriving the results I am stumped

The fields are generated like this:

<div class="input-group">
    <input type="text" placeholder="Vehicle Model for This Make" id="PartVehModel0" name="PartVehModel[Chevy]" class="form-control">
    <span style="cursor:pointer;" onclick="$(this).parent().remove();$('#vYear' + $(this).parent().find('input').val()).remove();" class="input-group-addon"><i class="fa fa-fw fa-minus-square-o"></i></span>
    <span onclick="addChildGroup($(this).parent().find('input'), 2, '#vYear');" style="cursor:pointer;" class="input-group-addon"><i class="fa fa-chevron-right fa-fw"></i></span>
</div>
<div class="input-group">
    <input type="text" placeholder="Vehicle Model for This Make" id="PartVehModel1" name="PartVehModel[Chevy]" class="form-control">
    <span style="cursor:pointer;" onclick="$(this).parent().remove();$('#vYear' + $(this).parent().find('input').val()).remove();" class="input-group-addon"><i class="fa fa-fw fa-minus-square-o"></i></span>
    <span onclick="addChildGroup($(this).parent().find('input'), 2, '#vYear');" style="cursor:pointer;" class="input-group-addon"><i class="fa fa-chevron-right fa-fw"></i></span>
</div>

etc...

When I try to do a var_dump of the $_POST['PartVehModel'] I can only ever see the 1st item, and nothing else. For instance: I may put in Chevy, Honda as Makes... CRV/Civic, and Corvette/Malibu as respective models, and then a ton of years for each model, but all I ever get back is:

array(2) {
    [0]=>
    string(5) "Chevy"
    [1]=>
    string(5) "Honda"
}

array(2) {
    ["Honda"]=>
    string(5) "Civic"
    ["Chevy"]=>
    string(6) "Malibu"
}

array(4) {
    ["Civic"]=>
    string(4) "2003"
    ["CRV"]=>
    string(4) "2001"
    ["Malibu"]=>
    string(4) "1990"
    ["Corvette"]=>
    string(4) "1968"
}

From the following form: enter image description here

my javascript producing this is:

var $ct = 0;
function addFormField(which, initialEle, val){
var $nField;
$iEle = $(initialEle);
$iEle.find('i').removeClass('fa-plus-square-o');
$iEle.find('i').addClass('fa-minus-square-o');
switch(which){
    case 1: // make
        $iEle.attr('onclick', '$(this).parent().remove();$(\'#vModel\' + $(this).parent().find(\'input\').val()).remove();');
        $nField = '<div class="input-group"><input type="text" class="form-control" name="PartVehMake[]" id="PartVehMake'+$ct+'" placeholder="Vehicle Make for This Part" /><span class="input-group-addon" onclick="addFormField(1, this);" style="cursor:pointer;"><i class="fa fa-plus-square-o fa-fw"></i></span><span class="input-group-addon" style="cursor:pointer;" onclick="addChildGroup(\'#PartVehMake'+$ct+'\', 1, \'#vModel\');"><i class="fa fa-chevron-right fa-fw"></i></span></div>';                     
        $('#vMake').append($nField);
        $ct++;
        break;  
    case 2: // model
        $iEle.attr('onclick', '$(this).parent().remove();$(\'#vYear\' + $(this).parent().find(\'input\').val()).remove();');
        $nField = '<div class="input-group"><input type="text" class="form-control" name="PartVehModel['+val+']" id="PartVehModel'+$ct+'" placeholder="Vehicle Model for This Make" /><span class="input-group-addon" onclick="addFormField(2, this, \'' + val + '\');" style="cursor:pointer;"><i class="fa fa-plus-square-o fa-fw"></i></span><span class="input-group-addon" style="cursor:pointer;" onclick="addChildGroup($(this).parent().find(\'input\'), 2, \'#vYear\');"><i class="fa fa-chevron-right fa-fw"></i></span></div>';                     
        $('#' + $iEle.parent().parent().attr('id')).append($nField);
        $ct++;
        break;  
    case 3: // year
        $iEle.attr('onclick', '$(this).parent().remove();');
        $nField = '<div class="input-group"><input type="text" class="form-control" name="PartVehYear['+val+']" id="PartVehYear'+$ct+'" placeholder="Vehicle Year for This Model" /><span class="input-group-addon" onclick="addFormField(3, this, \'' + val + '\');" style="cursor:pointer;"><i class="fa fa-plus-square-o fa-fw"></i></span></div>';                     
        $('#' + $iEle.parent().parent().attr('id')).append($nField);
        $ct++;
        break;
}
}
var $ct1 = 0;
function addChildGroup(val, which, where){
var $val = $(val).val();
var $whr = $(where);
var $nField;
if($val.length > 0){
    switch(which){
        case 1: //model
            $whrID = where.replace('#', '') + $val;
            $nField = '<div class="input-group"><input type="text" class="form-control" name="PartVehModel[' + $val + ']" id="PartVehModel'+$ct1+'" placeholder="Vehicle Model for This Make" /><span class="input-group-addon" onclick="addFormField(2, this, \'' + $val + '\');" style="cursor:pointer;"><i class="fa fa-plus-square-o fa-fw"></i></span><span class="input-group-addon" style="cursor:pointer;" onclick="addChildGroup($(this).parent().find(\'input\'), 2, \'#vYear\');"><i class="fa fa-chevron-right fa-fw"></i></span></div>';                     
            $whr.append('<div id="' + $whrID + '"><h5 style="margin-top:10px;">' + $val + '<span class="fa fa-minus pull-right" style="cursor:pointer;" onclick="$(\'#' + $whrID + '\').remove();"></span></h5>' + $nField + '</div>');
            $ct1++;
            break;
        case 2: //year
            $whrID = where.replace('#', '') + $val;
            $nField = '<div class="input-group"><input type="text" class="form-control" name="PartVehYear[' + $val + ']" id="PartVehYear'+$ct1+'" placeholder="Vehicle Year for This Model" /><span class="input-group-addon" onclick="addFormField(3, this, \'' + $val + '\');" style="cursor:pointer;"><i class="fa fa-plus-square-o fa-fw"></i></span></div>';                     
            $whr.append('<div id="' + $whrID + '"><h5 style="margin-top:10px;">' + $val + '<span class="fa fa-minus pull-right" style="cursor:pointer;" onclick="$(\'#' + $whrID + '\').remove();"></span></h5>' + $nField + '</div>');
            $ct1++;
            break;  
    }
}
}

So, how can I get this "grouping" thing to work?

Upvotes: 0

Views: 79

Answers (1)

Steve
Steve

Reputation: 20469

You need to use array syntax in your form:

name="PartVehModel[Chevy][]"

Upvotes: 1

Related Questions