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!

Firebase: Data not submitting to database on certain page

I have two pages that need to submit to the database; a user registration page and a tire-input page. The user registration page works. The tire-input page does not. The tire page will show the alert inside the "submitClick()" but doesn't input anything into the database. If there is anymore information that you need, let me know. Thanks in advance.
I've tried working with the rules:
Current (letting the user-registration work, but not the tire-input)
{
"rules": {
"users": {
"$uid": {
".read": "$uid === auth.uid",
".write": "$uid === auth.uid"
}
}
}
}
Not letting anything work:
{
"rules": {
"users": {
"$uid": {
".read": "$uid === auth.uid",
".write": "$uid === auth.uid"
}
},
"Tires": {
".read": true,
".write": true
}
}
}
HTML code (tire):
<?php
require ($_SERVER['DOCUMENT_ROOT'] . '/Emily-Projects/variables.php');
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../inc/styles/css.css">
</head>
<body>
<div class="container">
<div class="content" style="background-color: white;">
<div id="heading">
<h1>Add A Tire<h1>
</div>
<form>
<div id="1" class="form-sections">
<div class="input-div">
<label for="width" class="label">Width</label>
<select name="width" id="width" type="select" class="input">
<option value="">---</option>
<?php foreach ($tireWidths as $width) {?>
<option value="<?php echo $width;?>"><?php echo $width;?></option>
<?php } ?>
</select></div>
<div class="easy-div">
<div>
<?php foreach ($width100s as $width){ ?>
<z data-role="button" data-val="<?php echo $width;?>" class="width-sm"><?php echo $width?></z>
<?php } ?>
</div>
<div>
<?php foreach ($width200s as $width){ ?>
<z data-role="button" data-val="<?php echo $width;?>" class="width-sm"><?php echo $width?></z>
<?php } ?>
</div>
<div>
<?php foreach ($width300s as $width){ ?>
<z data-role="button" data-val="<?php echo $width;?>" class="width-sm"><?php echo $width?></z>
<?php } ?>
</div>
</div>
</div> <!-- closing div#1-->
<div id="2" class="form-sections">
<div class="input-div">
<label for="aspect" class="label">Aspect Ratio</label>
<select class="input" name="aspect" id="aspect">
<option value="">---</option>
<?php foreach ($aspects as $aspect) {?>
<option value="<?php echo $aspect;?>"><?php echo $aspect;?></option>
<?php }?>
</select>
</div>
<div class="easy-div">
<div>
<?php foreach ($aspectsTop as $a){ ?>
<z data-role="button" data-val="<?php echo $a;?>" class="aspectVal"><?php echo $a;?></z>
<?php } ?>
</div>
<div>
<?php foreach ($aspectsBottom as $a){ ?>
<z data-role="button" data-val="<?php echo $a;?>" class="aspectVal"><?php echo $a;?></z>
<?php } ?>
</div>
</div>
</div> <!-- closing div#2-->
<div id="3" class="form-sections">
<div class="input-div">
<label class="label" for="rim">Rim Diameter</label>
<select id="rim" name="rim" class="input">
<option value="">---</option>
<?php foreach ($rimDiameter as $rim){ ?>
<option value="<?php echo $rim;?>"><?php echo $rim;?></option>
<?php } ?>
</select>
</div>
<div class="easy-div">
<div>
<?php foreach ($rimDiaTop as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="rimVal"><?php echo $r;?></z>
<?php }?>
</div>
<div>
<?php foreach ($rimDiaBottom as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="rimVal"><?php echo $r;?></z>
<?php }?>
</div>
</div>
</div> <!-- closing div#3-->
<div id="4" class="form-sections">
<div class="input-div">
<label class="label" for="manufacturer">Manufacturer</label>
<select class="input" name="manufacturer" id="manufacturer">
<option value="">---</option>
<?php foreach ($manufacturers as $m) { ?>
<option value="<?php echo $m;?>"><?php echo $m;?></option>
<?php } ?>
</select>
</div>
<div class="easy-div">
<div id="manu-group-one">
<?php foreach ($manufacturersOne as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-two">
<?php foreach ($manufacturersTwo as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-three">
<?php foreach ($manufacturersThree as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-four">
<?php foreach ($manufacturersFour as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-five">
<?php foreach ($manufacturersFive as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-six">
<?php foreach ($manufacturersSix as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
</div>
</div> <!-- closing div#4-->
<div id="5" class="form-sections">
<div id="5a" class="inner-B"><div class="input-div"><label class="label" for="model">Model</label>
<select id="model" name="model" class="input">
<option value="">---</option>
<option value="test">Test</option>
</select>
</div>
<div class="easy-div">EASY BUTTONS</div>
</div><!--closing A -->
<div id="5B" class="inner-A"><label class="label" for="weight">Shipping Weight</label><input type="text" name="weight" id="weight" class="input"></div><!--closing B -->
</div> <!-- closing div#5-->
<div id="6" class="form-sections">
<div id="6A" class="inner-C">
<div class="input-div">
<label class="label" for="trim">Trim</label>
<select name="trim" id="trim" class="input" >
<option value="">---</option>
<option value="test">Test</option>
</select>
</div>
<div class="easy-div">EASY BUTTONS</div>
</div><!--closing A -->
<div id="6B" class="inner-D">
<label class="label" for="cost">Tire Cost</label>
<input name="cost" id="cost" class="input">
</div><!--closing B -->
<div id="6C" class="inner-E">PICTURES</div><!--closing C -->
</div> <!-- closing div#6-->
<div id="7" class="form-sections">
<div id="7A" class="inner-D">
<div class="label">Run Flat?</div>
<div class="input"><input type="radio" name="runflat" value="yes"> Yes <input type="radio" name="runflat" value="no"> No </div>
</div><!--closing A -->
<div id="7B" class="inner-F">
<div class="label">Tread Depth</div>
<div class="input">
<input type="text" name="tread" id="tread" ><br><br>
<?php for($i=1; $i<11; $i++){ ?>
<z data-role="button" > <?php echo $i;?></z>
<?php } ?>
<?php for($i=11; $i<21; $i++){ ?>
<z data-role="button" > <?php echo $i;?></z>
<?php } ?> <z data-role="button" >.25 </z>
<z data-role="button" >.5</z>
<z data-role="button" >.75</z>
</div>
</div><!--closing B -->
<div id="7C" class="inner-F"><div class="label">DOT Date</div><div class="input">INPUT</div></div><!--closing C -->
<div id="7D" class="inner-F"><label class="label" for="patches">Number of Patches</label>
<div class="input"><?php for($i=0;$i<5;$i++){?>
<z data-role="button" ><?php echo $i;?></z>
<?php
}?></div></div> <!--closing D-->
</div> <!-- closing div#7-->
<div id="8" class="form-sections">
<div id="8A" class="inner-G"><div class="label">Retail Price</div>
<input type="text" id="retailPrice" name="retailPrice" class="input">
</div>
<div id="8B" class="inner-G"><div class="label">C.U.T. Share</div><div class="input">- $4.99 </div></div>
<div id="8C" class="inner-G"><div class="label">C.C. Fee</div><div class="input"><?php echo $ccfee;?></div></div>
<div id="8D" class="inner-G">Not Applicable</div>
<div id="8E" class="inner-G"><div class="label">Shipping Est.</div><div class="input"><?php echo $shipEst;?></div></div>
<div id="8F" class="inner-G"><div class="label">My Pay Out</div><div class="input"><?php echo $payOutRetail;?></div></div>
<div id="8G" class="inner-G"><div class="label">Tire NOT listed on Cheapest Used Tires</div><div class="input">INPUT</div></div>
</div> <!-- closing div#8-->
<div id="9" class="form-sections">
<div id="9A" class="inner-G"><div class="label">Wholesale Price</div>
<input type="text" id="retailPrice" name="retailPrice" class="input"></div>
<div id="9B" class="inner-G"><div class="label">C.U.T. Share</div><div class="input">- $4.99</div></div>
<div id="9C" class="inner-G"><div class="label">C.C. Fee</div><div class="input"><?php echo $ccfee;?></div></div>
<div id="9D" class="inner-G"><div class="label">Buyer&apos;s Bucks</div><div class="input">- $3.00</div></div>
<div id="9E" class="inner-G"><div class="label">Shipping Est.</div><div class="input"><?php echo $shipEst;?></div></div>
<div id="9F" class="inner-G"><div class="label">My Pay Out</div><div class="input"><?php echo $payOutWS;?></div></div>
<div id="9G" class="inner-G"><div class="label">Wholesale ONLY</div><div class="input">INPUT</div></div>
</div><!--closing div#9-->
<input type="submit" id="submit" onclick="submitClick()"value="Add This Tire">
</form>
</div>
</div> <!-- closing container -->
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script src="/Emily-Projects/new-add-a-tire.js"></script>
</body>
</html>
Tire JS:
//File: new-add-a-tire.js
// Initialize Firebase
var config = {
apiKey: "AIzaSyCLpexd_9jOLjwcraume8RDXqag8mUSyMY",
authDomain: "funoto-a67ec.firebaseapp.com",
databaseURL: "https://funoto-a67ec.firebaseio.com",
projectId: "funoto-a67ec",
storageBucket: "funoto-a67ec.appspot.com",
messagingSenderId: "270438905275"
};
firebase.initializeApp(config);
//Add a Tire to Firbase
var width = document.getElementById("width");
var aspect = document.getElementById("aspect");
var rim = document.getElementById("rim");
var manufacturer = document.getElementById("manufacturer");
var submitBtn = document.getElementById("submit");
//Function: submitClick();
function submitClick(){
window.alert("Works");
var firebaseRef = firebase.database().ref();
firebaseRef.child("Tires").set("some value");
}

I am following the official doc try this
function submitClick(){
window.alert("Works");
var firebaseRef = firebase.database();
firebaseRef.ref("Tires").set({tire: "round"});
}

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

passing data through text box from select option into another page

I am trying to pass data through a text box which is selected through the 'other' in select option. However, when I run the program, the data is not passed. Any ideas how to resolve this? here is the code that I am using. I have added most of the code below. I have to pass information through the select option in the form of a text box. However the information is not passed. Is there any other method that can do this, passing through text to another page?
<?php include_once("header.php"); ?>
<?php
$q_sel = "select * from tbl_drug";
$r_sel = mysql_query($q_sel);
?>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('#my_textarea').hide();
$('#Quantity').change(function()
{
var o = $(this).find('option:selected').val();
console.log(o);
if(o=='other') $('#my_textarea').show(); else $('#my_textarea').hide();
});
});
</script>
</head>
<body style="background-color: #25383c;background-image: url(img/background.png);">
<?php include_once("nav.php"); ?>
<h1> Medication Appropriateness Index</h1>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="well">
<form class="form-horizontal" role="form" action="save_drug.php" method="post">
<div class="form-group">
<label class="control-label col-sm-2">Drug:</label>
<div class="col-xs-3">
<select name="drug" id="Drug" class="form-control" required="">
<option value="" selected="" disabled="">Please select A drug...</option>
<?php
while($r1 = mysql_fetch_array($r_sel))
{ ?>
<option value="<?php echo $r1['d_id']; ?>"><?php echo $r1['drug_name']; ?></option>
<?php
}
?>
</select>
</div>
</div>
<script>
$(function() {
$("#dose").tooltip();
});
</script>
<div class="form-group">
<label class="control-label col-sm-2">Route:</label>
<div class="col-xs-3">
<select id="Quantity" name="quantity" class="form-control" required="">
<option value="" selected="" disabled="">Please select A dosage...</option>
<option value="PO">PO</option>
<option value="IV">IV</option>
<option value="PR">PR</option>
<option value="Topically">Topically</option>
<option value="other">Other (please specify)</option>
</select>
<textarea name="my_textarea" id="my_textarea"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="hidden" name="patient_id" value="<?php echo $_GET['patient_id']; ?>">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

always use 'name' attribute for inputs , because only name can send data on submit.
<textarea name="my_textarea" id="my_textarea"></textarea>

JQuery addClass to element based on selected option

How to add a class to element based on selected option
So I got this select option generated by php looping
code 1
<?php for ($i=1; $i <= $jml_penumpang; $i++) { ?>
<div class="form-group">
<label for="penumpang_<?php echo $i ?>" class="control-label">Nama Penumpang <?php echo $i ?></label>
<input type="text" class="form-control" id="penumpang_<?php echo $i ?>" placeholder="Nama Penumpang <?php echo $i ?>" name="penumpang_<?php echo $i ?>" value="<?php echo set_value('penumpang_'.$i); ?>">
</div>
<label for="kode_kursi_<?php echo $i ?>" class="control-label">Kursi <?php echo $i ?></label>
<select name="kode_kursi_<?php echo $i; ?>" class="form-control form-group">
<option>-- Pilih Kursi --</option>
<?php
$kode_kursi = explode(",", $jml_kursi[0]->kode_kursi);
foreach ($kode_kursi as $k) {
?>
<option value="<?php echo $k; ?>"><?php echo $k; ?></option>
<?php
}
?>
</select>
<?php } ?>
now I want to add some css to below element that also generated by php looping
code 2
<div class="col-xs-5 col-xs-offset-1">
<p class="text-center page-header"><strong><i class="fa fa-users"></i> Denah Tempat Duduk</strong></p>
<div class="row">
<div class="col-xs-12"><div class="well text-center">Depan</div></div>
</div>
<div class="row">
<?php
$kode_kursi = explode(",", $jml_kursi[0]->kode_kursi);
foreach ($kode_kursi as $k) {
?>
<div class='col-xs-6'><div class='well text-center'><i class='fa fa-user'></i> <?php echo $k ?></div></div>
<?php
}
?>
</div>
<div class="row">
<div class="col-xs-12"><div class="well text-center">Belakang</div></div>
</div>
</div>
I want to add inline css style to this element (from code 2)
<div class='well text-center'>
Based on selected option value from code 1
So the logic is like:
I want to add inline css style (style="background:yellow") to the element in code 2 that has a text equals to selected option value on code 1
How to that using JQuery?
Thank you so much
and sorry for my grammar
UPDATED
this is the generated select option from code 1 ( NOTE: i don't include the )
<select name="kode_kursi_1" class="form-control form-group">
<option>-- Pilih Kursi --</option>
<option value="T003-1">T003-1</option>
<option value="T003-2">T003-2</option>
<option value="T003-3">T003-3</option>
<option value="T003-4">T003-4</option>
<option value="T003-5">T003-5</option>
<option value="T003-6">T003-6</option>
</select>
<select name="kode_kursi_2" class="form-control form-group">
<option>-- Pilih Kursi --</option>
<option value="T003-1">T003-1</option>
<option value="T003-2">T003-2</option>
<option value="T003-3">T003-3</option>
<option value="T003-4">T003-4</option>
<option value="T003-5">T003-5</option>
<option value="T003-6">T003-6</option>
</select>
and this is the generated element from code 2
<div class="row">
<div class="col-xs-6"><div class="well text-center" id="T003-1"><i class="fa fa-user"></i>T003-1</div></div>
<div class="col-xs-6"><div class="well text-center" id="T003-2"><i class="fa fa-user"></i>T003-2</div></div>
<div class="col-xs-6"><div class="well text-center" id="T003-3"><i class="fa fa-user"></i>T003-3</div></div>
<div class="col-xs-6"><div class="well text-center" id="T003-4"><i class="fa fa-user"></i>T003-4</div></div>
<div class="col-xs-6"><div class="well text-center" id="T003-5"><i class="fa fa-user"></i>T003-5</div></div>
<div class="col-xs-6"><div class="well text-center" id="T003-6"><i class="fa fa-user"></i>T003-6</div></div>
</div>
I Also get rid the to be more readable

Guessing there may be dynamic select elements and the number of yellow div should be equal to number of select, try:
$(document).ready(function(){
//call select_changed() function if any 'select'
//element with name starting from 'kode_kursi_' is changed
$("select[name*='kode_kursi_']").change(function(){
select_changed();
});
});
function select_changed(){
//remove yellow backgrounds from all div
$("div[id*='T003-']").each(function(){
$(this).removeClass('yellow');
});
//match the id with the selected option and
//add background css class
$("select[name*='kode_kursi_']").each(function(){
var selected = $(this).val();
$('#'+selected).addClass('yellow');
});
}
Fiddle Demo

I think this will give a hint, havent tested it yet
$(".kode_kursi").on("change",function(){
$this_val = $(this).val();
$(".div_kode2").each(function(){
$v_text = $(this).text();
if($this_val ==$text){
$(this).css("background","yellow");
}
});
});