CODEWITHSUNDEEP
javascriptphpmysql
Muhammed Parveez Khushaali
Muhammed Parveez Khushaali

Reputation: 37

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.

Upvotes: 0

Views: 93

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

  1. 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()">

  2. 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>

  3. 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.

Upvotes: 1

Robert
Robert

Reputation: 991

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

Upvotes: 1

Related Questions