Javascript inside PHP foreach-ThrowExceptions

Exception or error:

I made a loop using foreach, to show a list of products. Then I made a modal to edit each product. I need to get the value of product dimension and I’ll make a dependent drop down between ‘job drop down’ and ‘supply drop down’. At the moment, I can’t continue it with Ajax because I got a problem at the first step to get value of dimension. In this code below I tried to get ‘length’ value of each product through javascript. But it returns the same value, it always is the value of the first product, even if I click on the 2nd, 3rd, 4th of product in the list.

<div class="table-responsive">
                        <table class="table table-hover" id="dataTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>Product</th>
                                    <th>Supplier</th>
                                    <th>Dimension</th>
                                    <th>Edit</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                $pcs_1 = 0;
                                $meter_1 = 0;
                                foreach ($stock as $s) { ?>
                                    <tr>
                                        <td class="small">
                                            <?php echo $s->cat . ' - ' . $s->prod ?>
                                        </td>
                                        <td class="small">
                                            <?php echo $s->spl ?>
                                        </td>
                                        <td class="small">
                                            <?php echo $s->length . ' x ' . $s->width . ' x ' . $s->height . ' x ' . $s->diameter  ?>
                                        </td>
                                        <td>
                                            <a type="button" data-toggle="modal" class="btn btn-small" data-target="#modal_edit<?php echo $s->id ?>"><i class="fas fa-edit"></i></a>

                                            <!--MODAL-->
                                            <div class="modal fade" id="modal_edit<?php echo $s->id ?>" role="dialog">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <form class="form-horizontal" method="post" action="<?php echo site_url('admin/Stock/edit/') ?>">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title" id="labelModal">EDIT STOCK</h5>
                                                            </div>
                                                            <div class="modal-body">
                                                                <input type="hidden" id="length_product" class="length_product" value="<?php echo $s->length ?>" />

                                                                <div class="card">
                                                                    <div class="card-body">
                                                                        <div class="row">
                                                                            <div class="col-sm-3">
                                                                                <div class="form-group">
                                                                                    <?php echo form_label('JOB') ?>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-sm-9">
                                                                                <div class="form-group">
                                                                                    <select name="ref" id="ref" class="form-control" required onchange="GetData()">
                                                                                        <option value="">-- Select Job --</option>
                                                                                        <?php foreach ($job as $j) : ?>
                                                                                            <option value="<?php echo $j->id; ?>"><?php echo $j->id ?> - <?php echo $j->cust ?></option>
                                                                                        <?php endforeach; ?>
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row">
                                                                        <div class="col-sm-3">
                                                                            <div class="form-group">
                                                                                <?php echo form_label('Supply') ?>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-9">
                                                                            <select name="supply" id="supply" class="form-control" required>
                                                                                <option value="">--Select Supply--</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>

                                                                </div>

                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                                <button type="submit" class="btn btn-warning submitBtn">edit</button>
                                                            </div>

                                                        </form>
                                                    </div>
                                                </div>
                                            </div> <!-- modal -->

                                        </td>
                                    </tr>
                                <?php   } ?>

                            </tbody>
                        </table>
                    </div>

Here is the javascript :

    <script type="text/javascript">
    function GetData() {
        var length_product = $("#length_product").val();
        alert(length_product);
    }
</script>

The list works well, but I don’t know how to get the detail of each list on javascript (passing multiple values from ‘modal inside the list’ to ‘Javascript’).

How to solve:

—–select job—–

foreach ($job as $j => $id) { echo “”.$id.””; }

or

1)create a function in javascript key & value
2)call the function and create a for each loop

Answer´╝Ü

for me it looks like that you are always getting value of

<input type="hidden" id="length_product" class="length_product" value="<?php echo $s->length ?>" />

rather than option from the select element.

Try the following:

$('#ref').on('change', function(event) {
  event.preventDefault();
  var length_product = $(this).val();
  alert(length_product);
});

and for the PHP and HTML:

<div class="form-group">
  <select name="ref" id="ref" class="form-control" required>
    <option value="">-- Select Job --</option>
    <?php foreach ($job as $j) { ?>
    <option value="<?php echo $j["id"]; ?>"><?php echo $j["id"]; ?>-<?php echo $j["cust"]; ?></option>
    <?php 
    }
    ?>
  </select>
</div>

Hope this helps!

Leave a Reply

Your email address will not be published. Required fields are marked *