因此,我的表单的一部分包含3" set"的领域。
请参阅我正在尝试的屏幕截图:
以下是在此过程中生成的HTML,并且JS遵循
<div class="row small-pad">
<div class="col-sm-4">
<h5 class="center-text">Make(s)</h5>
<small>Click the <i class="fa fa-plus-square-o fa-fw"></i> to add a new field. Click <i class="fa fa-chevron-right fa-fw"></i> to add models for this make. Click <i class="fa fa-minus-square-o fa-fw"></i> to remove the model/make.</small>
<div id="vMake">
<div class="input-group">
<input type="text" placeholder="Vehicle Make for This Part" id="PartVehMake" name="PartVehMake[]" class="form-control">
<span style="cursor:pointer;" onclick="$(this).parent().remove();$('#vModel' + $(this).parent().find('input').val()).remove();" class="input-group-addon"><i class="fa fa-fw fa-minus-square-o"></i></span>
<span onclick="addChildGroup('#PartVehMake', 1, '#vModel');" 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 Make for This Part" id="PartVehMake0" name="PartVehMake[]" class="form-control"><span style="cursor:pointer;" onclick="addFormField(1, this);" class="input-group-addon"><i class="fa fa-plus-square-o fa-fw"></i></span><span onclick="addChildGroup('#PartVehMake0', 1, '#vModel');" style="cursor:pointer;" class="input-group-addon"><i class="fa fa-chevron-right fa-fw"></i></span></div></div>
</div>
<div class="col-sm-4">
<h5 class="center-text">Model(s)</h5>
<small>Click the <i class="fa fa-plus-square-o fa-fw"></i> to add a new field. Click <i class="fa fa-chevron-right fa-fw"></i> to add years for this model. Click <i class="fa fa-minus-square-o fa-fw"></i> to remove the make/year.</small>
<div id="vModel"><div id="vModelHonda"><h5 style="margin-top:10px;">Honda<span onclick="$('#vModelHonda').remove();" style="cursor:pointer;" class="fa fa-minus pull-right"></span></h5><div class="input-group"><input type="text" placeholder="Vehicle Model for This Make" id="PartVehModel0" name="PartVehModel['Honda']" 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="PartVehModel0" name="PartVehModel['Honda']" class="form-control"><span style="cursor:pointer;" onclick="addFormField(2, this, 'Honda');" class="input-group-addon"><i class="fa fa-plus-square-o fa-fw"></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><div id="vModelToyota"><h5 style="margin-top:10px;">Toyota<span onclick="$('#vModelToyota').remove();" style="cursor:pointer;" class="fa fa-minus pull-right"></span></h5><div class="input-group"><input type="text" placeholder="Vehicle Model for This Make" id="PartVehModel0" name="PartVehModel['Toyota']" 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="PartVehModel0" name="PartVehModel['Toyota']" class="form-control"><span style="cursor:pointer;" onclick="addFormField(2, this, 'Toyota');" class="input-group-addon"><i class="fa fa-plus-square-o fa-fw"></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></div>
</div>
<div class="col-sm-4">
<h5 class="center-text">Year(s)</h5>
<small>Click the <i class="fa fa-plus-square-o fa-fw"></i> to add a new field. Click <i class="fa fa-minus-square-o fa-fw"></i> to remove the year.</small>
<div id="vYear"><div id="vYearCorolla"><h5 style="margin-top:10px;">Corolla<span onclick="$('#vYearCorolla').remove();" style="cursor:pointer;" class="fa fa-minus pull-right"></span></h5><div class="input-group"><input type="text" placeholder="Vehicle Year for This Model" id="PartVehYear0" name="PartVehYear['Corolla']" class="form-control"><span style="cursor:pointer;" onclick="$(this).parent().remove();" class="input-group-addon"><i class="fa fa-fw fa-minus-square-o"></i></span></div><div class="input-group"><input type="text" placeholder="Vehicle Year for This Model" id="PartVehYear0" name="PartVehYear['Corolla']" class="form-control"><span style="cursor:pointer;" onclick="$(this).parent().remove();" class="input-group-addon"><i class="fa fa-fw fa-minus-square-o"></i></span></div><div class="input-group"><input type="text" placeholder="Vehicle Year for This Model" id="PartVehYear0" name="PartVehYear['Corolla']" class="form-control"><span style="cursor:pointer;" onclick="addFormField(3, this, 'Corolla');" class="input-group-addon"><i class="fa fa-plus-square-o fa-fw"></i></span></div></div><div id="vYearHighlander"><h5 style="margin-top:10px;">Highlander<span onclick="$('#vYearHighlander').remove();" style="cursor:pointer;" class="fa fa-minus pull-right"></span></h5><div class="input-group"><input type="text" placeholder="Vehicle Year for This Model" id="PartVehYear0" name="PartVehYear['Highlander']" class="form-control"><span style="cursor:pointer;" onclick="$(this).parent().remove();" class="input-group-addon"><i class="fa fa-fw fa-minus-square-o"></i></span></div><div class="input-group"><input type="text" placeholder="Vehicle Year for This Model" id="PartVehYear0" name="PartVehYear['Highlander']" class="form-control"><span style="cursor:pointer;" onclick="$(this).parent().remove();" class="input-group-addon"><i class="fa fa-fw fa-minus-square-o"></i></span></div><div class="input-group"><input type="text" placeholder="Vehicle Year for This Model" id="PartVehYear0" name="PartVehYear['Highlander']" class="form-control"><span style="cursor:pointer;" onclick="addFormField(3, this, 'Highlander');" class="input-group-addon"><i class="fa fa-plus-square-o fa-fw"></i></span></div></div><div id="vYearPilot"><h5 style="margin-top:10px;">Pilot<span onclick="$('#vYearPilot').remove();" style="cursor:pointer;" class="fa fa-minus pull-right"></span></h5><div class="input-group"><input type="text" placeholder="Vehicle Year for This Model" id="PartVehYear0" name="PartVehYear['Pilot']" class="form-control"><span style="cursor:pointer;" onclick="$(this).parent().remove();" class="input-group-addon"><i class="fa fa-fw fa-minus-square-o"></i></span></div><div class="input-group"><input type="text" placeholder="Vehicle Year for This Model" id="PartVehYear0" name="PartVehYear['Pilot']" class="form-control"><span style="cursor:pointer;" onclick="addFormField(3, this, 'Pilot');" class="input-group-addon"><i class="fa fa-plus-square-o fa-fw"></i></span></div></div><div id="vYearCivic"><h5 style="margin-top:10px;">Civic<span onclick="$('#vYearCivic').remove();" style="cursor:pointer;" class="fa fa-minus pull-right"></span></h5><div class="input-group"><input type="text" placeholder="Vehicle Year for This Model" id="PartVehYear0" name="PartVehYear['Civic']" class="form-control"><span style="cursor:pointer;" onclick="$(this).parent().remove();" class="input-group-addon"><i class="fa fa-fw fa-minus-square-o"></i></span></div><div class="input-group"><input type="text" placeholder="Vehicle Year for This Model" id="PartVehYear0" name="PartVehYear['Civic']" class="form-control"><span style="cursor:pointer;" onclick="addFormField(3, this, 'Civic');" class="input-group-addon"><i class="fa fa-plus-square-o fa-fw"></i></span></div></div></div>
</div>
</div>
function addFormField(which, initialEle, val){
var $ct = 0;
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;
case 4: //options
$iEle.attr('onclick', '$(this).parent().parent().remove();');
$nField = '<div id="pOpt'+$ct+'"><div class="col-sm-3"><label class="col-sm-12 control-label" for="PartOptionName">Name: </label><div class="col-sm-12"><input type="text" class="form-control" id="PartOptionName" name="PartOptionName[]" placeholder="New Part Option Name" /></div></div><div class="col-sm-3"><label class="col-sm-12 control-label" for="PartOptionDescription">Description: </label><div class="col-sm-12"><input type="text" class="form-control" id="PartOptionDescription" name="PartOptionDescription[]" placeholder="New Part Option Description" /></div></div><div class="col-sm-3 col-sm-12"><label class="col-sm-12 control-label" for="PartOptionPrice">Price: </label><div class="input-group"><span class="input-group-addon"><i class="fa fa-dollar fa-fw"></i></span><input type="text" class="form-control" id="PartOptionPrice" name="PartOptionPrice[]" placeholder="New Part Option Price" /></div></div><div class="col-sm-3"><label class="col-sm-12 control-label" for=""> </label><button type="button" class="btn btn-success" onclick="addFormField(4, this);"><i class="fa fa-plus-square-o"></i></button></div></div>';
$iEle.parent().parent().parent().append($nField);
$ct++;
break;
case 5: //images
$iEle.attr('onclick', '$(this).parent().parent().parent().remove();');
$nField = '<div id="pImg'+$ct+'"><div class="row small-pad"><div class="col-sm-12"><label class="col-sm-2 control-label" for="PartImageName">Name: </label><div class="col-sm-10"><input type="text" class="form-control" id="PartImageName" name="PartImageName[]" placeholder="New Part Image Name" /></div></div></div><div class="row small-pad"><div class="col-sm-12"><label class="col-sm-2 control-label" for="PartImageAlt">Alt Attribute: </label><div class="col-sm-10"><input type="text" class="form-control" id="PartImageAlt" name="PartImageAlt[]" placeholder="New Part Image Alt Attribute" /></div></div></div><div class="row small-pad"><div class="col-sm-6"><label class="col-sm-2 control-label" for="PartImage">Image: </label><div class="col-sm-10"><input type="file" id="PartImage" name="PartImage[]" /></div></div><div class="col-sm-6"><label class="col-sm-3 control-label" for="PartImageMain">Is Main Image: </label><div class="col-sm-9"><input type="checkbox" id="PartImageMain" name="PartImageMain[]" value="1" /> Yes </div></div></div><div class="row small-pad"><div class="col-sm-12"><button type="button" class="btn btn-success pull-right" onclick="addFormField(5, this);"><i class="fa fa-plus-square-o"></i></button></div></div></div>';
$iEle.parent().parent().parent().parent().append($nField);
$ct++;
break;
case 6:
$iEle.attr('onclick', '$(this).parent().parent().parent().remove();');
$nField = '<div id="pVid'+$ct+'"><div class="row small-pad"><div class="col-sm-12"><label class="col-sm-2 control-label" for="PartVideoName">Name: </label><div class="col-sm-10"><input type="text" class="form-control" id="PartVideoName" name="PartVideoName[]" placeholder="New Part Video Name" /></div></div></div><div class="row small-pad"><div class="col-sm-12"><label class="col-sm-2 control-label" for="PartVideoEmbed">Embed Code: </label><div class="col-sm-10"><input type="text" class="form-control" id="PartVideoEmbed" name="PartVideoEmbed[]" placeholder="New Part Video Embed Code" /></div></div></div><div class="row small-pad"><div class="col-sm-12"><label class="col-sm-2 control-label" for="PartVideoActive">Is Active: </label><div class="col-sm-10"><input type="checkbox" id="PartVideoActive" name="PartVideoActive[]" value="1" /> Yes </div></div></div><div class="row small-pad"><div class="col-sm-12"><button type="button" class="btn btn-success pull-right" onclick="addFormField(6, this);"><i class="fa fa-plus-square-o"></i></button></div></div></div>';
$iEle.parent().parent().parent().parent().append($nField);
$ct++;
break;
}
}
function addChildGroup(val, which, where){
var $ct = 0;
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'+$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>';
$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>');
$ct++;
break;
case 2: //year
$whrID = where.replace('#', '') + $val;
$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>';
$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>');
$ct++;
break;
}
}
}
虽然所有这一部分都很有效,但当我尝试使用以下代码将数据添加到数据库时,品牌和模型变得棘手,反过来又使这些年变得棘手。
我怎样才能让它做它应该做的事情?对于每个Make,插入Makes Model,为每个Makes Model插入年份?
// Needs PartID from main part insert
$PartVehMake = $this->input->post('PartVehMake');
$PartVehModel = $this->input->post('PartVehModel');
$PartVehYear = $this->input->post('PartVehYear');
for($i = 0; $i < count($PartVehMake); ++$i){
$make = $PartVehMake[$i];
$this->db->insert('TblPartVehicleMake', array('partID'=>$PartID, 'pvMake'=>$make));
$makeID = $this->db->insert_id();
sleep(.2);
foreach($PartVehModel as $mkey => $val1){
$model = $PartVehModel[$mkey];
$this->db->insert('TblPartVehicleModel', array('pvMakeID'=>$makeID, 'pvModel'=>$model));
$modelID = $this->db->insert_id();
foreach($PartVehYear as $ykey => $val2){
$year = $PartVehYear[$ykey];
$this->db->insert('TblPartVehicleModelYear', array('pvModelID'=>$modelID, 'pvYear'=>$year));
sleep(.2);
}
sleep(.2);
}
}
答案 0 :(得分:0)
从POST数组的索引中删除引号并添加花括号。
将name="PartVehModel['Honda']"
更改为name="{PartVehModel[Honda]}"
答案 1 :(得分:-1)
您的车辆制造商有非数字键,但您在第一次预告中使用数字键表示这些键。
如果这个答案没有让你开始,我会在稍后尝试编辑答案。
答案 2 :(得分:-1)
尝试从POST阵列的索引中删除引号。
即。 name="PartVehModel['Honda']"
变为name="PartVehModel[Honda]"
。