Most of the time when we visit a website, we tend to see a drop down list over there, where a number of products are listed down and when we select a product from that list, we see that selected product is now available in a text box that helps a developer to understand that what product or the option the user has selected and also provides a clear view to the user what option he/she has selected. We can implement this functionality in our college project or on our website by using simple JavaScript snippet. Whenever a designer or a developer develops an interface for the user, the first thing that comes to their mind is to make the interface as simple and as interactive as it can get and in order to make the drop down list interactive this trick is used.
In this article of mine, I am going to show a simple code snippet of an HTML Page that is containing a select drop down list control and also containing a text box input field and when we select an option from the drop down list the selected option will get displayed in the text box field. Whenever an option is selected from the drop down list "on change" event occurs and we are going to call a function on this "on change" event and will code our functionality inside this explicitly created function. I am going to populate the drop down list from my database using PHP.
Here is the code snippet:
<html>
<head>
<script type="text/javascript">
function myfunc()
{
var e = document.getElementById('productlist').value;
var mytextbox=document.getElementById("showvalue");
mytextbox.value=e;
}
</script>
</head>
<body>
<!-- Calling the function on 'on change' event-->
<select name="productlist" id="productlist" onchange="myfunc()">
<option value="" readonly="true">--Select--</option>
<?php
//connect.php is the file where I have written the connectivity code
include './connect.php';
$myquery="select * from Product";
$result=mysql_query($myquery);
//executing the query while record is there in the table
while($row= mysql_fetch_assoc($result))
{
//getting the product name from the table
$pname=$row['Product_Name'];
?>
<!-- Adding the product name into the drop-down list as a value as well as the displayed text-->
<option value="<?=$pname?>"><?=$pname?></option>
<?php
}
?>
</select>
<br/><br/>
Selected Value:<input type="text" name="mytextbox" id="showvalue"/>
</body>
</html>
Output:
That's all in this article of mine, In this article, we learned how to populate a drop-down list from the database and how to get the selected value using javascript and showing it into a textbox. |
Source: Google Images |
In this article of mine, I am going to show a simple code snippet of an HTML Page that is containing a select drop down list control and also containing a text box input field and when we select an option from the drop down list the selected option will get displayed in the text box field. Whenever an option is selected from the drop down list "on change" event occurs and we are going to call a function on this "on change" event and will code our functionality inside this explicitly created function. I am going to populate the drop down list from my database using PHP.
Here is the code snippet:
<html>
<head>
<script type="text/javascript">
function myfunc()
{
var e = document.getElementById('productlist').value;
var mytextbox=document.getElementById("showvalue");
mytextbox.value=e;
}
</script>
</head>
<body>
<!-- Calling the function on 'on change' event-->
<select name="productlist" id="productlist" onchange="myfunc()">
<option value="" readonly="true">--Select--</option>
<?php
//connect.php is the file where I have written the connectivity code
include './connect.php';
$myquery="select * from Product";
$result=mysql_query($myquery);
//executing the query while record is there in the table
while($row= mysql_fetch_assoc($result))
{
//getting the product name from the table
$pname=$row['Product_Name'];
?>
<!-- Adding the product name into the drop-down list as a value as well as the displayed text-->
<option value="<?=$pname?>"><?=$pname?></option>
<?php
}
?>
</select>
<br/><br/>
Selected Value:<input type="text" name="mytextbox" id="showvalue"/>
</body>
</html>
Output:
 |
| My Table in the Database |
 |
| Output in the browser |
Also, Read Autocomplete using JqueryUI here and Dragging Contents using JqueryUI here.
No comments:
Post a Comment
Thanks for Your Time!