Member Avatar for mnealmneal

Hello,
Wonder if there is a way to have my Drop-Down box selections create individule single row/dual colume tables for each item that was selected from the drop-down box.
An example would be:
1: I selected 3 items from my drop-down box at one time (my drop-down box allows multiple selections).
2: I click a button call "Create Template" and three new single row/dual colume tables are created with the names if the items.

Here is what I have so far, but need a little help.
Notice I have added the three tables in to show how it should look but this is for information only as these should be created automaticaly.

Thanks for any help.

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language="javascript">
function removeRow(src)
{
	document.getElementById(src).style.display = "none";
}
</script>
</head>

<body>

<form method="POST" action="--WEBBOT-SELF--">
	<!--webbot bot="SaveResults" U-File="fpweb:///_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" -->
	<p><select size="3" name="D1" multiple style="width: 200">
	<option>Dogs</option>
	<option>Cats</option>
	<option>Horses</option>
	</select></p>
</form>
<p><input type="submit" value="Create Template" name="B1"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
		
		<table id="table1" style="table-layout:fixed" border="1" bgcolor="#CCCC99" width="1470" height="10">
			<tr>
				<td width="67">
				<p align="center"><input type="button" value="Delete" onclick="removeRow('table1');" /></td>
				<td>
	<span lang="en-gb"><b><font face="Arial" size="4" color="#336699">Dogs</font></b></span></td>
			</tr>
			</table>
			
<p>&nbsp;</p>
		
		<table id="table2" style="table-layout:fixed" border="1" bgcolor="#CCCC99" width="1470" height="10">
			<tr>
				<td width="67">
				<p align="center"><input type="button" value="Delete" onclick="removeRow('table2');" /></td>
				<td>
	<span lang="en-gb"><b><font face="Arial" size="4" color="#336699">Cats</font></b></span></td>
			</tr>
			</table>
			
<p>&nbsp;</p>
		
		<table id="table3" style="table-layout:fixed" border="1" bgcolor="#CCCC99" width="1470" height="10">
			<tr>
				<td width="67">
				<p align="center"><input type="button" value="Delete" onclick="removeRow('table3');" /></td>
				<td>
	<span lang="en-gb"><b><font face="Arial" size="4" color="#336699">Horses</font></b></span></td>
			</tr>
			</table>
			
</body>

</html>
  • 2 Contributors
  • 1 Reply
  • 131 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

Mneal^2,

Something like this maybe:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
option.disabled {color:#999999; background-color:#e0e0e0;}
table.created { table-layout:fixed; margin:6px 0; background-color:#CCCC99; width:100%; height:10px; border:1px solid #999966; }
table.created tr {  }
table.created td { padding:2px 5px; border:1px solid #999966; }
table.created td.col1 { width:67px; }
table.created td.col2 { font-family:arial; font-size:18px; color:#336699; font-weight:bold; }
</style>
<script language="javascript">
function CreatedTable(option){
	var table = document.createElement('table');
	table.className = 'created';
	var tbody = document.createElement('tbody');
	var tr = document.createElement('tr');
	var td1 = document.createElement('td');
	td1.className = 'col1';
	var input = document.createElement('input');
	input.setAttribute('type', 'button');
	input.setAttribute('type', 'button');
	input.setAttribute('value', 'Delete');
	input.onclick = function(){
		table.parentNode.removeChild(table);
		option.className = '';
	}
	var td2 = document.createElement('td');
	td2.className = 'col2';
	t = document.createTextNode(option.innerHTML);
	td1.appendChild(input);
	td2.appendChild(t);
	tr.appendChild(td1);
	tr.appendChild(td2);
	tbody.appendChild(tr);
	table.appendChild(tbody);
	return table;
}

function createTables(){
	var container = document.getElementById('tableContainer');
	var sel = document.getElementById('multiSel');
	var opts = sel.options;
	for(var i=0; i<opts.length; i++){
		if(opts[i].selected && opts[i].className != 'disabled'){
			container.appendChild(new CreatedTable(opts[i]));
			opts[i].className = 'disabled';
		}
	}
}
</script>
</head>

<body>

<form method="POST" action="--WEBBOT-SELF--">
<p>
	<select id="multiSel" size="3" name="D1" multiple style="width: 200">
		<option>Dogs</option>
		<option>Cats</option>
		<option>Horses</option>
	</select>
</p>
<p>
<input type="button" value="Create Template" onclick="createTables()"></p>
</form>

<div id="tableContainer"></div>

</body>
</html>

Must rush I'm late for a garden party!

Airshow

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.