Dynamically Creating HTML Elements Using Javascript
Suppose you want your users to submit a list of items through your web page. These items could be inputted through many means such as a text box, combobox, listbox, etc. There are many ghetto solutions you could use to implement this like comma delimited lists or multiple postbacks. There are however much more elegant, and suprisingly easier ways of doing this using javascript. As an example we will start with an input box with a link below it that allows you to spawn several more input boxes. In addition, each spawned input box comes with its own delete link, allowing the user to remove items if they choose to. Each input box is given a unique incremented ID that can be easily accessed later on through postback.
Here’s the javascript that makes it work:
<script type="text/javascript" language="javascript">
var software_number = 1;
function addSoftwareInput()
{
var d = document.createElement("div");
var l = document.createElement("a");
var software = document.createElement("input");
software.setAttribute("type", "text");
software.setAttribute("id", "software"+software_number);
software.setAttribute("name", "software"+software_number);
software.setAttribute("size", "50");
software.setAttribute("maxlength", "74");
l.setAttribute("href", "javascript:removeSoftwareInput('s"+software_number+"');");
d.setAttribute("id", "s"+software_number);
var image = document.createTextNode("Delete");
l.appendChild(image);
d.appendChild(software);
d.appendChild(l);
document.getElementById("moreSoftware").appendChild(d);
software_number++;
software.focus();
}
function removeSoftwareInput(i)
{
var elm = document.getElementById(i);
document.getElementById("moreSoftware").removeChild(elm);
}
</script>
And the tiny amount of html to get it to show up:
<input id="ninjainput" type="hidden" name="ninjainput" />
Next, we’ll insert an additional javascript function that will populate our ninjainput when the user submits the page.
function populateStaticInput()
{
var n = document.getElementById("ninjainput");
var allsoftware = "";
for( var i = 0; i < software_number; i++)
{
var currentele = document.getElementById("software"+i);
if(currentele != null)
{
if(currentele.value.length > 0)
{
if(currentele.value.length > 74)
currentele.value = currentele.value.substring(0, 74);
allsoftware = allsoftware + "~<>~" + currentele.value;
}
}
}
n.value = allsoftware;
}
Notice that we are delimiting each item with a “~<>~”. Make sure to add this attribute to your form tag: onsubmit=”javascript:populateStaticInput();” This way the javascript will run and populate our ninjainput control before the page is sent to the server. Lastly, we will need a function (the example below is in C#) that will cut up the submitted list of items into a usable format, in this case an array of strings.
public string[] GetAllSoftwareInList(string rawsoftlist)
{
string[] asoft = rawsoftlist.Split("~<>~".ToCharArray(), System.StringSplitOptions.RemoveEmptyEntries);
return asoft;
}
And there you have it, the user doesn’t have to endure multiple postbacks or keep track of a comma delimited list. It’s presented in an organized and intuitive manner to the user and not too painful to implement for the developer.
