asked on

Dynamic Creation of Text Boxes

Hello folks !!

I just want a source code to create text boxes dynamically on click.

consider an example to create 10 text boxes on click of a button.

The prob.. I am facing across is, as soon as i click the btn, js rewrites the whole document and after the rewrite, the btn is not visible but only the text boxes.

suggest me a solution to retain the btn and create more text boxes on the same doc.

I am currently writing -

<html>
<head>
<script language="javascript">
function gen()
{
for (t=0;t<10;t++)
{
document.write("<input type='text' name='textbX" + t + "'>");
}
}
</script>
</head>
<body>

<input type="button" onClick="gen();">

</body></html>

ASKER CERTIFIED SOLUTION

DidierD

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

etain

<html>
<head>
<script language="javascript">
function gen()
{
for (t=0;t<10;t++)
{
var obj = document.createElement("input");
obj.type='text'
obj.name = 'textbX" + t
document.body.appendChild(obj);
}
}
</script>
</head>
<body>

<input type="button" onClick="gen();">

</body></html>

dorward

etain's code conforms to public standards, I suggest you use that.

hemanthsharma

ASKER

sorry... i could not accept etain's answer as it gave out an error.

dorward

hmmm.... not sure if document.body is right come to think of it.

document.getElementsByTagName('body')[0].appendChild(obj); might work better

etain

what error it give ??
The only know problem is u will have dup name when press the button more than one.
Case i didnt add the code to check it.

hema3i

create a check box called "cbxSelectAll"
and on the check box add the following attribute

onclick=javascript:checkAll(this.form)

<script type="text/javascript">
function checkAll(form)
{
var thisNumRowsSelected = 0;
var isChecked = document.all.cbxSelectAll.checked;
for (var i=0; i < form.elements.length; i++)
{
if (form.elements[i].name.indexOf('_ctl') > -1)
{
var curElement = form.elements[i];
if (isChecked)
{
curElement.checked = true;
thisNumRowsSelected = thisNumRowsSelected + 1;
while (!(curElement.tagName == "TR"))
{
curElement = curElement.parentElement;
}
if (form.elements[i].name != "cbxSelectAll")
{
curElement.style.backgroundColor = "gold";
}
}
else
{
curElement.checked = false;
while (!(curElement.tagName == "TR"))
{
curElement = curElement.parentElement;
}
if (form.elements[i].name != "cbxSelectAll")
{
curElement.style.backgroundColor = "#eeeeee";
}
}
}
}
rowsSelected = thisNumRowsSelected;
}
</script>