We Keep Coding

Javascript inside PHP foreach

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').

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!

Duplicate dynamic select boxes using clone()

I have a div in my code which I need to duplicate as the user clicks on the Add button. In the div there are 2 dropdowns one which is populated dynamically from database and the other one dynamically populated based on the first dropdown selection.
I have achieved duplicating the div using jQuery clone(). But the dynamically populating feature isn't working for the first dropdown divs so as the second one. Also, sometimes when I select an option in parent div, that's also showing weird selections.
var count = 1;
$('#add-new').click(function() {
//clone
var row = $('#scope-brand-div').clone(true);
row.appendTo('#clone-parent');
//add new ids
var scopeselect = $('select.scope-select');
var brandselect = $('select.brand-select');
$(row).find(scopeselect).attr('id', 'project-scope' + count);
$(row).find(brandselect).attr('id', 'brands_used' + count);
count++;
});
<form action="add_project" method="POST">
<h4>Project Scope <button class="clone" name="addnew" id="add-new">Add</button></h4>
<div class="row">
<div class="col-md-6">
<div class="row" id="clone-parent">
<div id="scope-brand-div">
<div class="col-md-6">
<div class="form-group">
<label for="scope"><?php echo $this->lang->line('xin_project_scope');?></label>
<select name="scope" class="form-control select-border-color border-warning scope-select" data-plugin="select_hrm" data-placeholder="<?php echo $this->lang->line('xin_project_scope');?>" id="project-scope">
<option value=""></option>
<?php foreach($all_project_scope as $scope) { ?>
<option value="<?php echo $scope->scope_id; ?>">
<?php echo $scope->scope_name; ?>
</option>
<?php } ?>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group" id="brands-ajax">
<label for="brands_used"><?php echo $this->lang->line('xin_brands_used');?></label>
<select name="brands_used" id="brands_used" class="form-control select-border-color border-warning brand-select" data-plugin="select_hrm" data-placeholder="<?php echo $this->lang->line('xin_brands_used');?>">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<input type="submit name=" submit " id="submit-form " value="Submit ">
</form>

Dynamic Select box using javascript multifield in Codeigniter

Good day,
I've been trying to get all the dynamic select box but it always returning the first color.
For example i have 1 default set of color, but then i click the Add More it adds another set of color but when i posting it in my controller it always return the first color and disregard the other added set of color. This is the sample image set of color
Can someone help me on this? I've been stucked for 4days now.
Here's my view code:
<div class="form-content">
<div class="row">
<div class="col-md-12">
<p><button type="button" id="btnAdd" class="btn btn-primary">Add Color</button></p>
<br/>
</div>
</div>
<div class="row group">
<div class="col-md-5">
<div class="form-group">
<label></label>
<select name="color1[]" id="color1" class="form-control" >
<option value="" > Color 1</option>
<?php foreach($colors as $color): ?>
<option value="<?php echo $color['colorID']; ?>">
<?php echo $color['colorDesc']; ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label></label>
<select name="color2[]" id="color2" class="form-control" >
<option value="" > Color 2</option>
<?php foreach($colors as $color): ?>
<option value="<?php echo $color['colorID']; ?>">
<?php echo $color['colorDesc']; ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<button type="button" class="btn btn-danger btnRemove">X</button>
</div>
</div>
</div>
</div>
And here's the script
<script type="text/javascript">
$(".form-content").multifield({
section: ".group",
btnAdd:"#btnAdd",
btnRemove:".btnRemove",
});
</script>
And here's my Controller
$color1 = $this->input->post('color1');
$color2 = $this->input->post('color2');
for($i = 0; $i < count($color1); ++$i) {
echo $make = $color1[$i];
}
I just started using Codeigniter newbie in short. Please help me to fix this. Thanks in advance.

Try this (I not tested):
HTML:
<div class="form-content">
<div class="row">
<div class="col-md-12">
<p>
<button type="button" id="btnAdd" class="btn btn-primary">Add Color</button>
</p>
<br/>
</div>
</div>
<?php $count=0 ; if($this->input->post('color1')) $count = count($this->input->post('color1')); for($i=0;$i<$count,$i++):?>
<div class="row group">
<div class="col-md-5">
<div class="form-group">
<label></label>
<select name="color1[<?php echo $i;?>]" id="color1" class="form-control" <?php set_select( 'color1['.$i. ']',$color[ 'colorID']);?>>
<option value=""> Color 1</option>
<?php foreach($colors as $color): ?>
<option value="<?php echo $color['colorID']; ?>">
<?php echo $color[ 'colorDesc']; ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label></label>
<select name="color2[<?php echo $i;?>]" id="color2" class="form-control">
<option value=""> Color 2</option>
<?php foreach($colors as $color): ?>
<option value="<?php echo $color['colorID']; ?>" <?php set_select( 'color2['.$i. ']',$color[ 'colorID']);?>>
<?php echo $color[ 'colorDesc']; ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<button type="button" class="btn btn-danger btnRemove">X</button>
</div>
</div>
</div>
<?php endfor;?>
</div>
in controller (you can also add validation):
...
if($this->input->post('color1')) {
$result = array();
$count = count($this->input->post('color1'));
for($i=0;$i<$count;$i++) {
if($this->input->post('color1['.$i.']') && $this->input->post('color2['.$i.']')) {
$result[$i] = ['color1'=>$this->input->post('color1['.$i.']'),'color2'=>$this->input->post('color2['.$i.']')];
}
}
print_r($result);
}
...

I am facing an error with codeigniter pop modal with ajax

I have two fields which one is province and another is district which are:
<div class="form-group">
<label class="control-label col-sm-4">Province *</label>
<div class="col-sm-5">
<select id="province" name="province" class="form-control selectboxit" onchange="get_districts(this.value)" required="">
<option value="">Select Province</option>
<?php
$province = $this->db->get('provinces')->result_array();
foreach ($province as $row):
?>
<option value="<?php echo $row['provinceID']; ?>">
<?php echo $row['province_name']; ?>
</option>
<?php
endforeach;
?>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">District *</label>
<div class="col-sm-5">
<select id="district" name="district" class="form-control" >
<option value="" selected="selected">First Select Province</option>
</select>
</div>
</div>
And the script is here:
<script type="text/javascript">
function get_districts(val) {
$.ajax({
url: '<?php echo base_url(); ?>index.php?admin/get_district/' + val,
success: function (response)
{
jQuery('#district').html(response);
}
});
}
function valida(val) {
if (val == "Rent") {
document.getElementById("rent_amount").disabled = false;
}
if (val == "Personal") {
document.getElementById("rent_amount").disabled = true;
}
}
</script>
It works fine for me in views pages but when I am working these things in pop modal it's not working by clicking this link the pop up modal shows up with data but the ajax isn't working:
<a href="#" onclick="showAjaxModal('<?php echo base_url(); ?>index.php?modal/popup/modal_branche_edit/<?php echo $row['branch_id']; ?>');">
<i class="fa fa-edit"></i>
</a>
The pop up modal is working fine but the ajax is not working.
Please any suggestion?

form value disappears after reloading

when i select the color field the value selected in the sub category field disappears
here is my view page...
<div class="form-group col-md-12">
<label class="form-group col-md-3" for="exampleInputEmail1">Parent Category</label>
<div class="form-group col-md-6">
<select name="parentname" id="parentname" class="form-control">
<option value="">select one</option>
<?php foreach ($parent as $row) { ?>
<option value="<?php echo $row->id; ?>"><?php echo $row->category_name; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group col-md-12">
<label class="form-group col-md-3" for="exampleInputEmail1">Sub Category</label>
<div class="form-group col-md-6">
<select name="subname" id="subname" class="form-control">
<option value="">select one</option>
<?php foreach ($sub_cat as $row){?>
<option value="<?php echo $row->id;?>"><?php echo $row->category_name;?></option>
<?php }?>
</select>
</div>
</div>
<div class="form-group col-md-12">
<label class="form-group col-md-3" for="exampleInputEmail1">Color</label>
<div class="form-group col-md-6">
<input readonly id="mycolor" class="colorPicker evo-cp0 form-control" data-toggle="tooltip" data-placement="top" title="Pick Product color" />
</div>
</div>
<div class="form-group col-md-12">
<label for="exampleInputPassword1">Selected Colors</label>
<div class="clearfix"></div>
<div id="selected-color">
<?php if($this->session->userdata('colors')){
foreach ($this->session->userdata('colors') as $color)
{?>
<div class="col-md-2 selected-color">
<div class="color-box" style="background-color:<?php echo $color; ?>"></div>
<div class="selected-color-btn" color='<?php echo $color; ?>' data-toggle="modal" data-target="#confirm-color" >
<span class="fa fa-close" data-toggle="tooltip" data-placement="top" title="Remove color" ></span></div>
</div>
<?php }}?>
</div>
</div>
here is my js...
<script type="text/javascript">
$(document).ready(function() {
$('#mycolor').css('background-color', $('#mycolor').val());
$("#mycolor").colorpicker({});
$("#mycolor").on("change.color", function(event, color){
var url='<?php echo base_url() ?>admin_control/ajax_addProduct_color';
var product_id=$("#product_id").val();
$.post(url, {color:color,product:product_id}, function(result)
{
$('#selected-color').html(result);
location.reload();
});
});
<script>
i had sisyphus function for the values to become selected after selecting the color field but when i choose the color field the value of the subcategory field disappears