I am trying to get the id of a selection of a select box, however was unable'm confused, can someone help me?
Code of Selectbox:
Edited SelectBox Code :
<li class="fields">
<div>
<div class="field">
<div class="form-group">
<label class="required" for="type_id"><?php echo $this->__('Occasion') ?><em>*</em></label>
<div class="input-box">
<select id="type_id" name="type_id" title="<?php echo $this->__('Occasion') ?>" class="validate-select form-control" onChange="criaDados(), showId(<?php $this->getId() ?>)" <?php if (!is_null ($_e->getId())) { echo "style='display: none;'"; } ?> >
<option value=""><?php echo $this->__('Please select occasion') ?></option>
<?php foreach($_e->getTypes() as $k=>$v):?>
<option value="<?php echo $k ?>" <?php if($_e->getTypeId() == $k) echo 'selected'?>><?php echo $this->htmlEscape($v) ?></option>
<?php endforeach; ?>
</select>
<input type="text" value="<?php echo $_e->getTypes()[$_e->getTypeId()] ?>" class="form-control" disabled <?php if (is_null ($_e->getId())) { echo "style='display: none;'"; } ?> />
</div>
</div>
</div>
<div class="field">
<div class="form-group">
<label class="required" for="date"><?php echo $this->__('Date') ?><em>*</em></label>
<div class="input-box">
<div class="input-range input-date">
<?php echo $this->getDateInput($_e->getDate()) ?>
</div>
</div>
</div>
</div>
</div>
</li>
Edited Javascript
function showId(id)
{
var id_val = $("#" + id).val();
alert(id_val);
}
if you want to get the id of the selected item then add an onchange event in select
like onchange="showid(this)"
then javascript
function showid(ids) {
console.log(ids[ids.selectedIndex].value); // get value
console.log(ids[ids.selectedIndex].id); // get id
}
if you want jquery solution then do something like below
$('#type_id').change(function(){
alert($(this).find('option:selected').attr('id'));
});
You can replace content in function parameter with this.id like below
<div class="field">
<div class="form-group">
<label class="required" for="type_id"><?php echo $this->__('Occasion') ?><em>*</em></label>
<div class="input-box">
<select id="type_id" name="type_id" title="<?php echo $this->__('Occasion') ?>" class="validate-select form-control" onChange="criaDados(), showId('this.id') { echo "style='display: none;'"; } ?> >
<option value=""><?php echo $this->__('Please select occasion') ?></option>
<?php foreach($_e->getTypes() as $k=>$v):?>
<option value="<?php echo $k ?>" <?php if($_e->getTypeId() == $k) echo 'selected'?>><?php echo $this->htmlEscape($v) ?></option>
<?php endforeach; ?>
</select>
<input type="text" value="<?php echo $_e->getTypes()[$_e->getTypeId()] ?>" class="form-control" disabled <?php if (is_null ($_e->getId())) { echo "style='display: none;'"; } ?> />
</div>
</div>
</div>
Then you can use it
function showId(id)
{
var id_val = $("#" + id).val();
alert(id_val);
}
not sure what you mean by 'get' but I'm guessing JavaScript
document.getElementById('type-id');
showId(document.getElementById('type-id'));
I see you use Bootstrap, so jQuery is not far away.
How about this:
function showId(id){
var v = $("#" + id).val();
alert(v);
}
or something like this:
$( "#"+id+" option:selected" ).text();
Second one gets the selected text, the other one the selected value of the selected option.
Related
I have created a form like this that fetches data from the database
<select name="notelinecategory" id="category"class="form-control sl" required="true" onChange="getdistrict(this.value);">
<option value="<?php echo $row['nc_id'];?>">Select Diagnosis</option>
<?php $query =mysqli_query($con,"SELECT * FROM notelinecategory");
while($row=mysqli_fetch_array($query))
{ ?>
<option value="<?php echo $row['nc_id'];?>"><?php echo $row['category'];?></option>
<?php
}
?>
</select></div>
<div class="form-group">
<div class="col">
<select name="noteline[]" class="form-control sl" required="true" class="js-example-basic-multiple" multiple="multiple" id="notelines" style="height: 100px">
<option value=""></option>
</select>
The above fetches data and adds dynamically to a text area.
I want to insert multiple field's data to the database and i find it hard to capture options from the dependent dropdown list. Here is my script:
$('#addrow').click(function(){
var length = $('.sl').length;
var i = parseInt(length)+parseInt(1);
var newrow = $('#next').append('<div class="wrap-content container" id="container'+i+'"><div class="row"><div class="col-sm-6"><div class="panel-body"><p style="color:red;"><?php echo htmlentities($_SESSION['msg']);?>
<?php echo htmlentities($_SESSION['msg']="");?></p><form><div class="form-group align-self-start"><label for="notelinecategory">Choose a Diagnosis</label><select name="notelinecategory" class="form-control" required="true" id="category'+i+'"onChange="getdistrict(this.value);"><option value="<?php echo $row['nc_id'];?>'+i+'">Select Diagnosis</option><?php $query =mysqli_query($con,"SELECT * FROM notelinecategory");
while($row=mysqli_fetch_array($query))
{ ?><option value="<?php echo $row['nc_id'];?>"><?php echo $row['category'];?></option> <?php } ?>
</select></div><div class="form-group"><div class="col"><select name="noteline[]'+i+'" class="form-control" required="true" class="js-example-basic-multiple" multiple="multiple" id="notelines'+i+'" style="height: 100px"><option value=""></option></select></div></div></form></div> </div><div class="row"><div class="col-sm-6"><div class="panel-body"><p style="color:red;"><?php echo htmlentities($_SESSION['msg']);?>
<?php echo htmlentities($_SESSION['msg']="");?></p><form role="form" name="notelines'+i+'" method="post"><label for="Select_patients">select Patient Name </label><select name="PatientName'+i+'" class="form-control" required="true"> <option value="'+i+'">Select Patient</option> <?php
$docid=$_SESSION['id'];
$ret=mysqli_query($con,"select * from tblpatient where Docid='$docid'");
while($row=mysqli_fetch_array($ret))
{
?>
<option value="<?php echo htmlentities($row['PatientName']);?>"> <?php echo htmlentities($row['PatientName']);?>
</option> <?php } ?>
</select><br><textarea id="CAPoutput'+i+'" rows="4" cols="75" name="notelines"><?php if(isset($_SESSION['textentered']) && $_SESSION['textentered'] !=''){echo $_SESSION['textentered'];} ?></textarea><input type="button" class="btnRemove btn-danger" value="Remove"/></div><br>');
});
// Removing event here
$('body').on('click','.btnRemove',function() {
$(this).closest('div').remove() });
I am using coordinator php framework with javascript and ajax. comma separated values is not show but single values working fine . i have table field like (edit_coach = 9,10,11), (edit_depot = 5,Spur,SPJ) and edit_task_type = 5 please share valuable idea...
database
edit_coach = 9,10,11 //not show data
edit_depot = 5,Spur,SPJ //not show data
edit_task_type = 5 //working fine
JavaScript Code here
function edit_assign_train(val)
{
$.ajax({
url: "<?php echo base_url(); ?>edit_assign_train",
type: "post",
data: "atrain_id="+val,
success: function (response)
{
var res = JSON.parse(response);
console.log(res);
$('#edit_train_no').val(res[0]['train_no']);
$('#edit_depot').val(res[0]['depot_id']+'-'+res[0]['depot_code']+'-'+res[0]['depot_name']).trigger('change');// not working
$('#edit_coach').val(res[0]['coach']).trigger('change');// not working
$('#edit_task_type').val(res[0]['task_type']).trigger('change');//working fine
$('#edit_tot_coach').val(res[0]['tot_coach']);
$('#edit_janitor').val(res[0]['janitor']);
$('#edit_time').val(res[0]['time_val']);
$('#edit_id').val(res[0]['id']);
}
});
HTML Code here
<div class="row">
<label class="col-sm-4 col-form-label text-right">Depot : </label>
<div class="col-sm-8">
<div class="form-group">
<select id="edit_depot" class="form-control">
<?php foreach ($depot_val as $list3) { ?>
<option value="<?php echo $list3['id'] ?>-<?php echo $list3['depot_code'] ?>-<?php echo $list3['depot_name'] ?>"><?php echo $list3['depot_name'] ?></option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-4 col-form-label text-right">Coaches : </label>
<div class="col-sm-8 pt-2">
<select class="form-control tasktype-select" id="edit_coach" name="tasktype[]" multiple="multiple" style="width: 100%">
<option value="">Select</option>
<?php foreach ($coach_val as $list2) { ?>
<option value="<?php echo $list2['id'] ?>"><?php echo $list2['coach_name'] ?></option>
<?php } ?>
</select>
</div>
</div><br>
<div class="row">
<label class="col-sm-4 col-form-label text-right">Task Type : </label>
<div class="col-sm-8">
<select class="form-control tasktype-select" id="edit_task_type" name="tasktype[]" multiple="multiple" style="width: 100%">
<option value="">Select</option>
<?php foreach ($res_val as $list1) { ?>
<option value="<?php echo $list1['id'] ?>"><?php echo $list1['task_type'] ?></option>
<?php } ?>
</select>
</div>
</div>
Try this:
$('#edit_depot').val(res[0]['depot_id']).trigger('change');
i have a dynamic form that show data from database and a javascript code to show and hide some fields but the javascript code works only the first result
here is php code
<?php
$arr = select::mobiles($id);
foreach ($arr as $aa) { ?>
<div class="col-sm-10">
<div class="col-sm-2 bring_right">
<input type="hidden" name="p_name2[<?php $counter; ?>]"
value="<?php echo $aa['name']; ?>"><?php echo $aa['name'] ?>
</div>
<div class="col-sm-4 bring_right">
<input type="radio" id="general_radio" name="">
<label for="">general</label>
<input type="radio" onclick="showMe('variant', this)" id="variant_radio" name="">
<label for="">variant</label>
</div>
<div class="col-sm-6 bring_right" id="variant" style="display: none">
<?php
$branches = select::mobile_branches();
// print_r($branches);
foreach ($branches as $b) {
?>
<div class="col-sm-4 bring_right"><label for=""><?php echo $b['name'] ?></label></div>
<div class="col-sm-8">
<select class="form-control input-sm"
name="p_value[<?php echo $aa['name']; ?>][<?php $counter; ?>]">
<?php
$pid = select::property($aa['name']);
$arr2 = select::properties($pid);
foreach ($arr2 as $aa2) { ?>
<option value="<?php echo $aa2['name'] ?>" style="direction:ltr">
<?php echo $aa2['name'] ?></option>
<?php }
$counter++; ?>
</select>
</div>
<?php } ?>
</div>
<div class="col-sm-3 bring_right" id="general">
<select multiple class="form-control input-sm"
name="p_value[<?php echo $aa['name']; ?>][
<?php $counter; ?>]">
<?php
$pid = select::property($aa['name']);
$arr2 = select::properties($pid);
foreach ($arr2 as $aa2) { ?>
<option value="
<?php echo $aa2['name'] ?>">
<?php echo $aa2['name'] ?></option>
<?php }
$counter++; ?>
</select>
</div>
</div>
<?php } ?>
and the javascript code is
<script type="text/javascript">
function showMe(it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
$('#general').hide();
}
</script>
any help please??
Hey I think I got your problem. In your code see this part
foreach ($arr as $aa) { ?>
......
<div class="col-sm-6 bring_right" id="variant" style="display: none">
Here you are having same id for multiple div just try following changes and you'll be able to do that
foreach ($arr as $key => $aa) { ?>
......
<input type="radio" onclick="showMe('variant<?php echo $key; ?>', this)" id="variant_radio" name="">
........
<div class="col-sm-6 bring_right" id="variant<?php echo $key; ?>" style="display: none">
Let me know if I am not getting your point or if it is not working.
I have 3 dependable dropdown boxes and first i select the class and it will select all the sections belong to that class. and when i select the respective section i want to get the students in that section...
<div class="form-group"> <label class="col-sm-3 control-label"><?php echo get_phrase('class'); ?></label>
<div class="col-sm-9">
<select name="class_id" class="form-control selectboxit" id="classid" onchange="return get_student_section(this.value)">
<option value=""><?php echo get_phrase('select_class'); ?></option>
<?php
$classes = $this->db->get('class')->result_array();
foreach ($classes as $row):
print_r($classes);
?>
<option value="<?php echo $row['class_id']; ?>"><?php echo $row['name']; ?></option>
<?php endforeach; ?>
</select> </div>
</div>
<div class="form-group"> <label class="col-sm-3 control-label"><?php echo get_phrase('section');?></label>
<div class="col-sm-5">
<select name="section_id" class="form-control" style="width:100%;"
id="student_selector_holder" onchange="get_class_section_students(this.value)">
<option value=""><?php echo get_phrase('select_class_first'); ?></option>
</select> </div>
</div>
<div class="form-group"> <label class="col-sm-3 control-label"><?php echo get_phrase('student'); ?></label>
<div class="col-sm-9">
<select name="student_id" class="form-control" style="width:100%;" id="student_selection_holder">
<option value=""><?php echo get_phrase('select_class_first'); ?></option>
</select> </div>
</div>
my ajax request looks alike this. what i want to do is when i select the section i want to trigger an ajax call with class_id and _section_id. this is my javascript code
function get_student_section(class_id) {
$.ajax({
url: '<?php echo base_url(); ?>index.php?admin/get_student_section/' + class_id,
success: function(response) {
jQuery('#student_selector_holder').html(response);
}
});
}
function get_class_section_students(section_id) {
//Get
var class_id = $('#class_id').val();
alert("bla" + bla);
$.ajax({
url: '<?php echo base_url(); ?>index.php?admin/get_class_students_by_section/' + class_id + section_id,
success: function(response) {
jQuery('#student_selection_holder').html(response);
}
});
}
since you use jquery - i would attach any event handler to the selected element via jQuerys "on" function instead of using "onchange" directly
i try to give you an approach which should work
the js Code
var app = window.app || {};
app.autoLoad = function()
{
app.dropdownBuilder.initialize();
};
app.dropdownBuilder =
{
initialize : function()
{
var that = this;
$("#classid").on("change", function() {
that.loadStudentSection($(this).val());
});
$("#student_selector_holder").on("change", function() {
that.loadClassSectionStudents($("#classid").val(), $(this).val());
});
},
loadStudentSection : function(class_id)
{
$.ajax({
url: app.constants.baseUrl+'index.php?admin/get_student_section/' + class_id +'/',
success: function(response)
{
$('#student_selector_holder').html(response);
}
});
},
loadClassSectionStudents : function(class_id, section_id)
{
$.ajax({
url: app.constants.baseUrl+'index.php?admin/get_class_students_by_section/' + class_id +'/'+ section_id+'/',
success: function(response) {
$('#student_selection_holder').html(response);
}
});
}
};
app.constants =
{
baseUrl : "<?=base_url(); ?>"
};
$(document).ready(function () {
app.autoLoad();
});
the view looked okay - i removed the onchange events
<div class="form-group"> <label class="col-sm-3 control-label"><?php echo get_phrase('class'); ?></label>
<div class="col-sm-9">
<select name="class_id" class="form-control selectboxit" id="classid">
<option value=""><?php echo get_phrase('select_class'); ?></option>
<?php
$classes = $this->db->get('class')->result_array();
foreach ($classes as $row):
?>
<option value="<?php echo $row['class_id']; ?>"><?php echo $row['name']; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="form-group"> <label class="col-sm-3 control-label"><?php echo get_phrase('section');?></label>
<div class="col-sm-5">
<select name="section_id" class="form-control" style="width:100%;" id="student_selector_holder">
<option value=""><?php echo get_phrase('select_class_first'); ?></option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"><?php echo get_phrase('student'); ?></label>
<div class="col-sm-9">
<select name="student_id" class="form-control" style="width:100%;" id="student_selection_holder">
<option value=""><?php echo get_phrase('select_class_first'); ?></option>
</select>
</div>
</div>
you have to pass only this in onchange function like onchange="get_class_section_students(this)"
and in JavaScript use section_id.value
I have this code for Jquery i just started working with Jquery but i have a bit of knowledge with Javascript.
<script>
$(document).ready(function(){
$("#d_or_t").val('navbar');//<?php echo "cms18"; ?>
// if ('<?php $key ?>'== '<?php ?>') {};
});
$('#selector').on('change',function(){
//alert($(this).find("option:selected").html()) ;
var data = document.getElementById('url_option');
var current = $(this).find("option:selected").html();
alert(current);
//alert(current);
//(data.dataset.domains);
});
</script>
And my HTML select box is this one i have three of them and i want that when i change the URL select box the other 2 select box change to an data
<form action="php-json.php" id="form" method="post">
<select name="selector" id="selector" class="form-control">
<!-- opzoeken wat de colon : betekend daar -->
<?php foreach ($aUrls as $key => $value)
: ?>
<option id="url_option" data-domains="<?php echo $aDomains[$key]; ?>" data-template="<?php echo $aTemplates[$key]; ?>" value="<?php echo $value; ?>">
<?php echo $value;?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="col-xs-12 col-md-3 col-lg-3">
<select name="d_or_t" id="d_or_t" class="form-control">
<?php foreach ($aDomains as $key => $value) : ?>
<option value="<?php echo $value; ?>"><?php echo $value; ?></option><?php endforeach; ?>
</select>
</div>
<div class="col-xs-12 col-md-3 col-lg-3">
<select name="t_or_t" id="d_or_t" class="form-control">
<?php foreach ($aTemplates as $key => $value) : ?>
<option value="<?php echo $value; ?>"><?php echo $value;?></option><?php endforeach; ?>
</select>
</div>
<div class="col-xs-12 col-md-3 col-lg-3">
<button type="submit" class="btn btn-default" value="veranderen">Veranderen</button>
</div>
</div>
</form>