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;
});
Related
Okay My problem is little complex which I am unable to solve. I already have two select boxes in which the options are coming from Database Mysql through php. Like when I select an option in Select Box#1, Select Box#2 gets updated through ajax and displays the options against SelectBox#1 from MYSQL Database. I am able to store the values from those two in database as well.
Problem
:
Now the problem is that I want a button like "Add New" that should create same two select boxes with same functionality the number of times i click Add New Button. Example: I filled the original two select boxes, then I click Add New and two new select boxes gets generated.. I fill them and again click Add New and two more select boxes gets generated so total of 6 select boxes with same first Select Box options but options in Second Select Box may differ according to the option selected in first select box. Now, two things I need help in:-
1. How to perform this Add New button thing that generates select boxes with same functionality as the original ones i.e Select Option from First Select Box, Second Select Box gets auto updated according to the option selected in first select box and the options are fetched from Database.
2. How do I read and store those values selected from new fields? I am able to read and store values that were passed from the original two select boxes but how about the new ones? Any unique names or ids of new select boxes I generate through button or some sort of array etc?
Here is my code that I used for my first two select boxes:-
HTML FILE-TOP
function load_country()
{
$connection = new mysqli("localhost","root","","test");
$query = "SELECT * FROM country";
$result = mysqli_query($connection,$query);
while($row = mysqli_fetch_array($result))
{
$output .= '<option value="'.$row["c_id"].'">'.$row["c_name"].'</option>' ;
}
return $output;
}
HTML FILE-INSIDE
<form method="post">
<p> <select name="country" id="country">
<option value="">Select Country</option>
<?php echo load_country() ?>
</select> </p>
<p> <select name="city" id="city">
<option value="">Select City</option>
</select> </p>
<input type="submit" name="submit" value="submit">
</form>
Jquery/Ajax Function that updates the Second Select Option:-
$(document).ready(function(){
$('#country').change(function(){
var country_id = $(this).val();
$.ajax({
url:"fetch_city.php",
method:"POST",
data:{
"c_id":country_id
},
dataType: "text",
success:function(data)
{
$('#city').html(data);
}
});
});
});
</script>
PHP File used by Ajax to Update Second Select Box:-
$output = '';
$query = "SELECT * FROM cities WHERE country_id = '{$_POST["c_id"]}'";
$result = mysqli_query($connection,$query);
$output = '<option value="">Select City</option>';
while($row = mysqli_fetch_array($result))
{
$output .= '<option value="'.$row["city_id"].'">'.$row["city_name"].'</option>' ;
}
echo $output;
First Change the HTML into something like this, use classes and ids for finding objects better:
<form method="post">
<div id="form-area">
<div class="select-box" id="box_1">
<p>
<select class="country" name="country[]">
<option value="">Select Country</option>
<?php echo load_country() ?>
</select>
</p>
<p>
<select class="city" name="city[]">
<option value="">Select City</option>
</select>
</p>
</div>
</div>
<button id="add_new" type="button"> [+] </button>
<input type="submit" name="submit" value="submit">
</form>
javascript:
$(document).on("change", ".country", function() {
var current_box = $(this).parent().closest('div').attr('id');
var country_id = $(this).val();
$.ajax({
url: "fetch_city.php",
method: "POST",
data: {
"c_id": country_id
},
dataType: "text",
success: function(data) {
$('#' + current_box).find(".city").html(data);
}
});
});
var id = 1;
$('#add_new').click(function() {
id++;
$(".select-box:last").clone().attr("id", "box_" + id).appendTo("#form-area");
});
After that, you should handle Array input in PHP form destination code.
In your case it should be something like this:
$cities = $_REQUEST['city'];
$cuontries = $_REQUEST['cuontry'];
foreach( $cuontries as $key => $cuontry ) {
$row[] = [ "cuontry" => $cuontry , "city" => $cities[$key] ];
}
This array is as same as form array that you created with [+] button in HTML
I've searched around to find the answer of my problem but I didn't find any.
I have a table contain 2 columns: kode_barang (Item ID) and nama_barang (Item Name). Kode_barang is a dropdown option which it's data populated dynamically from another table. Each time user select an option, the name of the item will appear automatically.
Here is my code:
<td>
<select name='kode_barang' type = "text" id='kode_barang1' onchange="changeValue(this.value)">
<option>Choose</option>
<?php
$sql="SELECT * FROM input_data_barang ";
$result=mysql_query($sql);
$met = "var kode_barang = new Array();\n";
while ($row = mysql_fetch_array($result)) {
$id=$row["kode_barang"];
echo "<OPTION VALUE=$id>$id</option>";
$met .= "kode_barang['" . $row['kode_barang'] . "'] = {name:'" . addslashes($row['nama_barang']) . "',desc:'".addslashes($row['nama_barang'])."'};\n";
}
?>
</select>
</td>
<td><input type="text" name='nama_barang' id="nama_barang1"/readonly>
<script type="text/javascript">
<?php echo $met; ?>
function changeValue(id){
document.getElementById('kode_barang1').value = kode_barang[id].name;
document.getElementById('nama_barang1').value = kode_barang[id].desc;
};
</script>
</td>
Dropdown option and Item ID appear perfectly. The problem is, when I select an Item ID, the name of the ID (nama_barang) appear automatically, but then the Item ID disappear. The dropdown become blank. I need the Item ID persist after option selected so the ID can be saved to the database.
Anybody please help me.
The issue that I can see is that you are assigning kode_barang1 the name stored. kode_barang1 is the name of a SELECT object which uses numbers for the ID so when you assign it, it goes to NULL because a name doesn't exist in the <OPTION>.
Create a new input variable called kode_barang2 and change
document.getElementById('kode_barang1').value = kode_barang[id].name;
to
document.getElementById('kode_barang2').value = kode_barang[id].name;
And you will see that would work.
I have a drop down that display categories from database and it's display selected category price in textfield.
when select web development it's price(12) display in textfield
this is code for that
<select name="category" class="form-control" id="category">
<?php
$query= "SELECT * FROM category" ;
$result= mysql_query($query);
while($row = mysql_fetch_assoc($result))
{
echo '<option value="'.$row['cost_for_cat'].'">'.$row['cat_name'].'</option>';
}
?>
</select>
<input name="cat_cost" id="cat_cost" type="text" value="<?php echo ('cost_for_cat'); ?>" onClick="checkprice()" class="form-control" placeholder="£" width="30" required/>
<script>
var select = document.getElementById('category');
var input = document.getElementById('cat_cost');
select.onchange = function(){
input.value = select.value;
}
</script>
also i want to insert category name (Web Development) in another table when button click.but both values(cost_for_cat,cat_name) should come from "option value".like this
echo '<option value="'.$row['cost_for_cat'].'">'.$row['cat_name'].'</option>';
and
echo '<option value="'.$row['cat_name'].'">'.$row['cat_name'].'</option>';
is there any solution?please help.
With the first problem, displaying the cost category when a category is selected, you have to use the "onchange" of you select element and retrieve the corresponding cost then put it on your textfield.
For the second thing, the category value as you said is already there and will be sent when the form submitted, for the text you can include a hidden input, get the text of the selected category and set it there.
The code you will need:
var categoryDropDownList = document.getElementById("category");
var selectedValue = categoryDropDownList.value;
var selectedText = categoryDropDownList.options[categoryDropDownList.selectedIndex].text;
I want to show the drop down selected value in textbox.
This is my design.
This is my php code for drop downlist...
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("storedb", $con);
$s=mysql_query("select * from dealerdetail order by Dealer asc ");
?>
Select Dealer Name:
<select name="dealer" id="dealer">
<option value="">---- select Dealer -----</option>
<?php
while($dd=mysql_fetch_array($s))
{
?>
<option value="<?php echo $dd['D_id'] ?>"><?php echo $dd['Dealer'] ?></option>
<?php
}
?>
</select>
Please help.
I think you are looking for
$('#dealer').val(); //return selected value
$( "#dealer option:selected" ).text() // return selected options text
Use the change event and text property of select box to access the value
$('#dealer').change(function () {
$("#idOfTextBox").val($("#dealer option:selected").text());
});
use jquery:
Live demo : http://jsfiddle.net/t6YHK/25/
$('#dealer').change(function () {
$("#your_input_id").val($(this).val());
});
Use this:
$("#dealer").change(function(){
$("textarea").val( $(this).val() );
});
AngularJS
http://angularjs.org/
Scroll down to below the black area.
Seems like you're taking your first steps in web development, and for this, i strictly recommend that you stop using DreamWeaver to learn more about the code and how things go.
Each element in your web page is in the DOM (see HTML Document Object Model). So using native javascript all of your elements using :
document.getElementById("elementId")
And this is ALL what you need. All other solutions using frameworks will use this line of code whether you see this or not.
so for your specific question we will create a javascript function to be used in the event of value change of your dropdown list (assuming your text field's id is myText)
function updateMyText()
{
var dd = document.getElementById("myDropDown");
var ddtext = dd.options[dd.selectedIndex].text;
document.getElementById("myText").value = ddtext;
}
to call it when a dropdown list item is selected you need the attribute onchange
<select name="dealer" id="dealer" onchange='updateMyText()'>
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