See this image
I am using Image Picker plugin to select the image. I have an empty text area field below images. When user click an image, I want the value/description of that image to automatically copied to that field and also being able to edit.
And when I click un select that image, the field below should become empty.
I have got it working to some extent .
Problem
When I select image, the description get's copied into the field. which is fine. But when I un-select the same image, the description still stays there. And when I select different image, the description of different image than doesn't gets copied.
Here is my code.
HTML:
Images come from database.
<select class='image-picker timer-reasons' multiple="multiple" data-limit="1" name="timer-reason-selector" id="timer-reason-selector">
<?php
while ($row = mysqli_fetch_assoc($timer_reasons)) {
?>
<option data-img-src='../../css/timer-reasons/<?php echo $row['image_tmr']; ?>' style="width:30%;" value='<?php echo $row['description_tmr']; ?>'><?php echo $row['description_tmr']; ?></option>
<?php
}
?>
</select>
This is field where clicked image description/value should get populated and also editable
<textarea class="form-control" id="reason" value="" rows="2"></textarea>
I am using "Image-picker" class
JavaScript
This is my JavaScript
<script>
$(document).ready(function(){
//Set up the imagepicker select field
$("#timer-reason-selector").imagepicker({
limit:1,
hide_select:true,
show_label:false,
limit_reached:function(){
}
});
function check_enabled(){
//Get the value of the selected options
var timer_reason = $( "#timer-reason-selector" ).val();
if (timer_reason !=null){
$("#reason").text(timer_reason);
$("#reason").attr('value', timer_reason)
}else{
$("#reason").text('');
$("#reason").attr('value', '')
}
}
//Listen for selection changes and call the check_enabled function
$( "#timer-reason-selector" ).change(function() {
check_enabled();
});
});
</script>
According to the documentation you can use changed event of imagepicker itself like this:
$("#timer-reason-selector").imagepicker({
limit:1,
hide_select:true,
show_label:false,
limit_reached:function(){
},
changed: function(select, newValues, oldValues, event) {
// Do your stuff here
}
});
Related
I am using Jquery-nice-select plugin.(http://hernansartorio.com/jquery-nice-select/).
I have two select dropdowns. In the first one, I am displaying the country name form database and In second dropdown I am displaying the state name depending upon the country name.
I am able to display the both but the issue is, When I am selecting the country name then state name is displaying but that are not displaying inside select drop down. even I am not able to select it. Please check the below image.
Would you help me out in this?
Before
After selecting the country name
<?php
include('connection.php');
$country_list="SELECT id,name FROM countries";
/* create a prepared statement */
if ($stmt = $conn->prepare($country_list)) {
/* execute statement */
$stmt->execute();
/* bind result variables */
$stmt->bind_result($id, $country_name);
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/nice-select.css">
</head>
<body>
<!--country name-->
<select name="country_data" class="myselect form-control country_data">
<option value="" disabled selected>Select your country</option>
<?php
while ($stmt->fetch()) {?>
<option value="<?php echo $id;?>"><?php echo $country_name;?></option>
<?php }?>
</select>
<!--state name-->
<select name="state" class="myselect form-control state_get">
<option value=''>Select state</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/jquery.nice-select.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('select').niceSelect();
});
$(document).ready(function() {
$(".country_data").on('change',function(){
var country_id=$(this).val();
$.ajax({
url:"process.php?key=state_retrive",
method:"POST",
data:'id='+country_id,
success:function(data){
$('.state_get').html(data);
//alert(data);
}
});
});
});
</script>
</body>
</html>
Process.php
<?php
ob_start();
session_start();
include('connection.php');
switch($_GET['key']) {
case 'state_retrive':state_retrive($conn);break;
default : redirect('index.php');
}
function state_retrive($conn)
{
if (isset($_POST['id'])) {
$country_id=$conn->real_escape_string(trim($_POST['id']));
$state_data="SELECT name,id FROM `states` WHERE country_id=?";
//echo $state_data;
if ($stmt = $conn->prepare($state_data)) {
/* bind parameters for markers */
$stmt->bind_param("s", $country_id);
/* execute query */
$stmt->execute();
/* bind result variables */
$stmt->bind_result($state_name, $id);
/* fetch value */
echo $states="<option value=''>Select state</option>";
while ($stmt->fetch()) {
$states="<option value=".$id.">".$state_name."</option>";
echo $states;
}
/* close statement */
$stmt->close();
}
$conn->close();
}
}
?>
The plugin works this way:
It takes the select element and manipulate the DOM by hiding the select element and adding a styled DIV element that has a better UI but still behaves as a SELECT element.
The first time you call the plugin, it has its effect but after updating the state's element - you need to tell the plugin that there's new data.
So, first, we would like to update the SELECT element of the states.
Afterwards we want the tell the plugin that we've updated that select element so it would update the DIV.
success:function(data){
$('select.state_get').html(data); //Make sure you update the SELECT element. not the DIV (by adding "select.xxx").
$('select.state_get').niceSelect('update'); //Tell the plugin to recreate the DIV.
//alert(data);
}
Try to Check the Height of the State DropDown list when it open , check by inspecting it on Browser. Its Height is fixed try to change the Height. Check list height for State DropDown, May it is effected by another CSS files you using . Inspect it and fix.
You can append data in jQuery for that you need to pass json array from process.php file.
var myselect = $('<select>');
$.each(resultData, function(index, key) {
myselect.append( $('<option></option>').val(key).html(key) );
});
$('.state_get').append(myselect.html());
As i mention on the question, i want to update one select box if another value in the another select box is selected.
for example:
<select id="makale" size="4"name="formMakale"style="height:7em;width:16em;border:0px;outline:0px;font-size:16px;padding-left:10px;" >
<?php
$authorsQuery = $hb->authors();
foreach($authorsQuery as $v){
echo '<option value="'.$v->id.'">'.$v->name.'-'.count($hb>aticlesbyauthor($v),1000).' yazi</option>';}
?>
</select>
<select id="kategoriSec" size="4" name="formCat"style="height:7em;width:16em;border:0px;outline:0px;fontsize:16px;padding-left:10px;" >
<?php
$catQuery = $hb->db->get_results("SELECT * FROM category");
foreach ($catQuery as $v) {
echo '<option value="'.$v->id.'">'.$v->name.'</option>';
}
?>
if i select something from this select box with id makale, i want to update the options of the select box with id kategorisec.
can you help me?
Thank you.
If you just want to change it on the browsers side, use the onchange event handler.
If you want to update the checkboxes based on server data, you could use ajax or simply use an iframe:
<input onclick="update(this)">
<iframe src="checkboxes.php">Oh ,update your browser</iframe>
<script>
function update(elem){
if(elem.selected){ iframe=document.getElementsByTagName("iframe")[0]
iframe.src="checkboxes.php?select="+elem.value;
}
}
</script>
in need your help. i have option select:
Relationship:
<?php
$relationship=array(
''=>'Choose relationship',
'child'=>'child',
'guardian'=>'guardian',
'parent'=>'parent',
'wife'=>'wife',
'husband'=>'husband',
'mother in law'=>'mother in law',
'futher in law'=>'futher in law'
);
echo form_error('relationship');<br />
echo form_dropdown('relationship', $relationship, set_value('relationship'), array('id'=>'relationship'));
?>
how can i make input box to appear if selection is made? example if i choose mother i want input box for address to appear, if i choose child i want input box for birth date to appear...
trigger an event when an option is selected, then check which option was selected and display the input box accordingly.
for example:
$('selectbox').on('change', function (e) {
if( this.value == 'mother')
{
$('addressinput').show();
}
});
I am trying to make an html select box which dynamically disables and enables based on what the user select in a different select box... This was working fine when I used just html, but I would like to use the jQuery plugin Chosen for this, and it is not working... The main thing I need dynamic chosen to be disabled or enabled based on the onchange for the other select box. Is this possible with chosen? And how? Thanks so much.
Old Code : Working
<script>
function myDisable() {
a=1;
b=3;
for (i=1;i<3;i++){
posi=a+b*i;
document.getElementById('drop'+posi).disabled = true;
} }
</script>
New code with PHP : Not Working
<script>
function myDisable() {
a=<?php echo $angka; ?>; // a variable number for id select box
b=<?php echo $fields; ?>; // b variable number of many fields table
j=<?php echo $jp; ?>; // j variable number of select boxes that will disable
for (i=1;i<j;i++){
posi=a+b*i;
document.getElementById('drop'+posi).disabled = true;
} }
</script>
PHP select box looping +/- 50 :
<select name="modul[]" id="drop<?php echo $angka ?>" onchange="fetch_select<?php echo $random ?>(this.value); check(this); myDisable();">
<option value="0">Lanjutan</option>
<?php
include 'include/conn.php';
$select=mysql_db_query(#$db,"select nama_modul,jp from modul where nama_pelatihan='$nama_pelatihan'",#$koneksi);
while($row=mysql_fetch_array($select))
{
$jp=$row['jp'];
echo "<option value='".$row['nama_modul']."'>".$row['nama_modul']."(".$row['jp'].")</option>";
}
?>
</select>
Try executing a call to $("#form_field").trigger("chosen:updated"); after the for loop just before exiting the myDisable() function. In your case #form_field will be some selector that identifies your html select box element. Chosen might need to redraw itself to reflect the updated options and this is how we can tell it to do that.
I have this form where there is one select element originally but the user can add the number of select when clicking on 'add'. Then when the user submitted the form, and there are some invalid input (i.e unfilled input) the form is not submitted ( I am using php for form validation), and it goes back to the original page with only 1 select displayed, so I use jquery and count the array of the select submitted and append the select elements as much as the user chosen at first. Now the problem is how do I set the value of the appended select to be the value that the user has chosen ?
Sorry for the bad explanation, here is the code, hope it helps giving a clearer picture :
html
<div class='select_container'>
<select name='select[]'>
<option value='option1'>Option1</option>
<option value='option2'>Option2</option>
<option value='option3'>Option3</option>
</select>
</div>
<div class='add'>Add</div>
JQuery
$(document).ready(function() {
//User can add more select element by clicking 'add'
$('.add').click(function() {
$('<select name="select[]">' +
'<option value="option1">Option1</option>' +
'<option value="option2">Option2</option>' +
'<option value="option3">Option3</option>' +
'</select>').appendTo('.select_container');
});
//When form failed to submit(i.e invalid input), automatically
//add the select element as many as the user added at first
//get the user select input, make it into array
var select = "<?php $select= echo implode(',',$_POST['select']); ?>";
var select_array = select.split(',');
var select_length = select_array.length;
//after counting length of array, add the amount of select element the user added
for (i = 1; i < select_length; i++) {
$('<select name="select[]">' +
'<option value="option1">Option1</option>' +
'<option value="option2">Option2</option>' +
'<option value="option3">Option3</option>' +
'</select>').appendTo('.select_container');
}
});
I managed to append the select element so that when form failed to submit, user did not have to re-add the select element, and I want the appended select element when the form failed to submit to automatically set to the value that the user chosen.
I have tried delegate(), on() and a bunch of other stuff, but I am still unable to set the value of the appended select elements. I was only able to set the value of the original first select in the html.
Please if anyone knows a way to set the value of the appended select, all answers and suggestions are greatly welcomed and appreciated.
Thanks
You can do something like this (I'm assuming you post the form back to the same file):
// if reloaded after post basically
if( select.length > 0 ) {
// if there are multiple groups of selects, add class and call each on that
$('select').each(function(i) {
$(this).val( select_array[i] );
});
}
The order of the selects are guaranteed due to the linear nature of the form processing, so that should't be a problem.
Assuming that options stay same, You may do it simply by submitting the form to the same page(current page) and In your php file, html part should look like this
<div class='select_container'>
<select name='select[]'>
<option value='option1'>Option1</option>
<option value='option2'>Option2</option>
<option value='option3'>Option3</option>
</select>
<?php
if(!isset($_POST)&&!empty($_POST['select'])){
for($i=0;$i<sizeof($_POST['select']);$i++){
echo '<select>';
$options=array('option1','option2','option3');
for($j=0;$j<sizeof($options)){
if($options[$j]==$_POST['select'][$i]){
echo '<option
value="'.$options[$j].'"
selected="selected">'.$options[$j].'</option>';
}else{
echo '<option
value="'.$options[$j].'">'.$options[$j].'</option>';
}
}
echo '</select>';
}
}
?>
</div>
<div class='add'>Add</div>