i always get the last selected value in hidden field - javascript

I am trying to pass the selected value into a hidden field but I always get the last value of option.
<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 selectboxit" style="width:100%;">
<?php
foreach($sections as $row):
?>
<option value="<?php echo $row['section_id'];?>"><?php echo $row['name'];?></option>
<?php endforeach;?>
</select>
</div>
</div>
<input type="text" name="section_id" value="<?php echo $row['section_id']?>">
<div class="form-group">
<label class="col-sm-3 control-label"><?php echo get_phrase('subject');?></label>
<div class="col-sm-5">
<select name="subject_id" class="form-control selectboxit" style="width:100%;">
<?php
$subjects = $this->db->get_where('enroll' , array('section_id' => $section_id))->result_array();
foreach($subjects as $row):
?>
<option value="<?php echo $row['student_id'];?>"><?php echo $row['name'];?></option>
<?php endforeach;?>
</select>
</div>
</div>
i want to pass the hidden field value to query inside the second dropdown how to do this

You can not directly pass section_id value to a text field, because it will always give last section_id. You should use below jquery to assign selected option value to text field:
$(document).ready(function () {
$('.selectboxit').on('change', function() {
$('#section_id').val(this.value);
})
});

Related

Adding Items dynamically with dependant select options that fetch from the database

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() });

how to show comma separated values in form

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

3 dynamic combobox use php and jquery

Need help...
How if I want to make 3 select options use jquery,
Parent
Child
Grandchild
Can anyone help?
I will appreciate your help...
This is my code:
<?php
$parentQuery = $db->query("SELECT * FROM kategori WHERE parent = 0 ORDER BY nama_kategori");
$kategori = ((isset($_POST['parent']) && !empty($_POST['parent']))?sanitize($_POST['parent']):'');
?>
<div class="form-group col-md-3">
<label for="parent">Kategori 1:</label>
<select class="form-control" id="parent" name="parent">
<option value="" <?php echo (($kategori =='')?'selected':''); ?>> Select</option>
<?php while($p = mysqli_fetch_assoc($parentQuery)): ?>
<option value="<?php echo $p['id_kategori'];?>" <?php echo (($kategori == $p['id_kategori'])?'selected=':''); ?>>
<?php echo $p['nama_kategori'];?>
</option>
<?php endwhile; ?>
</select>
</div>
<div class="form-group col-md-3">
<label for="child">Kategori 2:</label>
<select class="form-control" name="child" id="child"></select>
</div>
<div class="form-group col-md-3">
<label for="child">Kategori 3:</label>
<select class="form-control" name="grandchild" id="grandchild"></select>
</div>

How to parse large strings of html into Javascript with php echo variable

I have a javascript function that displays html code that is stored in the mysql database into CKeditor <textarea>. When a user selects any of the options, the mysql query is meant to echo the chunk of html code into the javascript as a php variable.
The select option works really fine in selecting the echoed variables from the javascript. The problem here is that, when i saved plain text into the database they were displayed but when i saved html codes into the database, the javascript refuses to display it.
I have tried several ways to echo the html string into the javascript such as:
<?php echo json_encode($fbilling); ?> \\Accepts Only Plain Texts Not HTML Codes
'<?php echo decodeURI(rawurlencode($freply)); ?>' \\Refuses To load Page
'<?php echo htmlspecialchars_decode(rawurlencode($freply)); ?>' \\Changes HTML Codes To Characters Like :%3Ctable%20data-module%3D%22header%22%20data
'<?php htmlspecialchars(json_encode($freply)); ?>' \\ No Value is Displays, Just Empty
'<?php echo htmlspecialchars(json_encode($freply)); ?>' \\ No Value is Displays, Just Empty
'<?php echo htmlspecialchars(rawurlencode($freply)); ?>' \\Changes HTML Codes To Characters Like :%3Ctable%20data-module%3D%22header%22%20data
This is my code:
var Code = new Array("", <?php echo json_encode($fwelcome); ?>, <?php echo json_encode($fbilling); ?>, <?php echo json_encode($freply); ?>, <?php echo json_encode($fdelivery); ?>);
function change() {
var ID = formconteudo.message.options[formconteudo.message.selectedIndex].value;
CKEDITOR.instances.editor1.setData('<p>' + Code[ID] + '</p>');
}
<div class="col-md-4">
<div class="form-group">
<?php
$sql3="SELECT * FROM email WHERE id='1'";
$result3=mysql_query($sql3) or die(mysql_error());
$rwsf= mysql_fetch_array($result3);
$fwelcome= $rwsf[3];
$freply= $rwsf[2];
$fbilling= $rwsf[1];
$fdelivery= $rwsf[4];
?>
<label>Email Templates: </label>
<select name="message" onChange="change();" class="form-control select2 required" style="width: 100%;">
<option disabled selected>Click To Select</option>
<option value="1">Welcome Email</option>
<option value="2">Billing Email</option>
<option value="3">Basic Reply Email</option>
<option value="4">Delivery Process Email</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" name="subject" placeholder="Subject" class="form-control required">
</div>
</div>
</div>
<textarea id="editor1" name="editor1" rows="10" cols="80">Select your mail design from the 'Email' drop down list above.</textarea><br>
<div class="form-wizard-buttons">
<button type="submit" class="btn btn-success" style="border:0px"><i class="fa fa-send"> Send Mail</i></button>
</div>
Hi as you have html content, you can follow below process to get html and send it to the function as parameter.
<div class="col-md-4">
<div class="form-group">
<?php
$sql3="SELECT * FROM email WHERE id='1'";
$result3=mysql_query($sql3) or die(mysql_error());
$rwsf= mysql_fetch_array($result3);
$fwelcome= $rwsf[3];
$freply= $rwsf[2];
$fbilling= $rwsf[1];
$fdelivery= $rwsf[4];
?>
<label>Email Templates: </label>
<select name="message" onChange="change();" class="form-control select2 required" style="width: 100%;">
<option disabled selected>Click To Select</option>
<option value="1">Welcome Email</option>
<option value="2">Billing Email</option>
<option value="3">Basic Reply Email</option>
<option value="4">Delivery Process Email</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" name="subject" placeholder="Subject" class="form-control required">
</div>
</div>
</div>
<textarea id="editor1" name="editor1" rows="10" cols="80">Select your mail design from the 'Email' drop down list above.</textarea><br>
<div class="form-wizard-buttons">
<button type="submit" class="btn btn-success" style="border:0px"><i class="fa fa-send"> Send Mail</i></button>
</div>
<div name="fwelcome_content">
<?php echo $fwelcome; ?>
</div>
<div name="fbilling_content">
<?php echo $fbilling; ?>
</div>
<div name="freply_content">
<?php echo $freply; ?>
</div>
<div name="fdelivery_content">
<?php echo $fdelivery; ?>
</div>
and then in javascript
var Code = new Array();
window.onload = function(e){
Code = new Array("", getHTMLContent("fwelcome_content"), getHTMLContent("fbilling_content"), getHTMLContent("freply_content"), getHTMLContent("fdelivery_content"));
}
function change() {
var ID = formconteudo.message.options[formconteudo.message.selectedIndex].value;
CKEDITOR.instances.editor1.setData('<p>' + Code[ID] + '</p>');
}
function getHTMLContent(elementId){
var htmlContent = document.getElementsByName(elementId)[0].innerHTML;
document.getElementsByName(elementId)[0].remove();
return htmlContent;
}

SelectBox getID

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.

Categories

Resources