如何在两个转盘中获取当前图像的两个product_ID，并在控制器中传递两个productID（Codeigniter）

Question

<div class="container">
    <!-- TOP -->
    <?php var_dump($products['upper']); ?>
    <div class="row" style="margin-top: 20px">
        <div class="col-md-offset-3 col-md-6">
            <h4 class="text-center"><small>STEP 1:</small> Choose your TOP</h4>
            <div id="top-carousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                            <?php foreach ($products['upper'] as $index => $product): ?>
                              <div class="item <?php echo ($index == 0) ? 'active' : ''; ?>">
                            <img name="data" value="<?php echo $product['productID'] ?>" class="img-responsive center-block" src="<?php echo base_url();?>image/productimages/<?php echo $product['image'] ?>" style="margin: auto; height: 300px">
                            <div class="carousel-caption" style="padding: 10px; background-color: black; color: white;">
                                <?php echo $product['productname']; ?>
                            </div>
                        </div>
                        <?php endforeach ?>
                </div>
                <a class="left carousel-control" href="#top-carousel" role="button" data-slide="prev">
                    <i class="fa fa-lg fa-arrow-left" style="top: 45%; position: absolute; color: #000"></i>
                </a>
                <a class="right carousel-control" href="#top-carousel" role="button" data-slide="next">
                    <i class="fa fa-lg fa-arrow-right" style="top: 45%; position: absolute; color: #000"></i>
                </a>
            </div>
        </div>
    </div>
    <?php var_dump($products['lower']); ?>
    <!-- BOTTOM -->
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <h4 class="text-center"><small>STEP 2:</small> Choose your BOTTOM</h4>
            <div id="bottom-carousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                     <?php foreach ($products['lower'] as $index => $product): ?>
                              <div class="item <?php echo ($index == 0) ? 'active' : ''; ?>">
                            <img name="<?php echo $product['productID'] ?>" class="img-responsive center-block" src="<?php echo base_url();?>image/productimages/<?php echo $product['image'] ?>" style="margin: auto; height: 300px">
                            <div class="carousel-caption" style="padding: 10px; background-color: black; color: white;">
                                <?php echo $product['productname']; ?>
                            </div>
                        </div>
                        <?php endforeach ?>
                </div>
                <a class="left carousel-control" href="#bottom-carousel" role="button" data-slide="prev">
                    <i class="fa fa-lg fa-arrow-left" style="top: 45%; position: absolute; color: #000"></i>
                </a>
                <a class="right carousel-control" href="#bottom-carousel" role="button" data-slide="next">
                    <i class="fa fa-lg fa-arrow-right" style="top: 45%; position: absolute; color: #000"></i>
                </a>
            </div>
        </div>
<div class="row">
        <div class="col-md-offset-3 col-md-7" style="padding-top: 50px">
            <h4 class="text-center"><small>STEP 3:</small> Submit</h4>
            <button type="submit" form="hidden_form" class="btn btn-lg btn-block btn-primary">Go!</button>
        </div>
    </div>
</div>
</form>
<script>
     $(document).ready(function() {
        var index = $(this).find(".active").index();
         // Stop those carousels from spinning
        $('.carousel').carousel({
                interval : false
            });
        // Let's figure out what the customer chose on the carousel
        // and then put it on the hidden form
        $('.carousel').on('slide',function(e){
            var slideFrom = $(this).find('.active').index();
            var slideTo = $(e.relatedTarget).index();
            console.log(slideFrom+' => '+slideTo);
        });
     });
 </script>

Answer 1

The simplest way to get the product_ID data is as below

<img class="img-responsive center-block" src="<?php echo base_url();?>image/productimages/<?php echo $product['image'] ?>" style="margin: auto; height: 300px">
<input type="hidden" value="<?php echo $product['productID'] ?>" name="data" />

Use an <input type="hidden" tag to get the value exactly.