Member Avatar for punithapary

Hi,

I need some help about dis.

I want to create 10 textbox automaticaly (if i give 10 in coding it will create 10 textbox automaticaly.using javascript how to do this) but not using HTML.Can anyone help me how to do this in js

Thanks
Punitha Pary

  • 4 Contributors
  • 5 Replies
  • 81 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by us12
Member Avatar for greeny_1984

Hope this helps

<script>
function addEvent()
{
var ni = document.getElementById('myDiv');
var spant = document.getElementById('span1');

var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;
document.form1.theValue.value = num;
var textIdName = "symptoms"+num;
var newText = document.createElement('TEXTAREA');
newText.cols = 35;
newText.rows = 3;
newText.name = textIdName;
newText.visibility = "visible";


ni.appendChild(newText);
ni.appendChild(document.createElement('BR'));

}
</script>
in html page
<input type="hidden" value="0" id="theValue" name="theValue"/>
 <tr>   
      <td height="22" align="left" valign="top" class="style5"><font face="Arial, Helvetica, sans-serif">dynamic textboxes</font></td>
		
   		<td valign="top">: </td>
    <td align="left">	
	<div id="myDiv">	</div>
	<span id="span1" name="span1"></span>
	<br />	</td>
   </tr>
Member Avatar for greeny_1984

i have missed where to keep event

in html page,add this code

<tr valign="top" bgcolor="#CCCCCC">
  <td height="16" colspan="6" align="center" valign="middle" bgcolor="#9CC7DE">
  <span class="style3"><font color="#006699"face="Arial, Helvetica, sans-serif"> Click</font></span>
<a href="javascript:;" class="vlite" onclick="addEvent();">Add new texxt box</a>&nbsp;&nbsp;&nbsp;&nbsp;
</td>
Member Avatar for Shanti C

try this .......it may help
write this in the head part........

<script language="javascript">
function changeIt()
{
var i = 1;
my_div.innerHTML = my_div.innerHTML +"<br><input type='text' name='mytext'+ i>"

}
</script>

and write this in the body.........

<form name="form" action="post" method="">
<input type="text" name=t1>
<input type="button" value="test" onClick="changeIt()">
<div id="my_div"></div>

with this code whenever you'll click the button a new textbox will appear.

Member Avatar for Shanti C

try this code ....
this code will generate text boxes based on dropdown...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

div.inputbox {
width: 200px;
font-size: 80%;
padding: 3px 0px 3px 50px;
}

</style>
<script type="text/javascript" language="javascript">

function setTextInputs(oSelect) {
var howmany = oSelect[oSelect.selectedIndex].value, add = true;
var n = 1, oForm = oSelect.form, oDiv, oInput;
while (oDiv = document.getElementById('Name' + n))
if (n++ > howmany) {
add = false;
oForm.removeChild(oDiv);
}
if (add)
for (n; n <= howmany; ++n) {
oDiv = document.createElement('div');
oDiv.setAttribute('id', 'Name' + n);
oDiv.className = 'inputbox';
oDiv.appendChild(document.createTextNode('Name ' + n + ': '));
oForm.appendChild(oDiv);

oInput = document.createElement('input');
oInput.setAttribute('type', 'text');
oInput.setAttribute('name', 'Name' + n);
oDiv.appendChild(oInput);
}
}

</script>
</head>
<body>
<form>
<p><strong>Number of People: </strong>
<select name="NoOfPpl" onchange="setTextInputs(this)">
<option value="0" selected="selected">- 0 -</option>
<option value="1">- 1 -</option>
<option value="2">- 2 -</option>
<option value="3">- 3 -</option>
<option value="4">- 4 -</option>
<option value="5">- 5 -</option>
<option value="6">- 6 -</option>
</select></p>
</form>
</body>
</html>
Member Avatar for us12

hai shanthi,
Its working....................

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.