I have two select box values, Sales Manager 1 and Sales Manager 2. I need to hide selected option value of Sales Manager 1 in Sales Manager 2. Both options fetch value from the db. How can I implement it?
View File :
<div class="form-group">
<label for="sales">Sales Manager 1</label>
<select name="erp_customer[manager_id]" id="manager_id" class="form-control select2" data-validation="required" data-validation-error-msg="Sales Manager is required" placeholder="Select Manager">
<option value="">Select Sales Manager</option>
<?php
foreach ($sale_manager as $mg) { ?>
<option value="<?php echo $mg->manager_id; ?>" <?php echo (!empty($customer) && $customer->manager_id == $mg->manager_id) ? 'selected' : ''; ?>><?php echo ucfirst(mb_strtolower($mg->sale_fname)); ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label for="sales">Sales Manager 2</label>
<select name="erp_customer[manager_id1]" id="manager_id2" class="form-control select2" data-validation="required" data-validation-error-msg="Sales Manager is required" placeholder="Select Manager">
<option value="">Select Sales Manager</option>
<?php
foreach ($sale_manager as $mg) { ?>
<option value="<?php echo $mg->manager_id; ?>" <?php echo (!empty($customer) && $customer->manager_id1 == $mg->manager_id) ? 'selected' : ''; ?>><?php echo ucfirst(mb_strtolower($mg->sale_fname)); ?></option>
<?php } ?>
</select>
</div>
Option values will be like 1, 2, 3, 4. I get the name from another table where 1="Ram" 2="ragu" so how can I hide option value 1 in sales manager 2 when it is selected. I tried this code but helps only on the first selection. Once I try to select again, only the first time selected value is getting disabled.
$('.form-control[id=manager_id]').on('change', function(e){
var thisVal = $(this).val();
$('.form-control[id=manager_id2] option').each(function(){
if(thisVal == $(this).attr('value')){
$(this).attr('disabled', 'disabled');
} else {
$(this).removeAttr('disabled');
}
})
})
My controller:
public function addcustomer(){
$data["title"] = "Add New Customer";
$data["sale_manager"] = $this->customer_model->getsales_managerlist();
load_default_template('customer/addnew',$data,$this);
echo $this->template->render("", true);
}
My model:
public function getsales_managerlist(){
$this->db->select("*")->from('erp_manager')->where("status", 1);
$query = $this->db->get();
return $query->result();
}
I think you really just need to not do an else in your loop for disabling. Just remove it by default, then set it again if the value matches. Here is a demo of the below script: https://jsfiddle.net/wf82Lc3j/
$(function(){
$(this).on('change', '.form-control[id=manager_id]', function(e){
// Get current value
var thisVal = $(this).val();
// Get the second select obj
var thatObj = $('.form-control[id=manager_id2]');
// Loop options
$.each(thatObj.children(), function(k,v){
// Just remove disabled right off the start
$(v).attr('disabled', false);
// If value equals current
if($(v).attr('value') == thisVal) {
// If not on the default select option
if(thisVal != '') {
// Disable the option
$(v).attr('disabled', true);
// If the user has already select this item before selecting from the first menu
if($(v).is(":selected")) {
// Reset the selection to default
thatObj.val('');
}
}
}
});
});
});
Related
I have this dynamic dropdown which fetches result on selection of one select menu, but the challenge I am facing after it auto populates the results on the second dropdown on submit of form the value of second select disappears. How to make it not disappear even after submit?
Here is my HTML & PHP
<div class="row form-group">
<div class="col-md-12">
<label class="sr-only" for="job_category">Select Job Category</label>
<select name="job_category" id="category" class='form-control'>
<option value='' selected='selected' disabled='disabled'>Select Job Category</option>
<?php
$sql="select * from job_category ";
foreach ($db->query($sql) as $row) {
?>
<option value='<?php echo $row[cat_id]; ?>' <?php if($job_category == ''.$row[cat_id].'') echo 'selected="selected"'; ?>><?php echo $row[cat_name]; ?></option>
<?php
}
?>
</select>
</div>
</div>
<div class='row form-group'>
<div class='col-md-12'>
<label class='sr-only' for='job_subcategory'>Select Job Industry</label>
<select name='job_subcategory' id='sub-category' class='form-control'>
<option value='' selected='selected' disabled='disabled'>Select Job Industry</option>
</select>
</div>
</div>
Here is my JQ
$(document).ready(function() {
$('#category').change(function(){
var cat_id=$('#category').val();
$('#sub-category').empty();
$.get('fetchCategories.php',{'cat_id':cat_id},function(return_data){
$.each(return_data.data, function(key,value){
$("#sub-category").append("<option value='" + value.subcat_id +"'>"+value.subcat_name+"</option>");
});
}, "json");
});
});
And my fetchCategories.php
#$cat_id=$_GET['cat_id'];
//$cat_id=2;
/// Preventing injection attack ////
if(!is_numeric($cat_id)){
echo "Data Error";
exit;
}
/// end of checking injection attack ////
require "includes/config.php";
$sql="select subcat_name,subcat_id from job_subcategory where cat_id='$cat_id'";
$row=$db->prepare($sql);
$row->execute();
$result=$row->fetchAll(PDO::FETCH_ASSOC);
$main = array('data'=>$result);
echo json_encode($main);
You can use localStorage to store the current value which is selected by user on change of select-box and then when your page gets reload just fetch the stored data from localStorage and then call your ajax to retrieve required data.
Your jquery code will somewhat look like below (Sorry for any syntax error) :
$(document).ready(function() {
//check if there is any value in localStorage
if (localStorage.getItem("save") != null) {
//get that value
var value = localStorage.getItem("save");
console.log(value);
//set value in selected box
$("#sub-category").val(value);
}
//onchange of subcategory
$('#sub-category').change(function() {
var values = $(this).val();
localStorage.clear(); //clear previous data
localStorage.setItem("save", values); //add data to storage
});
$('#category').change(function() {
var cat_id = $('#category').val();
$('#sub-category').empty();
$.get('fetchCategories.php', {
'cat_id': cat_id
}, function(return_data) {
$.each(return_data.data, function(key, value) {
$("#sub-category").append("<option value='" + value.subcat_id + "'>" + value.subcat_name + "</option>");
});
}, "json");
});
});
When I am select dropdown option then does'not assign the value of selected option in hidden field.
Please correct Where I am doing wrong. Thanks in advance.
<?php
include("../common/config.php");
$time = time();
$id=$_REQUEST['dr_id'];
$allEst = $db->select(array("*"),PREFIX."obligation_pharmacy","obligation_id IN ($id)");
}
?>
<script type="text/javascript">
function populate(unique,sel){
alert(sel.value);
$("#pharmacy_id"+unique).val(sel.value);
}
</script>
<select name="pharmacy_name[]" class="name" id="pharmacy_name<?php echo $time?>" style="width:180px; font-size:11px;" onchange="populate(<?php echo $time?>,this)">
<option value="">Select Pharmacy Name</option>
<?php
foreach($allEst as $ss)
{if($ss->pharmacy_name!=''){?>
<option value="<?php echo $ss->id;?>"><?php echo $ss->pharmacy_name; ?></option>
<?php }} ?>
</select>
<input type="hidden" name="pharmacy_id[]" id="pharmacy_id<?php echo $time?>" value="">
Using jQuery, usually something like this:
$('#my-select').change(function(){
var value = $(this).val();
$('#my-hidden-input').val(value);
});
$('#pharmacy_name').change(function(){
// get selected option value
var option_val = $( "#pharmacy_name option:selected" ).val();
// populate hidden field
$('#pharmacy_id').val(option_val);
}
I have a select2 control on a form, the control is populated by an Ajax call triggered by the user typing a value into the filter. This works great for any new entry on the form. The problem I have is when an entry is edited, the same form is used however I cannot select the default value as the form does not have any options by default.
Here's the form's markup:
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-shipping-country"><?php echo $entry_country; ?></label>
<div class="col-sm-10">
<select name="country_id" id="input-shipping-country" class="form-control">
<option value=""><?php echo $text_select; ?></option>
<?php foreach ($countries as $country) { ?>
<?php if ($country['country_id'] == $shipping_country_id) { ?>
<option value="<?php echo $country['country_id']; ?>" selected="selected"><?php echo $country['name']; ?></option>
<?php } else { ?>
<option value="<?php echo $country['country_id']; ?>"><?php echo $country['name']; ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-shipping-zone"><?php echo $entry_zone; ?></label>
<div class="col-sm-10">
<select name="zone_id" id="input-shipping-zone" class="form-control">
</select>
</div>
</div>
Below is the jQuery that I've written:
$(document).ready(function () {
$('#input-shipping-country').change(function () {
var i = $('#input-shipping-country').val();
$('#hiddenPaymentCountryId').val(i);
});
$('#input-shipping-country').select2({
placeholder: "--- Please Select ---",
allowClear: true
});
var mySelect = $('#input-shipping-zone');
$.each( function (val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
$('#input-shipping-zone').select2({
placeholder: "Select a suburb",
allowClear: true,
ajax: {
url: '../index.php?route=extension/total/shipping/country' ,
dataType: 'json',
delay: 250,
data: function (params) {
return {
country_id : (($("#hiddenShippingCountryId").val() == "") ? ($('#input-shipping-country').val()) : $("#hiddenShippingCountryId").val()),
filter: params.term + '%',
page: params.page
};
},
processResults: function (data, page) {
var zones = [];
data['zone'].forEach(function (d) {
zones.push({
id: d.zone_id,
text: d.name
});
});
return {
results: zones
};
},
},
minimumInputLength: 2,
});
});
The only thing I wish to do is have the previously selected option displayed to the user and this can be changed if desired. This is implemented on OpenCart and uses a custom model to retrieve filtered options.
In my first attempt to implement this, I found it easier to use a hidden field and populate this when a selection was made on the $("#input-shipping-country") so I've made another hidden field for the zone which is populated when the page loads:
<input type="hidden" id="hiddenShippingCountryId" value="">
<input type="hidden" id="hiddenShippingZoneId" value="<?php echo $shipping_zone_id; ?>">
So in theory, I need to simply set the value of the select box once the control is initialised but the documentation isn't very clear here, should I have a default option in my HTML?
After filling all values in select , set default value as
$('#input-shipping-country').val(1).change();//1 is value of select
i'm learning JavaScript and am working on a JavaScript function to calculate discount based on type of buyer i.e retailer/wholesaler & if it's cash or check payment. Here is the function
<script>
function sell()
{
var gross,net,tax,discount,unitprice,quatity,select2,select3;
unitprice=parseInt(form9.unitprice.value);
quantity=parseInt(form9.quantity.value);
select3=parseInt(form9.select3.value);
select2=parseInt(form9.select2.value);
gross=parseInt(form9.gross.value);
gross=unitprice*quantity
form9.gross.value=gross;
tax=0.16*gross
form9.tax.value=tax;
if(select2='Cash' && select3='Retailer')
discount=0.07*gross;
else if(select2='Cash' && select3='Wholesaler')
discount=0.1*gross;
else if(select2='Check')
discount=0*gross;
form9.discount.value=discount;
net=(gross-(discount+tax));
form9.net.value=net;
}
</script>
I created a dropdown menu for type of buyer, named it select2
<select name="select2">
<?php
do {
?>
<option value="<?php echo $row_rsCustomercategory['type']?>"><?php echo $row_rsCustomercategory['type']?></option>
<?php
} while ($row_rsCustomercategory = mysql_fetch_assoc($rsCustomercategory));
$rows = mysql_num_rows($rsCustomercategory);
if($rows > 0) {
mysql_data_seek($rsCustomercategory, 0);
$row_rsCustomercategory = mysql_fetch_assoc($rsCustomercategory);
}
?>
</select>
The select menu for type of sale is select3
<select name="select3" id="select3">
<?php
do {
?>
<option value="<?php echo $row_rsSaletype['type']?>"><?php echo $row_rsSaletype['type']?></option>
<?php
} while ($row_rsSaletype = mysql_fetch_assoc($rsSaletype));
$rows = mysql_num_rows($rsSaletype);
if($rows > 0) {
mysql_data_seek($rsSaletype, 0);
$row_rsSaletype = mysql_fetch_assoc($rsSaletype);
}
?>
</select>
Cash sales are discount at 7% retailer and 10% wholesaler, no discount for payment by check.
The Problem is that:
Upon viewing in a browser and clicking on the "Calculate" button nothing happens. Why is this?
I would appreciate any help whatsoever.
i want to pass selected option value in id to codeigniter controller.
<p>
<select id="quantity" name="quantity" tabindex="2" onchange="calculate(this)" required autofocus>
<option value="">Choose Your Quantity</option>
<?php
if($prodqty)
{
foreach($prodqty as $qty)
{
for($i = $qty->quantity_from; $i <= $qty->quantity_to; $i++)
{
?>
<option value="<?=$i?>" id="<?=$qty->discount?>"><?=$i?></option>
<?php } } } ?>
</select>
</p>
i am already getter selected option value, now i want to get id value also i.e. id="discount?>"
function add_cart_prod()
{
if(isset($_POST['submit']))
{
this is controller where i want to get id value
Use ajax call on change event of the selection of the options:
Just Changed your code little :
<select id="quantity" name="quantity" tabindex="2" onchange="calculate(this)" required autofocus>
<option value="0">Choose Your Quantity</option>
<?php
if( !empty($prodqty)):
foreach($prodqty as $qty):
for($i = $qty->quantity_from; $i <= $qty->quantity_to; $i++): ?>
<option value="<?php echo $i?>" id="<?php echo $qty->discount?>"><?php echo $i?></option>
<?php endfor;
endforeach;
endif; ?>
</select>
Your javascript function :
<script type="text/javascript">
function calculate(id)
{
var id=id;
$.ajax({
type:'POST',
url:'your controller/add_cart_prod',
data:{'id':id},
success:function(data){
// the next thing you want to do
}
});
}
</script>
Your Controller Function:
function add_cart_prod()
{
$id=$this->input->post('id',true);
//send this value to your model
}
If you subitted the data via POST, which I suppose, because you test the POST-Array, you should get them this way:
$this->input->get_post('quantity');
But perhaps you used in your HTML the option GET for the form submission, then this should work:
$this->input->get('quantity');
If you want to get both values XSS-clean you should add a second paramenter, which is set to TRUE:
$this->input->get_post('quantity',TRUE);
As discussed below you should change the value of the option to:
<option value="<?=$i?>_<?=$qty->discount?>"><?=$i?></option>
And then explode the array by this char: "_" to get the two values:
$valuearray = explode ( "_" , $this->input->get_post('quantity'));
$valuearray[0] should contain your $i-part and $valuearray[1] the discount.
Important is, that the delimiter-char cannot be a value of either $i or $qty->discount. Otherwise choose a different char
You should try this, maybe it will work, Inside the calculate(this) function:
var discount = $("select[name='quantity'] option:selected").attr('id');
alert( discount );
$("#discount").val( discount ); //this will save the discount value in the hidden field
EDIT:
Put a hidden field in your form to contain the discount value
<input type="hidden" name="discount" id="discount">
Now, submit the form as usual. Hope it helps.