We Keep Coding

How to fill Textbox using dropdownlist

Please help me.. i have dropdownlist which i have populated from the database table, now i want to fill textbox from the database list...
i have one table
id | juice | rupees
now when i select Mango Juice from juice column from dropdownlist it should show the cost of Mango Juice in textbox by retrieving from rupees column
here is the dropdownlist which is populated from the table
<select name="drink" id="drinkid">
<option id="0">-- Select the drink --</option>
<?php
require("dbcon.php");
$getalldrinks = mysql_query("SELECT * FROM tableone");
while($viewalldrinks = mysql_fetch_array($getalldrinks)){
?>
<option id="<?php echo $viewalldrinks['id']; ?>"><?php echo $viewalldrinks['juice'] ?></option>
<?php
}
?>
</select>
and here is the textbox
<input type="text" name="juicename" id="juiceid" placeholder="Juice">
Please help me.. thanks in advance.

First add onChange() event to your select tag to call function fillTextBox() every time you change option, then the function will fill the textbox:
<select name="drink" id="drinkid" onChange="fillTextBox()">
Now you have to get rupees column & store it in every option using data attribute :
<option data-rupees="<?php echo $viewalldrinks['rupees']; ?>" id="<?php echo $viewalldrinks['id']; ?>" ><?php echo $viewalldrinks['juice'] ?></option>
Create the function fillTextBox() that will fill the textbox by rupees value of selected option :
function fillTextBox(){
var myselect = document.getElementById("drinkid");
var rupees = myselect.options[myselect.selectedIndex].getAttribute("data-rupees");
document.getElementById("juiceid").value = rupees;
}
That should do the work, hope this helps.

You'll need to use javascript to detect changes in your select box, store those values, and then populate the text box with the desired values. You haven't listed a text box in your html, so I'll have to assume that I can access this value using input[type=text]. Here's an approximation of what your javascript should look like given that I am working with incomplete information. Note that your should probably contain an attribute called value to store your id instead of using the id attribute.
var el = document.getElementById('drinkId');
el.addEventListener("click", function(){
var data = {"id": el.value, "text": el.innerHTML};
document.querySelectorAll('input[type=text]')[0].value = data.text;
});
You'll need to provide more detail and more of your code if you want an exact solution to your problem.
UPDATE: I see you've added the text box HTML, so here's the updated version of the event handler:
var el = document.getElementById('drinkId');
el.addEventListener("click", function(){
var data = {"id": el.value, "text": el.innerHTML};
document.getElementById('juiceId').value = data.text;
});

Using Jquery to change form based on user input

I have a form with a select tag. I need my form to change based on the selection from the user. I am given to believe that the easiest way to do this is to use JQuery.
Here is my code:
<div class="form-group">
<label for="category" >Category</label>
<select id="category" name="category" class="form-control">
<option value="0" >Select Category</option>
<?php
$sql_cat= "SELECT * FROM category";
$result = mysqli_query($conn,$sql_cat);
$cat_items="";
if($result) {
while($cats = $result->fetch_assoc()) {
echo '<option value="'.$cats['id'].'" >'.$cats['cat_name'].'</option>';
}
} else {
echo '';
}
?>
</select>
</div>
<div id="addhtml"></div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#category").change(function() {
alert("event triggered");
var val = $(this).val();
if (val == "number" || val == "symbol") {
$("#addhtml").html(<?php include("html/form_number.html"); ?>);
} else if (val == "letter") {
$("#addhtml").html(<?php include("html/form_letter.html"); ?>);
} else {
$("#addhtml").html(<?php include("html/form_other.html"); ?>);
}
});
});
</script>
Note: the php while statement just sets up the current three options of "number", "symbol" or "letter" with ids of 1,2 and 3 respectively
When I change the category, it does not trigger the jquery.change()
I would like to code the form without using the addhtml div but am willing to use it if necessary.
Questions:
Is the reason the change function is not being triggered because I am using php to set the values of the select options?
If so how can I resolve?
If not, why isn't it being triggered?
How can I accomplish my goal of not using the addhtml div?
Is there a better way to accomplish what I am going for?
Thanks in advance.
EDIT:
Answers to initial questions: As stated by bistoco, php is pre compiled by the server and sent in as html so the issue is not from using php to set the values of the select tag.
I have now determined that it is due to the content of my php include files. I have determined that it registers the change event and loads the content just fine if my file is simple like this:
"<div><label>New Number</label></div>"
but if I add any white space or \n characters for human readability like this:
"<div>
<label>New Number</label>
</div>"
Not only does it not work, but it also completely skips the change event.
New Questions: Does the jquery html function have a list of illegal characters that would cause it to fail? Why is it not even registering the change function when it doesn't like the contents of my php include file?

First thing that you must understand is that php runs on the server, all the output is rendered and sent as html code to the browser, and is not available there.
That said, you have at least 2 options :
1.- echo all form options, each one inside a div, that you can hide/show based on the selected choice.
<div class="form-group">
<label for="category" >Category</label>
<select id="category" name="category" class="form-control">
<option value="0" >Select Category</option>
<?php
$sql_cat= "SELECT * FROM category";
$result = mysqli_query($conn,$sql_cat);
$cat_items="";
if($result) {
while($cats = $result->fetch_assoc()) {
echo '<option value="'.$cats['id'].'" >'.$cats['cat_name'].'</option>';
}
} else {
echo '';
}
?>
</select>
<!-- ECHOING ALL FORM OPTIONS -->
<div class="option-form" id="form-option-symbol"><?php include("html/form_number.html"); ?></div>
<div class="option-form" id="form-option-letter"><?php include("html/form_letter.html"); ?></div>
<div class="option-form" id="form-option-other"><?php include("html/form_other.html"); ?></div>
</div>
<style>
div.option-form {
display:none; /* HIDE ALL DIVS BY DEFAULT */
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#category").change(function() {
// HIDE ALL DIVS
$('div.option-form').hide();
var val = $(this).val();
if (val == "number" || val == "symbol") {
$('form-option-symbol').show();
} else if (val == "letter") {
$('form-option-letter').show();
} else {
$('form-option-other').show();
}
});
});
</script>
2.- Using a template system or load partial html pieces with ajax.

PHP Is a pre-processor so adding later into the website is useless. Just create your form with either setting its html or by using .prepend() or .append() with your form elements.
<form class="myform">
</form>
and in jquery
$('.myform').html('<input type="submit">');
or
$('.myform').append('<input type="submit"');
EDIT :
Read your code wrong looked up
<?php include('test.html'); ?>
don't think that would work.

Instead of
$("#addhtml").html(<?php include("html/form_number.html"); ?>);
and such, try
$("#addhtml").html("<?php include("html/form_number.html"); ?>");
so that the html will be treated as a string.
Also make sure the form files don't have tags such as html, head, and body, and only contain the actual form.
EDIT: I just saw that #nnnnnn already stated this, gotta give credit where credit is due

I think you might just need to change your variable "val" declaration to get your code to work.
I don't think
var val = $(this).val();
will work. Based on the comparison you are making, I believe it should be:
var val = $(this).children("option:selected").text();
which will allow you to get the text value of the select element's selected option.

option onChange on currentpage using database information

I've written a query that takes the usernames from the database and puts them in s like this:
<?php
$username_set = get_all_usernames();
while ($username = mysql_fetch_array($username_set)){
echo "<option>" . $username['username'] . "" . "</option>";
}
?>
That works fine but now I want to add a onchange function to my tags. I've done it like this:
<select name="user_result" onChange="top.location.href = this.form.user_result.options[this.form.user_result.selectedIndex].value,'_self';">
That works fine too, it is redirecting to the selected option. But I want to select a option and stay at the same page and display the (coming) information that username contains. But for now printing the username below the would be good enough.

If you want to execute code on change of a select, it's easy to include this in a javascript function. Not sure if you want the javascript or the jquery solution, so I'll include them both.
Plain javascript:
function show_user(data) {
var el = document.getElementById("show_username").innerHTML = data;
}
jQuery solution:
function show_user(data) {
$("#show_username").html(data);
}
Then you call this function on the select change:
<select name="user_result" onchange="show_user(this.options[this.selectedIndex].value);">
<option>--select a user--</option>
<option>username</option>
<option>username 2</option>
</select>
<div id="show_username">this will update to the selected user name</div>
jsfiddle for plain javascript: http://jsfiddle.net/CwFs5/
jsfiddle for jquery: http://jsfiddle.net/5PuX3/

retrieve id from dropdown/select box codeigniter

Im trying to figure how to retrieve the ID number from a selected value in a dropbox, displaying a list of projects from a table.
At this point what i did was retrieve the value and then search it and get the ID number for that value in the table. Well the field name_project it's "unique" so it's not so bad but i want to retrive the id directly without querying the database offcourse! It's really necessary the use of jquery or javascript to do that?
<?php echo form_open('solucao/inserir',array('class' => 'form-horizontal')); ?>
<select class="form-control" id="project" name="project">
<option>--Choose Project--</option>
<?php foreach($projects as $data):?>
<option><?php echo $data->name_project?></option>
<?php endforeach;?>
</select>
<?php form_close(); ?>
Note: $data is an array wich contains the ID number!
Thank you!

Hope you have project_id and project_name as field names in your project table
In model:
function getProjectArr()
{
$res = $this->db->get("project");
$ret_arr = array();
if($res-<num_rows()>0)
{
foreach($res->result() as $r)
{
$ret_arr[$r->project_id] = $r->project_name;
}
}
return $ret_arr;
}
In your controller,
$data["project_list"] = $this->MODEL_NAME->getProjectArr();
In View file
echo form_dropdown("project",$project_list,'','id="project" class="form-control"');
You will get dropdown with ids as option value and names as option text.

When you will get the id on select or options tag.
Then get the id of selected option you can use something like this.
document.getElementById('project').addEventListener('change', selectId);
function selectId(){
alert(this.options[this.selectedIndex].id);
}
Demo
OR
Get the id of select tag then you can use
document.getElementById('project').addEventListener('change', selectId);
function selectId(){
alert(this.id);
}
Demo2

update database on dropdown list change event

I have a drop down list loaded on the page using a javascript (not originally on the page), it's loaded without problems, but then I want to update a database table once the selected value of the dropdown list changes, I'm using this script :
<select name = "categ" id="dropd1"><option> .... </option></select>
<script>
$( "#dropd1" )
.change(function () {
var value = this.val();
$.post('listener_updates.php', {categ: value});});
</script>
the listener_update.php contains the script for updating the database :
<?php
if($_POST && $_POST['categ']){
connectMaBase();
$sql ='UPDATE produit SET categorie = "'.$_POST['categ'].'" WHERE num_prod ='.$_SESSION['num_prod'];
$req = mysql_query ($sql) or die ('Erreur SQL !'.$sql.'<br />'.mysql_error());
mysql_close();
}
?>

you didn't ask a question.
anyway, this.val() will probably throw an exception.
try $(this).val()
UPDATE:
try
$(document).on('change', '#dropd1', function(){
var value = $(this).val();
$.post('listener_updates.php', {categ: value});});
});
this will create an event listener for dynamically added DOM elements.