hi
I want to add combobox dynamicaly on onclick event of button .
On next page i want to get that selected item of each combo.
How would i get the id each combo?
nileema 0 Newbie Poster
essential 84 Posting Shark Featured Poster
This is a quick example on how to create a dynamic dropDown list. I hope this will keep you goin! Enjoy coding...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some Title</title><script type="text/javascript">
<!-- BEGIN HIDING
function dropDownList()
{
var _items = [ 'item1', 'item2', 'item3', 'item4' ];
var container = document.getElementsByTagName('div')[1];
var _button = document.getElementsByTagName('input')[0];
var _select = document.createElement('select');
for ( var x = 0; x < _items.length; x++ ) {
_option = document.createElement('option');
var _text = document.createTextNode(_items[x]);
_option.appendChild(_text);
_select.appendChild(_option);
_option.value = _items[x]; }
container.appendChild(_select);
_select.setAttribute('name', 'list');
_button.value = 'Show Items!';
_button.setAttribute('onclick', 'showItems(\'items\');');
}
function showItems(id)
{
var itemHolder = document.getElementById(id);
var _list = myform.list.options;
var show_list = '<b>'+ _list[0].value + '<br />';
show_list += _list[1].value +'<br />';
show_list += _list[2].value + '<br />';
show_list += _list[3].value + '</b>';
itemHolder.innerHTML = show_list;
}
// DONE HIDING-->
</script></head>
<body>
<div>
<form name="myform" onsubmit="return false;">
<div> </div><br />
<input type="button" name="button1" value=" Show Me! " onclick="dropDownList()" />
</form>
</div>
<div id="items"> </div>
</body>
</html> nileema 0 Newbie Poster
Thanx for code, it works!
but i want to add 3 combo dynamicaly on onclick event one after other , when page is reload!
essential 84 Posting Shark Featured Poster
Sorry if i take u this long, am just busy with some other stuff here! So you want a total of 3 combo that add up next after the other when the page is reloaded? Having a 3 combo b4 the page reloads
is quite easy! But if you prefer 3 combo onafter the page is reloaded, then i need to get some extra time 2 work on it! Tnx...
essential 84 Posting Shark Featured Poster
Please feel free to modify this code to match your needs. If you have any question regarding this code you can document.write('Me on my inbox'). lol! Have a good day...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating Dynamic Combo</title><style type="text/css">
<!--
*{}
form { margin: 6px; padding: 4px; text-align: left; font-weight: bold; color: dimgrey; }
form select { margin: 6px 0 6px 0; padding: 2px; color: grey; }
form input[type=button] { background-color: black; color: silver; }
-->
</style><script type="text/javascript">
<!-- BEGIN HIDING
<!-- ADDING COMBO -->
//--> REMODIFIED <--\\
//You will love this 1 compare to my 1st version!
//This will create 3 combo boxes with 2sec. delay.
//If you wish to load this one by one each time the page reloads.
/* just create a cookie function that holds a counter and assign it to the variable n */
//Enjoy Coding and bye for now!
function AddCombo()
{
var _form = document.getElementsByTagName('form')[0];
var _button = document.getElementsByTagName('input')[0];
_button.setAttribute('onclick', 'return false;');
n = 1;
t = setTimeout('AddCombo()', 2000);
t = ( t == 3 ) ? clearTimeout(t) : t;
s = '3';
s = ( t == 1 ) ? '1' : s;
s = ( t == 2 ) ? '2' : s;
do
{
items = [ 'Combo' + s + ' Option List 1', 'Combo' + s + ' Option List 2', 'Combo' + s + ' Option List 3' ];
_select = document.createElement('select');
for ( var x = 0; x < items.length; x++ ) {
_option = document.createElement('option');
_br = document.createElement('br');
_item = document.createTextNode(items[x]);
_text = document.createTextNode('Selection ' + s );
_option.appendChild(_item);
_select.appendChild(_option);
_text.insertBefore(_select);
_option.value = items[x]; }
_form.appendChild(_br);
_form.appendChild(_text);
_form.appendChild(_select);
_select.setAttribute('id', 'select' + s);
n++;
} while( n < t );
}
// DONE HIDING -->
</script></head>
<body>
<form name="form1" action="#" onsubmit="return false;">
</form><br />
<form name="form2" action="#" onsubmit="return false;">
<input type="button" name="button1" value=" Show Me " onclick="AddCombo();" />
</form>
</body>
</html> Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.