It appears you have not yet registered with DEVPPL. To register please click here... (it's fast, easy and free!)

Forum

Log In Sponsors
Board index Programming JavaScript Forum

javascript - how do creat dynamic text box

javascript - how do creat dynamic text box

Postby juvin on Fri Feb 09, 2007 10:26 am

Hi.
i have a select box which has 1,2,3,4,5 as values. when some one selects 1 , then dynapmically one text box has to be created. similarly when if they select 3, three text boxes has to be creted. how should i do this?
can anybody help me........
juvin
 
Posts: 2
Joined: Fri Feb 09, 2007 10:20 am

Postby mwa103 on Fri Feb 23, 2007 8:22 pm

Here is a sample of using css to hide text input fields until user selects the number of fields they want, then un-hiding that many fields. Not sure if it works the way you want, but I hope it helps.

-Mike

Code: Select all
<html>
<head>
<script type="text/javascript">

//Returns an element in document with passed id (objectId)
function getStyleObject(objectId) {
  if (document.getElementById && document.getElementById(objectId)) {
    return document.getElementById(objectId).style;
  } else if (document.all && document.all(objectId)) {
    return document.all(objectId).style;
  } else {
    return false;
  }
}

//Changes a the_div's display property to the_change (block or none)
function changeDiv(the_div,the_change)
{
  var the_style = getStyleObject(the_div);
  if (the_style != false)
  {
    the_style.display = the_change;
  }
}

//Hides all the text input fields
function hideAll()
{
   for(var i = 1; i < 6; i++)
   {
      thediv = "div" +i;
      changeDiv(thediv, "none");
   }
}

//Display selected number of boxes
function openBoxes()
{
   hideAll();
   var numBoxes = document.form1.numBoxes.value;
   var thediv;
   for(var i = 1; i <= numBoxes; i++)
   {
      thediv = "div" +i;
      changeDiv(thediv, "block");
   }
}
</script>
</head>
<body>
<form name='form1'>
   <select name=numBoxes onchange='openBoxes();'>
      <option>0</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
   </select><br />
   <div id='div1' style='display: none;'>
      Box Number 1: <input type=text name='box1' id='box1' value='box1' /><br />
   </div>
   <div id='div2' style='display: none;'>
      Box Number 2: <input type=text name='box2' id='box2' value='box2' /><br />
   </div>
   <div id='div3' style='display: none;'>
      Box Number 3: <input type=text name='box3' id='box3' value='box3' /><br />
   </div>
   <div id='div4' style='display: none;'>
      Box Number 4: <input type=text name='box4' id='box4' value='box4' /><br />
   </div>
   <div id='div5' style='display: none;'>
      Box Number 5: <input type=text name='box5' id='box5' value='box5' /><br />
   </div>
</form>
</body>
</html>
mwa103
100+ Club
 
Posts: 206
Joined: Mon Mar 07, 2005 10:55 pm

Postby juvin on Fri Feb 23, 2007 8:26 pm

Thanks a lot for your reply.......was very helpful
juvin
 
Posts: 2
Joined: Fri Feb 09, 2007 10:20 am


Who is online

Users browsing this forum: No registered users and 5 guests