Based on count, show the relevant fields in a form

[kantigniter]

Hi all, I'm new to codeigniter, and i want to know how to approach or a small example as to how to get the following:

1) If I have a form, and it has fields say asking for number of some category for example:
first in a drop down we have this , choose type of purchase to make=> in the drop down we have categories as electronic goods, clothing, etc etc. And if the person chooses say, Electronic goods, we get the following as below.
Number of laptops= , Number of palmtops= , number of smartphones= etc etc
Should the person choose clothing, he should get like Number of shirts= , number of pants= , etc
and so on based on what he chooses(these I give in the form).

2) After we click next, trigger it to a customise form inside. As in, we should get the entered say if the person chose electronic goods, he would get the categories as:
laptops(with its subcategories), palmtops(with its subcategories), smartphones(with its categories) etc etc

3) So far, I have managed to store the individual values and their selected subcategories which I want to customise. So, If I enter say number of laptops as 3, and number of palmtops as 2, number of smartphones as 3, I get only one single customisation value in the next form for each category.

Like I'll give an example:
*Choose number of category-> electronic goods
Number of laptops='3' Number of palmtops='3' Number of Smartphones='2'. When I click next, I get something like

*Laptops->subcategories->subsubcategories
Palmtops->subcategories->subsubcategories
Smartphones->subcategories->subsubcategories**

Each category has its own unique subcategory, and subsubcategory.

How I want it is;
*Choose number of category-> electronic goods
Number of laptops='3' Number of palmtops='3' Number of Smartphones='2'.
I should get like
*1 Laptops->subcategories->subsubcategories
2 Laptops->subcategories->subsubcategories
3 Laptops->subcategories->subsubcategories

I want how many I enter as in number of in the first form to repopulate the same number of times in the next form. Please suggest me a method, or a way, or I'd be grateful if someone could give me a small example.
1 Palmtops->subcategories->subsubcategories
2 Palmtops->subcategories->subsubcategories
3 Palmtops->subcategories->subsubcategories

1 Smartphones->subcategories->subsubcategories**
2 Smartphones->subcategories->subsubcategories

[LastMitch]

Hi all, I'm new to codeigniter, and i want to know how to approach or a small example as to how to get the following:

Provided a little code. Post whatever form you done in codeigniter and it would be easier to understand.

[kantigniter]

@LastMitch The below is the gisthub link where I have posted the code bits, it's for a project actually. Please have a look at it.
Click Here

[diafol]

@ki

It would be much easier for contributors if you posted just the requested relevant code here instead of including a link to an off-site code-bin listing 700-odd lines of code. This just makes it doubly inconvenient.

[kantigniter]

@diafol The problem is I feel that they are all relevant enough. As I don't want to look like someone who is posting without trying something on my own. I shall try however, as I couldn't split between the model, controller, view files, as to what I should post.

My view files are as follows:

visualize_start.php

    <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery.validate.js"></script>
    <style type="text/css">
    * { font-family: Verdana; }
    label { width: 10em; float: left; }
    label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
    p { clear: both; }
    .submit { margin-left: 12em; }
    em { font-weight: bold; padding-right: 1em; vertical-align: top; }
    </style>
    <SCRIPT language=Javascript>
    <!--
    function isNumberKey(evt)
    {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode = 46 && charCode > 31
    && (charCode < 48 || charCode > 57))
    return false;
    return true;
    }
    //-->
    </SCRIPT>
    <SCRIPT language=Javascript>
    function image()
    {
    var fileInput = document.getElementById("myfileinput").files[0];
    if (fileInput.type.match('image/jpeg') || fileInput.type.match('image/png'))
    //I not thinking to use if(xx || xx)
    //prefer using var mimeType = jpg,png many tries but not work
    {
    alert("Right");
    }else{
    alert("wrong");
    }
    }
    </SCRIPT>
    <script>
    $(document).ready(function(){
    $("#formID").validate({
    rules: {
    pass: "required",
    cpass: {
    equalTo:"#pass"
    }
    }
    });
    });
    </script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#category").change(function(){
    var catID = $(this).val();
    $.ajax({
    url:"<?php echo site_url(); ?>admin/getSubCategories/" + catID,
    success:function(result){
    $("#subcategory").html(result);
    }
    });
    });
    });
    </script>
    <!-- Body Wrapper Start -->
    <div class="bodyWrapper">
    <!-- Inner Page Heading Wrapper Start -->
    <div class="innerPageHeadingWrapper clearfix">
    <div class="visualizeIcpon"></div>
    <div class="contactLabel">Visualize</div>
    </div><!-- Inner Page Heading Wrapper End -->
    <!-- Contact Wrapper start -->
    <div class="contactWrapper">
    <!-- Visualize Left Menu Wrapper Start -->
    <!-- Visualize Left Menu Wrapper End -->
    <form id="formID" class="formular" method="post" action="" enctype="multipart/form-data">
    <!-- Visualize Right Menu Wrapper Start -->
    <div class="visualizeRightWrapper rounded">
    <!-- Start Content Start -->
    <div class="visualizeContent" style="display:block;" id="start">
    <ul>
    <li class="heading">Client Details</li>
    <li class="clearfix">
    <div class="leftLabelName">Name</div>
    <div class="middleDivider">:</div>
    <div class="RightContent"><input type="text" name="clientName" class="required"/></div>
    </li>
    <li class="clearfix">
    <div class="leftLabelName">Email ID</div>
    <div class="middleDivider">:</div>
    <div class="RightContent"><input type="text" name="Email" class="email required"/></div>
    </li>
    <li class="clearfix">
    <div class="leftLabelName">Contact Number</div>
    <div class="middleDivider">:</div>
    <div class="RightContent"><input type="text" name="Mobile" class="required" onkeypress="return isNumberKey(event)" minlength=10 maxlength=11 /></div>
    </li>
    <li class="heading">
    Basic Details
    </li>
    <li class="clearfix">
    <div class="leftLabelName">House Type</div>
    <div class="middleDivider">:</div>
    <div class="RightContent">
    <select name="House" id="category" class="required">
    <option value="">Please Select</option>
    <?php foreach($houseType as $co){ ?>
    <option value="<?php echo $co['interior_house_id'];?>"><?php echo $co['interior_house_desc'];?></option> <?php } ?>
    </select>
    </div>
    </li>
    <li class="clearfix">
    <div class="leftLabelName"><strong>Carpet Area</strong></div>
    <div class="middleDivider">:</div>
    <div class="RightContent"><INPUT id="txtChar" onkeypress="return isNumberKey(event)"
    type="text" name="txtChar"/></div>
    </li>
    <?php foreach($roomtype as $co){
    ?>
    <li class="clearfix">
    <div class="leftLabelName"><?php echo "No.of ".$co['interior_room_desc']?></div>
    <div class="middleDivider">:</div>
    <div class="RightContent"><input class="required" type="text" name="roomType[<?php echo $co['interior_room_id']?>]" id="txtChar" onkeypress="return isNumberKey(event)" /></div>
    </li> <?php } ?>
    <!-- <li class="clearfix">
    <div class="leftLabelName">Other Rooms</div>
    <div class="middleDivider">:</div>
    <div class="RightContent"><input type="text" /></div>
    </li> -->
    <li class="clearfix">
    <div class="leftLabelName">Floor Plan <small style="color:#A4A3A3;">(jpg/png/gif Max 2MB)</small></div>
    <div class="middleDivider">:</div>
    <div class="RightContent"><input type="file" name="image" class="image" id="myfileinput" data-type='image' /></div>
    </li>
    <li class="clearfix nextPrev displayNone">
    <div class="leftLabelName">&nbsp;</div>
    <div class="middleDivider">&nbsp;</div>
    <div class="RightContent">
    <input type="submit" class="previous" value="Previous" />
    <input type="submit" class="next" value="Next" />
    </div>
    </li>
    </ul>
    </div><!-- Start Content End -->
    <!-- Submit Button Start -->
    <div class="submitButton">
    <input type="submit" class="next" value="Next" />
    <!--<input type="button" value="Cancel" />-->
    </div><!-- Submit Button End -->
    </div><!-- Visualize Right Menu Wrapper End -->
    </form>
    </div><!-- Contact Wrapper End -->
    </div><!-- Body Wrapper End -->
    </div><!-- Container End -->

visualize.php

    <style type="text/css">
    .mainWrapper li:hover{
    background:grey;
    }
    .slideWrapper{
    display:none;
    }
    .slideshow {
    position:absolute;
    width:80px;
    height:80px;
    margin:-43px 0px 0px 89px;
    }
    .slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    }
    .slideshow IMG.active {
    z-index:10;
    }
    .slideshow IMG.last-active {
    z-index:9;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
    $('.SubCategoryOuter').hide();
    // Toggle Sub Div
    $('.AnswerLabel > .AnswerLabelOuter > .Pluse').click(function(e){
    e.preventDefault();
    if($(this).children("a").html() == "+"){
    $(this).children("a").addClass('Select').html("x");
    $(this).closest('span.AnswerLabelOuter').addClass('Select').next().slideDown();
    } else {
    $(this).children("a").removeClass('Select').html("+");
    $(this).closest('span.AnswerLabelOuter').removeClass('Select').next().slideUp();
    }
    });
    //Check Box Selected
    $('span.AnswerLabelOuter > span.CheckBox input[type=checkbox]').click(function(){
    if ($(this).is(':checked')) {
    //$(this).prop('checked',false);
    //console.log("is checked");
    var checkboxParent = $(this).parent();
    var subParent = checkboxParent.parent();
    subParent.addClass('Select');
    var HtmlChange = subParent.children('span.Pluse');
    HtmlChange.children('a').html("x");
    subParent.next('div.SubCategoryOuter').slideDown();
    } else {
    //$(this).prop('checked',true);
    //console.log("not checked");
    var checkboxParent = $(this).parent();
    var subParent = checkboxParent.parent();
    subParent.removeClass('Select');
    var HtmlChange = subParent.children('span.Pluse');
    HtmlChange.children('a').html("+");
    subParent.children("a").addClass('Select').html("+");
    subParent.next('div.SubCategoryOuter').slideUp();
    }
    });
    $('.nextButton').click(function(){
    var itemIds = [];
    $('.itemIds').each(function(){
    if($(this).is(':checked'))
    itemIds.push($(this).val());
    });
    //console.log(itemIds);
    //if(itemIds.length != 0)
    $.ajax({
    type: 'POST',
    url: '<?php echo site_url(); ?>ajax_saveSelections/' + $(this).attr('rel'),
    async: false,
    cache : false,
    data: {
    'item_ids': itemIds,
    'currentCategoryID': $('#CatID').val()
    },
    success: function(data){
    if(data)
    window.location.replace("<?php echo site_url(); ?>visualize/" + data);
    else
    window.location.replace("<?php echo site_url(); ?>");
    }
    });
    });
    });
    </script>
    <!--<script>
    $(document).ready(function(){
    $(".itemIds").click(function(){
    if($(".itemIds") ) {
    $("#select").attr("checked", "checked");
    } else {
    $("#select").removeAttr("checked");
    }
    });
    });
    </script>
    -->
    <!-- Body Wrapper Start -->
    <div class="bodyWrapper">
    <!-- Inner Page Heading Wrapper Start -->
    <div class="innerPageHeadingWrapper clearfix">
    <div class="visualizeIcpon"></div>
    <div class="contactLabel">Visualize</div>
    </div><!-- Inner Page Heading Wrapper End -->
    <!-- Contact Wrapper start -->
    <div class="contactWrapper">
    <!-- Visualize Left Menu Wrapper Start -->
    <?php include('inc/left_menu.php'); ?>
    <!-- Visualize Left Menu Wrapper End -->
    <!-- Visualize Right Menu Wrapper Start -->
    <div class="visualizeRightWrapper rounded">
    <script type="text/javascript">
    $(function(){
    $('.Answer').hide();
    $('.Question').click(function() {
    $(this).next().slideToggle(500);
    });
    });
    </script>
    <div id="QuestionAnswerOuter">
    <?php if($subCategories) foreach($subCategories as $subCategory){
    $subSubCategories = $this->think_model->visualizeSubCategories($subCategory->Interior_category_id);
    ?>
    <div class="Question"><?php echo $subCategory->Interior_category_desc; ?></div>
    <div class="Answer">
    <ul>
    <?php $li = 0;$result=count($subSubCategories); if($subSubCategories) foreach($subSubCategories as $subSubCategory){
    if($li%3 == 0) echo "<li>";
    ++$li;
    $groupItems = $this->think_model->visualizeGroupItems($subSubCategory->Interior_category_id);
    //echo $li;
    ?>
    <div class="AnswerLabel">
    <span class="AnswerLabelOuter">
    <span class="CheckBox"><input type="Checkbox" id="select" /></span>
    <span class="Label"><?php echo $subSubCategory->Interior_category_desc;
    //$this->db->delete('category', array('Interior_category_id' => $subSubCategory->Interior_category_id));
    ?></span>
    <span class="Pluse"><a href="#" class="Select">+</a></span>
    </span>
    <div class="SubCategoryOuter mainWrapper">
    <ul>
    <?php if($groupItems) foreach($groupItems as $groupItem){ ?>
    <li>
    <span class="CheckBox"><input <?php if(in_array($groupItem->Interior_group_item_id, $selectedItems)) echo "checked='checked'"; ?> value="<?php echo $groupItem->Interior_group_item_id ;?>" class="itemIds" type="checkbox" name="Item"/></span>
    <span class="Label"><?php echo $groupItem->Interior_group_item_desc; ?></span>
    <div class="slideWrapper slideshow" id="imageID_<?php echo $groupItem->Interior_group_item_id; ?>" >
    <img src="<?php echo base_url().'images/category_images/'.$groupItem->Interor_group_item_image; ?>" width="80" height="80" alt="" class="active" title="Image1" />
    <?php /*?><img src="http://lorempixel.com/400/201/" width="80" height="80" alt="" title="Image2" />
    <img src="http://lorempixel.com/401/202/" width="80" height="80" alt="" title="Image3" /><?php */?>
    </div>
    </li>
    <?php } ?>
    </ul>
    </div>
    </div>
    <?php
    if($li%3 == 0||$li%$result==0) echo "</li>";
    //if($result == $li) echo "</li>";
    //elseif(($li%3) == 0) echo "</li><li>";
    } ?>
    </ul>
    </div>
    <?php } ?>
    </div>
    </div><!-- Visualize Right Menu Wrapper End -->
    <!-- Submit Button Start -->
    <div class="submitButton">
    <input rel='next' class="nextButton" type="button" value="<?php echo ($lastCategoryID == $currentCategoryID)?'Submit':'Next'; ?>" />
    <?php if($firstCategoryID != $currentCategoryID){ ?>
    <input rel='prev' class="nextButton" type="button" value="Previous" />
    <?php } ?>
    </div><!-- Submit Button End -->
    </div><!-- Contact Wrapper End -->
    </div><!-- Body Wrapper End -->
    </div><!-- Container End -->
    <script type="text/javascript">
    function slideSwitch(testID) {
    var $active = $('#'+testID + ' IMG.active');
    //console.log(testID)
    if ( $active.length == 0 ) $active = $('#'+testID + 'IMG:last');
    var $next = $active.next().length ? $active.next()
    : $('#'+testID + ' IMG:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
    $active.removeClass('active last-active');
    });
    }
    var clrint=null;
    $(function(){
    $('.mainWrapper li span.Label').hover(
    function(){
    $(this).next('div').show().attr('id');
    var testID = $(this).next('div').show().attr('id');
    $(function() {
    clrint=setInterval( function(){slideSwitch(testID)}, 1000 );
    });
    },
    function(){
    clearInterval(clrint);
    $('.slideWrapper').hide();
    });
    });
    </script>

left_menu.php

    <div class="visualizeLeftMenuWrapper">
    <div class="leftMenu rounded">
    <input type="hidden" id="CatID" name="currentCategoryID" value="<?php echo $currentCategoryID; ?>" />
    <ul>
    <?php if($categories) foreach($categories as $category){ ?>
    <li><a href="<?php echo site_url(); ?>visualize/<?php echo $category->Interior_category_id; ?>" <?php if($category->Interior_category_id == $currentCategoryID) echo "class='active'"; ?> rel="start"><?php echo $category->Interior_category_desc; ?></a></li>
    <?php } ?>
    </ul>
    </div>
    </div>

My controller and model functions are as follows:

    public function visualise()
    {
    if ($this->session->userdata('transClintid'))
    redirect('visualize');
    if ($this->input->post()) {
    // Image Upload Start
    $config['upload_path'] = './images/category_images/';
    $config['allowed_types'] = 'gif|jpg|png';
    $config['max_size'] = '2048';
    $config['encrypt_name'] = TRUE;
    $this->load->library('upload', $config);
    if (!$this->upload->do_upload('image')) {
    $this->session->set_flashdata('error', $this->upload->display_errors() . '(Upload Image)');
    }
    $image_details = $this->upload->data();
    $this->load->library('upload', $config);
    $this->upload->initialize($config);
    // Image Upload End
    $roomTypes = $this->input->post('roomType');
    $this->load->helper('string');
    //print_r($roomTypes); exit;
    $clientData = array(
    //'interior_client_id'=>random_string('alnum',5),
    'interior_client_name' => $this->input->post('clientName'),
    'Interior_client_email' => $this->input->post('Email'),
    'interior_client_mobile' => $this->input->post('Mobile'),
    'interior_house_id' => $this->input->post('House'),
    'Interiror_client_carpet_area' => $this->input->post('txtChar'),
    'interior_client_status' => 1,
    'Interior_client_trans_datetime' => date('Y-m-d H:i:s'),
    'interior_client_house_plan' => $image_details['file_name']
    );
    //$userData = $this->session->set_userdata($clientData);
    $transClintid = $this->think_model->insert_clientinfo($clientData);
    $this->session->set_userdata('transClintid', $transClintid);
    //echo '<pre>'; print_r($roomTypes); exit;
    foreach ($roomTypes as $key => $roomType)
    if ($roomType) {
    $clientData = array(
    'interior_client_trans_ref_id' => $transClintid,
    'interior_client_trans_no_room_id' => $key,
    'interior_house_no_rooms' => $roomType,
    'interior_client_trans_status' => 1
    );
    $this->think_model->insert_clientTrans($clientData);
    //$this->visualize($catID = 2,$transClintid);
    }
    redirect('visualize');
    }
    $data['currentCategoryID'] = '';
    $data['categories'] = $this->think_model->visualizeCategories();
    $data['houseType'] = $this->think_model->get_house();
    $data['roomtype'] = $this->think_model->get_room();
    $data['body_content'] = 'think/visualize_start';
    $data['currentPage'] = 'visualise';
    $data['testimonials'] = $this->admin_model->testimonials();
    $this->load->view('template/site', $data);
    }
    public function visualize($catID = 0)
    {
    //echo"<pre>";print_r($this->session->userdata('transClintid'));exit;
    // $id = $this->session->userdata('transClintid');
    //print_r($id); exit;
    if (!$this->session->userdata('transClintid'))
    redirect('visualise');
    if ($catID == 0)
    $catID = $this->think_model->firstCategory();
    if ($this->input->post()) {
    $items = $this->input->post('Item');
    foreach ($items as $key => $val) {
    $group = $this->think_model->get_group($key);
    $subCat = $this->think_model->get_subCat($group->Interior_cat_group_id);
    //$transClintid = $this->think_model->insert_clientinfo();
    $clientData = array(
    'interior_client_trans_ref_id' => $this->session->userdata('transClintid'),
    'interior_client_group_item_id' => $group->Interior_cat_group_id,
    'interior_category_id' => $catID,
    'interior_cat_group_id' => $subCat->Interior_parent_category_id,
    'interior_client_trans_no_item_id' => $key,
    'interior_client_trans_status' => 1
    );
    $this->think_model->insert_clientTrans($clientData);
    }
    }
    $data['selectedItems'] = $this->session->userdata('itemIds-' . $catID);
    if (!$data['selectedItems'])
    $data['selectedItems'] = array();
    $data['lastCategoryID'] = $this->think_model->lastCategory();
    $data['firstCategoryID'] = $this->think_model->firstCategory();
    $data['currentCategoryID'] = $catID;
    $data['categories'] = $this->think_model->visualizeCategories();
    $data['categoryInfo'] = $this->think_model->visualizeCategory($catID);
    $data['subCategories'] = $this->think_model->visualizeSubCategories($catID);
    /*echo "<pre>";
    print_r($data['subCategories']);
    exit;*/
    $data['body_content'] = 'think/visualize';
    $data['currentPage'] = 'visualise';
    $data['testimonials'] = $this->admin_model->testimonials();
    $this->load->view('template/site', $data);
    //$str = strtolower($str)
    }

These are in the model as as follows:

    function visualizeCategories(){
    $this->db->where(array('Interior_category_level' => 0, 'Interior_category_status' => 1));
    $result = $this->db->get('category');
    if($result->num_rows() > 0)
    return $result->result();
    else return false;
    }
    function visualizeCategory($catID){
    $this->db->where(array('Interior_category_id' => $catID));
    $result = $this->db->get('category');
    if($result->num_rows() == 1)
    return $result->row();
    else return false;
    }
    function visualizeSubCategories($catID){
    $this->db->where(array('Interior_category_status' => 1, 'Interior_parent_category_id' => $catID));
    $result = $this->db->get('category');
    if($result->num_rows() > 0)
    return $result->result();
    else return false;
    }
    function visualizeGroupItems($catID){
    $this->db->where(array('Interior_group_item_status' => 1, 'Interior_cat_group_id' => $catID));
    $result = $this->db->get('group_item');
    if($result->num_rows() > 0)
    return $result->result();
    else return false;

[diafol]

I feel that they are all relevant enough

I can understand (and sympathise with) that, but LM just asked for the form. You've included some 500+ lines here and that code is very difficult to follow as there's no indentation at all.