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?
Related
I have created the below mentioned form in Codeigniter, where there is 4 level dependent drop down list. Everything work as expected while I am in the first form. When I press the add button so that there is a regenerated form just like the first one, whenever I select the country field and expect based on my selection to have the relevant options in the second drop down menu (championship) it doesn't work. No data is coming based on my country selection. It looks like there is no call to the JavaScript.
Could you please help me to understand where is my mistake after pressing the add button, so that no matter how many forms I create, I will have relevant calls to the functions in my controller where it brings the relevant data to the depentened drop down menus?
Thank you very much!
<div class="container box">
<br />
<br />
<h3 align="center">Available Championships</h3>
<br />
<?php echo form_open_multipart('dynamic_dependent'); ?>
<div id="dynamic_field">
<div class="form-group">
<select name="country[]" id="country" class="form-control input-lg">
<option value="">Select Country</option>
<?php
foreach($country as $row)
{
echo '<option value="'.$row->id.'">'.$row->name.'</option>';
}
?>
</select>
</div>
<br />
<div class="form-group">
<select name="championship[]" id="championship" class="form-control input-lg">
<option value="">Select Championship</option>
</select>
</div>
<br />
<div class="form-group">
<select name="home_team[]" id="home_team" class="form-control input-lg">
<option value="">Select Home Team</option>
</select>
</div>
<div class="form-group">
<select name="away_team[]" id="away_team" class="form-control input-lg">
<option value="">Select Away Team</option>
</select>
</div>
<div class="form-group">
<input type="text" name="prediction[]" id="prediction">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" name="add" id="add" class="btn btn-success">Add More</button>
</div>
</div>
<div class="form-group">
<button>Submit</button>
</div>
<?php echo form_close(); ?>
</div>
<script type="text/javascript">
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<div id="row'+i+'"><div class="form-group"><select name="country[]" id="country" class="form-control input-lg"><option value="">Select Country</option><?php foreach($country as $row) { echo '<option value="'.$row->id.'">'.$row->name.'</option>'; } ?></select></div><div class="form-group"><select name="championship[]" id="championship" class="form-control input-lg"><option value="">Select Championship</option></select></div><div class="form-group"><select name="home_team[]" id="home_team" class="form-control input-lg"><option value="">Select Home Team</option></select></div><div class="form-group"><select name="away_team[]" id="away_team" class="form-control input-lg"><option value="">Select Away Team</option></select></div><div class="form-group"><input type="text" name="prediction[]" id="prediction"></div><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></div></div></div>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
var res = confirm('Are You Sure You Want To Delete This?');
if(res==true){
$('#row'+button_id+'').remove();
$('#'+button_id+'').remove();
}
});
});
$('#country').change(function(){
var country_id = $('#country').val();
if(country_id != '')
{
$.ajax({
url:"<?php echo base_url(); ?>index.php/dynamic_dependent/fetch_state",
method:"POST",
data:{country_id:country_id},
success:function(data)
{
$('#championship').html(data);
$('#home_team').html('<option value="">Select Home Team</option>');
$('#away_team').html('<option value="">Select Away Team</option>');
}
});
}
else
{
$('#championship').html('<option value="">Select Championship</option>');
$('#home_team').html('<option value="">Select Home Team</option>');
$('#away_team').html('<option value="">Select Away Team</option>');
}
});
$('#championship').change(function(){
var championship_id = $('#championship').val();
if(championship_id != '')
{
$.ajax({
url:"<?php echo base_url(); ?>index.php/dynamic_dependent/fetch_city",
method:"POST",
data:{championship_id:championship_id},
success:function(data)
{
$('#home_team').html(data);
$('#away_team').html(data);
}
});
}
else
{
$('#home_team').html('<option value="">Select Home Team</option>');
$('#away_team').html('<option value="">Select Away Team</option>');
}
});
</script>
Have problem with submiting information via ajax.
Have for example 20 rows. Click on row and it opens all information about services.
$('tr').click(function() {
var servicesUpdateId = $(this).attr('data');
$("#"+servicesUpdateId).css({"display":"block", 'opacity':'0'}).animate({left: '0',opacity: '1',});
// save form class for ajax submit
localStorage.setItem("formId", servicesUpdateId);
});
Here html:
<tbody>
<?php
$allServices = Services::where('user_id', $mainUser->id);
foreach($allServices as $oneServices) {
?>
<tr class="services-table-hover" data="services_<?php echo $oneServices->id; ?>">
<td> <div class="services-color"></div> <img src="/assets/images/provider_img2.png" alt=""> </td>
<td class="title-name"> <?php echo $oneServices->name; ?> </td>
<td> <?php echo $oneServices->description; ?> </td>
<td> <?php echo $oneServices->duration; ?> mins </td>
<td> <?php echo $oneServices->currency; ?> <?php echo $oneServices->price; ?> </td>
<td style="line-height: 50px;"> <i class="icon-arrow-right"></i> </td>
</tr>
<?php } ?>
Then its div with info
<?php foreach($allServices as $onesServices) { ?>
<div id="services_<?php echo $onesServices->id; ?>">
<div class="portlet light minHeigh staff-hover">
<form action="" method="post" class="services_<?php echo $onesServices->id; ?>">
<div class="portlet-title tabbable-line">
<a class="goBackOne"><i class="icon-arrow-left"></i></a><h3 style="display: inline-block;"><?php echo $lang['SERVICES_LEFT_MENU_ALL']; ?></h3>
</div>
<div class="col-sm-7">
<div class="portlet-body">
<div class="tab-content">
<div class="tab-pane active" id="portlet_tab1">
<div class="form-body input-smaller">
<div class="form-group">
<label class="col-md-3 control-label" for="form_control_1"><img class="imgs" src="/assets/images/provider_img2.png" alt=""></label>
<div class="col-md-9">
<input type="text" class="form-control" name="update_service_name" style="margin-bottom:10px; font-size: 26px; font-weight: 600;" value="<?php echo $onesServices->name; ?>">
<textarea name="update_service_description" id="" cols="30" rows="10" class="form-control" style="margin-bottom:10px;" placeholder="Description"><?php echo $onesServices->description; ?></textarea>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="form_control_1"><?php echo $lang['SERVICES_INSIDE_COST']; ?></label>
<div class="col-md-9">
<input type="text" class="form-control" name="update_service_price" value="<?php echo $onesServices->price; ?>">
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<label class="col-md-3 control-label" for="form_control_1"><?php echo $lang['SERVICES_INSIDE_TIME']; ?></label>
<div class="col-md-9">
<input type="text" class="form-control" name="update_service_duration" value="<?php echo $onesServices->duration; ?>">
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<?php
$servicesCat = $onesServices->service_categories_id;
$servicesCat = json_decode($servicesCat);
?>
<label class="col-md-3 control-label" for="form_control_1"><?php echo $lang['SERVICES_INSIDE_LIST']; ?></label>
<div class="col-md-9">
<select id="multiple2" name="update_services_category" class="form-control select2-multiple" multiple placeholder="Select categories">
<?php foreach($servicesCategories as $onCategory) { ?>
<?php if(in_array($onCategory->id, $servicesCat)) { ?>
<option value="<?php echo $onCategory->id; ?>" selected><?php echo $onCategory->name; ?></option>
<?php } else { ?>
<option value="<?php echo $onCategory->id; ?>"><?php echo $onCategory->name; ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-5">
<h4><?php echo $lang['SERVICES_INSIDE_PROVIDE']; ?></h4>
<?php
$staffs_eupdate = Staffs::where('id_users', $mainUser->id);
$serviceStaff = ServiceStaffs::find_by_query("SELECT staff_id FROM service_staffs WHERE user_id = '$mainUser->id' AND services_id = '$onesServices->id' ");
$newStaffId = array();
foreach($serviceStaff as $index => $sStaff) {
$newStaffId[$index] = $sStaff->staff_id;
}
foreach($staffs_eupdate as $staff_update) {
?>
<div class="full-services">
<div class="all-services">
<?php if(in_array($staff_update->id, $newStaffId)) { ?>
<div class="all-around all-around-on">
<div class="float-on-left">
<div class="ignore_img"><input type="hidden" name="update_staffs_id[]" value="<?php echo $staff_update->id; ?>"></div>
<?php echo $staff_update->name; ?>
</div>
</div>
<?php } else { ?>
<div class="all-around all-around-non">
<div class="float-on-left">
<div class="ignore_img"><input type="hidden" name="update_staffs_id[]" value="<?php echo $staff_update->id; ?>"></div>
<?php echo $staff_update->name; ?>
</div>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
</div>
</form>
</div>
I'm saving class in localStorage. And then user edits value in field and hes out off that field, I update that information with ajax
$('.'+localStorage.getItem("formId")+' input, .'+localStorage.getItem("formId")+' textarea').blur(function(event) {
var updateStaffId = $("."+localStorage.getItem("formId")+" .all-around-on input[name='update_staffs_id[]']").map(function(){return $(this).val();}).get();
var updateCategoriesId = $("."+localStorage.getItem("formId")+" select[name=update_services_category] option:selected").map(function(){return $(this).val();}).get();
var formData = {
'from' : 'serviceUpdate',
'user_id' : '<?php echo $mainUser->id; ?>',
'services_id' : localStorage.getItem("formId"),
'update_services_name' : $('.'+localStorage.getItem("formId")+' input[name=update_service_name]').val(),
'update_services_description' : $('.'+localStorage.getItem("formId")+' textarea[name=update_service_description]').val(),
'update_services_price' : $('.'+localStorage.getItem("formId")+' input[name=update_service_price]').val(),
'update_services_duration' : $('.'+localStorage.getItem("formId")+' input[name=update_service_duration]').val(),
'update_services_category' : updateCategoriesId,
'update_services_staff' : updateStaffId
};
$.ajax({
type : 'POST',
url : 'ajax/ServicesAjax.php',
data : formData,
dataType : 'json',
encode : true
})
// using the done promise callback
.done(function(data) {
if(data['success'] == true) {
toastr.success("Information updated successfuly!", "Services");
}
})
// using the fail promise callback
.fail(function(data) {
// show any errors
// best to remove for production
console.log(data);
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
The problem is that it's only works with last row. First row, second, 5 , 10 then opens information and edit field value, on blur it don't work. But last row works perfectly. Where can the problem be ?
UPDATED
PROBLEM SOLVE, I add my ajax in $('tr').click and change localStore with var servicesUpdateId = $(this).attr('data');. Maybe the problem was localStore. But in console, it always shows true value.
Replace
$('.'+localStorage.getItem("formId")+' input, .'+localStorage.getItem("formId")+' textarea').blur(function(event) {
with
$('.'+localStorage.getItem("formId")+' input, .'+localStorage.getItem("formId")+' textarea').on("blur",function(event) {
As .blur() functions is bind only with the elements which are loaded for the first time during page load.
But when you make html new elements in an existing page using ajax you need to bind the event again but this looks a boring task.
For this use jQuery.on() , and pass event name as first param, and rest same as .bind()/.click() or any other event functions.
So its better to use jQuery.on("eventName").
PROBLEM SOLVE, I add my ajax in $('tr').click and change localStore with var servicesUpdateId = $(this).attr('data');. Maybe the problem was localStore. But in console, it always shows true value
I am trying to pass my JavaScript variable using Ajax into my PHP script but that doesn't work it given me error that it is undefined index. both codes are in different files but both of them are accessible on the main page.
Here's my script.php
<script>
function get_child_options(){
var parentID = jQuery('#parent').val();
jQuery.ajax({
url: '/**/**/**/child_categories.php',
type: 'POST',
data: {parentID : parentID},
success: function(data){
jQuery('#child').html(data);
},
error: function(){alert("Something Went Wrong with child options. ")},
});
}
jQuery('select[name="parent"]').change(get_child_options);
</script>
And this is my php file
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/ **/core/init.php'; //Including database path stored in init.php
$parentID = (int)$_POST['parentID'];
$childQuery = "SELECT * FROM categories WHERE parent = '$parentID' ORDER BY category";
ob_start();
?>
<option value="">Select <strong>Child</strong> Category</option>
<?php while ($child = mysqli_fetch_assoc($childQuery)): ?>
<option value="<?= $child['id']; ?>"><?= $child['category']; ?></option>
<?php endwhile; ?>
<?php
echo ob_get_clean();
?>
in script the #parent is a form id i am passing to javascript using jQuery.
because of variable is not accessible PHP is not running query.
This is my products.php the main where page where this is happening
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/Online Store/core/init.php'; //Including database path stored in init.php
include 'includes/head.php'; //Including header
include 'includes/navigation.php'; //Including Navigation bar
include 'includes/script.php';
if (isset($_GET['add'])) {
$brandQuery = $db->query("SELECT * FROM brand ORDER BY brand");
$parentQuery = $db->query("SELECT * FROM categories WHERE parent = 0 ORDER BY category");
?>
<h2 class="text-center">Add A New Product</h2><hr />
<form action="products.php?add=1" method="post" enctype="multipart/form-data">
<div class="form-group col-md-3">
<label for="title">Title*:</label>
<input type="text" class="form-control" id="title" name="title" value="<?= ((isset($_POST['title']))?sanitize($_POST['title']):''); ?>" placeholder="Add a title" />
</div>
<div class="form-group col-md-3">
<label for="brand">Brand*: </label>
<select class="form-control ">
<option value="" <?= ((isset($_POST['brand']) && $_POST['brand'] == '')?' selected':''); ?> >Select Brand</option>
<?php while($brand = mysqli_fetch_assoc($brandQuery)): ?>
<option value="<?= $brand['id']; ?>" <?= ((isset($_POST['brand']) && $_POST['brand'] == $brand['id'])?' selected':''); ?> ><?= $brand['brand'] ?></option>
<?php endwhile; ?>
</select>
</div>
<div class="form-group col-md-3">
<label for="parent">Parent Category*: </label>
<select class="form-control" id="parent" name="parent">
<option value="" <?= ((isset($_POST['parent']) && $_POST['parent'] == '')?' select':''); ?> >Select <strong>Parent</strong> Category</option>
<?php while($parent = mysqli_fetch_assoc($parentQuery)): ?>
<option value="<?= $parent['id']; ?>" <?= ((isset($_POST['parent']) && $_POST['parent'] == $parent['id'])?' select':''); ?> ><?= $parent['category']; ?></option>
<?php endwhile; ?>
</select>
</div>
<div class="form-group col-md-3">
<label for="child">Child Category*: </label>
<select id="child" name="child" class="form-control"></select>
<?php include $_SERVER['DOCUMENT_ROOT'].'/Online Store/admin/parsers/child_categories.php'; ?>
</div>
<div class="form-group col-md-3">
<label for="price">Price*: </label>
<input type="text" id="price" name="price" class="form-control" value="<?= ((isset($_POST['price']))?sanitize($_POST['price']):''); ?>" />
</div>
<div class="form-group col-md-3">
<label for="list_price">List Price*: </label>
<input type="text" id="list_price" name="list_price" class="form-control" value="<?= ((isset($_POST['list_price']))?sanitize($_POST['list_price']):''); ?>" />
</div>
<div class="form-group col-md-3">
<label>Quantity & Sizes</label>
<button class="btn btn-default btn-info form-control" onclick="jQuery('#sizesModal').modal('toggle'); return false;">Quantity & Sizes</button>
</div>
<div class="form-group col-md-3">
<label for="sizes">Sizes & Quantity preview*: </label>
<input type="text" name="sizes" id="sizes" class="form-control" value="<?= ((isset($_POST['sizes']))?$_POST['sizes']:''); ?>" readonly/>
</div>
<div class="form-group col-md-6">
<label for="photo">Photo*: </label>
<input type="file" name="photo" id="photo" class="form-control" />
</div>
<div class="form-group col-md-6">
<label for="description">Description</label>
<textarea name="description" id="description" class="form-control" rows="6" placeholder="Description" ><?= ((isset($_POST['description']))?sanitize($_POST['description']):''); ?></textarea>
</div>
<div class="form-group pull-right">
<input type="submit" class="form-control btn btn-success" value="Add Product" />
</div>
<div class="clearfix"></div>
</form>
<?php
}else{
$sql = "SELECT * FROM products WHERE deleted = 0";
$presults = $db->query($sql);
$product = mysqli_fetch_assoc($presults);
// Featured product
if (isset($_GET['featured'])) {
$id = (int)$_GET['id'];
$featured = (int)$_GET['featured'];
$featuredSql = "UPDATE `products` SET `featured` = '$featured' WHERE `products`.`id` = '$product[id]' ";
$db->query($featuredSql);
// header('Location: products.php');
}
?>
<h2 class="text-center">Products</h2>
Add Product<div class="clearfix"></div>
<hr />
<table class="table table-bordered table-condensed table-striped">
<thead>
<th></th>
<th>Product</th>
<th>Price</th>
<th>Category</th>
<th>Featured</th>
<th>Sold</th>
</thead>
<tbody>
<?php
while($product = mysqli_fetch_assoc($presults)):
$childID = $product['categories'];
$catSql = "SELECT * FROM categories WHERE id = '$childID'";
$result = $db->query($catSql);
$child = mysqli_fetch_assoc($result);
$parentID = $child['parent'];
$pSql = "SELECT * FROM categories WHERE id = '$parentID'";
$presult = $db->query($pSql);
$parent = mysqli_fetch_assoc($presult);
$category = $parent['category'].'~'.$child['category'];
?>
<tr>
<td>
<span class= " glyphicon glyphicon-pencil"></span>
<span class= " glyphicon glyphicon-remove-sign"></span>
</td>
<td><?= $product['title']; ?></td>
<td><?= money($product['price']) ?></td>
<td><?= $category; ?></td>
<td><a href="products.php?featured=<?= (($product['featured'] == 0)?'1':'0'); ?>&id =<?= $product['id']; ?>" class=" btn btn-sx btn-default">
<span class=" glyphicon glyphicon-<?= (($product['featured'] == 1)?'minus':'plus'); ?>"></span>
</a>  <?= (($product['featured'] == 1)?'Featured':''); ?></td>
<td>0</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<?php
}
include 'includes/footer.php'; //Including footer
?>
Is there any other way to do it? What I am trying to do is when user selects parent category I want child category to arrange as per parent category.
Try this:
<script>
function get_child_options(){
var parentID = $(this).val();
jQuery.ajax({
url: '/**/**/**/child_categories.php',
type: 'POST',
data: {'parentID' : parentID},
success: function(data){
jQuery('#child').html(data);
},
error: function(){alert("Something Went Wrong with child options. ")},
});
}
jQuery('select[name="parent"]').change(get_child_options);
</script>
Getting the Value by $(this) and putting single quotes around parentID data: {'parentID' : parentID},
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
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");
}
});
});