Avatar of magento
magento
 asked on

How to create dropdown automatically

Hi,

I have created a table and displaying the contents via php code.

--
-- Table structure for table `personal`
--

CREATE TABLE IF NOT EXISTS `personal` (
  `id` int(11) NOT NULL,
  `name` char(20) NOT NULL,
  `contact` bigint(20) NOT NULL,
  `address` varchar(40) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Open in new window


<html>
<head>
<style>
body
{
background-color:#d0e4fe;
}
h1
{
color:black;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>




<center>
<table width="50%" border="1" cellspacing="0" cellpadding="0">
 <tr>
 		    <td width="30%"><h2><center><b>Name</b></center></h2></td>
 		    <td width="30%"><h2><center><b>Contact</b></center></h2></td>
 		    <td width="40%"><h2><center><b>Address</b></center></h2></td>
</tr>
<?php
    include('config.php');
    $sql="SELECT * FROM personal ";
    $query = mysql_query($sql);
    $numrows=mysql_numrows($query);
 $row=0;

		  while($row<$numrows)
 {

 $name=mysql_result($query,$row,"name");
 $contact=mysql_result($query,$row,"contact");
 $address=mysql_result($query,$row,"address");
 echo "<tr><td><center>$name</center></td><td><center>$contact</center></td><td><center>$address</center></td></tr>";
 $row++;//increase by 1;
 }
echo "</table>";
?>
</body>
</html>

Open in new window


I got the whole table data in the above code. But i dont want that .What i am trying to do here is .

In the top center i need a dropdown with two options say : Type1 and type2.

When user select type1 it need to generate another dropdown with name "Please choose name" and when user select type2 it need to generate 2 dropdown with name "please choose name" and "Please choose address".

Please choose name should have values from the table column name.
Please choose address should have values from the table column address.
eg: select distinct(name) from personal.

I just want them to load in the same page and provide o/p.

Thanks
JavaScriptPHPAJAX

Avatar of undefined
Last Comment
magento

8/22/2022 - Mon
Rikin Shah

Hi,

Create a drop down:
textnode2=document.createElement("select");

Add options in it:
var op=new option();
op.value=1;
op.text="First entry";
textnode2.options.ass(op);
magento

ASKER
Sorry , i dont understand.
Sar1973

I suggest to insert by default in the HTML code all the 3 dropdowns and make visible the other 2 with the "onchange" event depending on the choice of the user (say combo "type" has 3 choices: "(Choose), Type1, Type2".
function showCombos() {
	
	var myComboType = document.getElementsByName("type")[0];
	var myComboName = document.getElementsByName("name")[0];
	var myComboAddress = document.getElementByName("address")[0];
	var myComboTypeSel=myComboType.selectedIndex;

	Select Case myComboTypeSel
	Case 0
		myComboName.style.display=='none';
		myComboAddress .style.display=='none';
	Case 1
		myComboName.style.display=='inline';
		myComboAddress .style.display=='none';
  	Case 2
		myComboName.style.display=='inline';
		myComboAddress .style.display=='inline';
	Case Else
	End Select

}

Open in new window

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
magento

ASKER
Sar1973,

Can you please provide some explanations of your code.

I understand inline means it will show and none it wont show.

For on change event , how to pass that case status values to the below?

<select id="category" name="category"  onChange='showcombos()'>
    <option value="none">Select type</option>
    <option value="Type1">Type1</option>
    <option value="Type2">Type2</option>
 </select>

Open in new window

Sar1973

It should work since it refers to the selected index of the type combo: so if the user chooses "Type 1" the sel.index (and the Case) is 1, if it goes back to "Select an option (or Slecet type as you called it)" the Case 0 is taken. One thing I've missed is "=" instead of "==" since in each single cases you have a command and not a test (so change ....style.display=='inline' to ...style.display='inline').
magento

ASKER
Sar1973,

Seems i missing something its not working.. Please check.

<!DOCTYPE html>
<html>
<head>
<script>
function showCombos() {
	
	var myComboType = document.getElementsByName("type")[0];
	var myComboName = document.getElementsByName("name")[0];
	var myComboAddress = document.getElementByName("address")[0];
	var myComboTypeSel=myComboType.selectedIndex;

	Select Case myComboTypeSel
	Case 0
		myComboName.style.display='none';
		myComboAddress.style.display='none';
	Case 1
		myComboName.style.display='inline';
		myComboAddress.style.display='none';
  	Case 2
		myComboName.style.display='inline';
		myComboAddress.style.display='inline';
	Case Else
	End Select

}

</script>
<head>
<body>

<select id="type" name="type" onChange='showcombos()'>
    <option value="0">Select type</option>
    <option value="1">Type1</option>
    <option value="2">Type2</option>

 </select>

<br>

<select id="name" name="name">
    
    <option value="name">name</option>

 </select>

<select id="address" name="address">
    
    <option value="address">address</option>

 </select>

</body>
</html>

Open in new window

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
Sar1973

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Sar1973

magento

ASKER
Hi Sar1973,

I gone thru the post.

Can you explain what the below code does? (this.value)

onchange="myIDChange(this.value)

Also how to create multidimension array using sql . In the above example you have used the values directly .

Suppose that table has N no of rows how you will use that sql to achieve it? Any snippets of code will help understand the logic.

Thanks very much for your help so far.
Sar1973

The post is JS only, not SQL: I won't help with that.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
magento

ASKER
Thanks so much .