Solved

Dynamic Creation of Text Boxes

Posted on 2003-11-25
7
301 Views
Last Modified: 2010-05-18
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>
0
Comment
Question by:hemanthsharma
7 Comments
 
LVL 2

Accepted Solution

by:
DidierD earned 100 total points
Comment Utility
Something like this?


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

    <input type="button" onClick="gen();">
      
      <div id='textSection'></div>

</body></html>


Greetz,
Didier
0
 
LVL 3

Expert Comment

by:etain
Comment Utility
<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>
0
 
LVL 17

Expert Comment

by:dorward
Comment Utility
etain's code conforms to public standards, I suggest you use that.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 1

Author Comment

by:hemanthsharma
Comment Utility
sorry... i could not accept etain's answer as it gave out an error.
0
 
LVL 17

Expert Comment

by:dorward
Comment Utility
hmmm.... not sure if document.body is right come to think of it.

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

Expert Comment

by:etain
Comment Utility
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.
0
 

Expert Comment

by:hema3i
Comment Utility
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>
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now