Dynamic textboxes

[sakhan]

Hello Friends,

I want to create a row of 10 textboxes each time I click the add button.
I want this to continue till it reaches five hundred
I am using AJAX for this.

It doesnot create 10 new textboxes eachtime I click the ADD button

The problem is There are already 10 textboxes on the ASP Page inside a <TR> </TR> Tag.

I need to disable that and add new text boxes inside this <TR> </TR> Tag


I have got 3 files for the same.
1. abc.asp (File that already holds 10 textboxes)
2. pqr.asp (File that creates 10 textboxes each time the add buton is clicked)
3. xyz.js (This is the AJAX file which puts the 10 new textboxes, this is referenced in abc.asp)


Code for abc.asp is as follows

[HTML]
<Form name="test">
<tr id="gt" STYLE="display: none;">
<td align="right" width="40%" valign="top" bgcolor="<%=str Highlight%>">
<div align="left" class="paragrap h">&nbsp;&nbsp; &nbsp;&nbsp;&nb sp;1. General Teaching area</div>
</td>

<td align="left" valign="top" bgcolor="<%=str Highlight%>">
<div align="left" class="paragrap h"><input type="text" onkeypress="ret urn numbersonly(eve nt)" name="PS_B_1A" value="" size="10" style="text-align: right; background-color: #FFFFFF; border: 1 solid #808080" class="textbox" ></div>
</td>

<td align="left" valign="top" bgcolor="<%=str Highlight%>">
<div align="left" class="paragrap h"><input type="text" onkeypress="ret urn numbersonly(eve nt)" name="PS_B_1B" value="" size="10" style="text-align: right; background-color: #FFFFFF; border: 1 solid #808080" class="textbox" ></div>
</td>

<td align="left" valign="top" bgcolor="<%=str Highlight%>">
<div align="left" class="paragrap h"><input type="text" onkeypress="ret urn numbersonly(eve nt)" name="PS_B_1C" value="" size="10" style="text-align: right; background-color: #FFFFFF; border: 1 solid #808080" class="textbox" ></div>
</td>

<td align="left" valign="top" bgcolor="<%=str Highlight%>">
<div align="left" class="paragrap h"><input type="text" onkeypress="ret urn numbersonly(eve nt)" name="PS_B_1D" value="" size="10" style="text-align: right; background-color: #FFFFFF; border: 1 solid #808080" class="textbox" ></div>
</td>
<td align="left" valign="top" bgcolor="<%=str Highlight%>">
<div align="left" class="paragrap h"><input type="text" onkeypress="ret urn numbersonly(eve nt)" name="PS_B_1E" value="" size="10" style="text-align: right; background-color: #FFFFFF; border: 1 solid #808080" class="textbox" ></div>
</td>
<td align="left" valign="top" bgcolor="<%=str Highlight%>">
<div align="left" class="paragrap h"><input type="text" onkeypress="ret urn numbersonly(eve nt)" name="PS_B_1F" value="" size="10" style="text-align: right; background-color: #FFFFFF; border: 1 solid #808080" class="textbox" ></div>
</td>
<td align="left" valign="top" bgcolor="<%=str Highlight%>">
<div align="left" class="paragrap h"><input type="text" onkeypress="ret urn numbersonly(eve nt)" name="PS_B_1G" value="" size="10" style="text-align: right; background-color: #FFFFFF; border: 1 solid #808080" class="textbox" ></div>
</td>
<td align="left" valign="top" bgcolor="<%=str Highlight%>">
<div align="left" class="paragrap h"><input type="text" onkeypress="ret urn numbersonly(eve nt)" name="PS_B_1H" value="" size="10" style="text-align: right; background-color: #FFFFFF; border: 1 solid #808080" class="textbox" ></div>
</td>
<td align="left" valign="top" bgcolor="<%=str Highlight%>">
<div align="left" class="paragrap h"><input type="text" onkeypress="ret urn numbersonly(eve nt)" name="PS_B_1I" value="" size="10" style="text-align: right; background-color: #FFFFFF; border: 1 solid #808080" class="textbox" ></div>
</td>
<td align="left" valign="top" bgcolor="<%=str Highlight%>">
<div align="left" class="paragrap h"><input type="text" onkeypress="ret urn numbersonly(eve nt)" name="PS_B_1J" value="" size="10" style="text-align: right; background-color: #FFFFFF; border: 1 solid #808080" class="textbox" ></div>
</td>

<td align="left" valign="top" bgcolor="<%=str Highlight%>">
<div align="left" class="paragrap h"></div>
</td>
</tr>

</Form>[/HTML]


The code for PQR.asp

<%

	Response.Write "<td align=""right"" width=""40%"" valign=""top"">"
	response.Write "<div align=""left"" class=""paragraph"">"
	response.Write "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
	response.Write "1. General Teaching area"
	response.Write "</div>"
	response.Write "</td>"
	
		For i = 1 to 10

			response.Write "<td>"
			response.Write "<div align=""left"" class=""paragraph"">" 
			response.Write "<Input type=""text"" size=""10"" class=""textbox"" name=""temp"" onkeypress=""return numbersonly(event)"" >"
			response.Write "</div>"
			response.Write "</td>"
			
		Next

%>

The code for xyz.js is

// JScript source code
var request = false;

try
	{
		request =new XMLHttpRequest();
	}
	catch (trymicrosoft)
		{
			try
				{
					request = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch(othermicrosoft)
					{
						try	
							{
								request = new ActiveXObject("Microsoft.XMLHTTP");
							}
							catch (failed)
							{
							request = false;
							}
					}
		}

if(!request)
{
alert("Error creating XMLHttpRequest Object");
}

else
{
//alert("done");
}


function addtextboxes()
{
	
	var bID = document.getElementById("gt").id;
	alert(bID);
	var url = "formNB06Q5_textboxes.asp?bID=" + bID;
	//var url = "formNB06Q5_textboxes.asp";
	//alert("Ready state is:" + request.readystate);
	//alert(url);
	//alert("hello");
	request.open("GET",url,true);
	request.onreadystatechange = updatepage;
	request.send(null);
	//alert("Ready state is:" + request.readystate);
}


function updatepage()
{
// Output the current readystate
alert("updatepage called with ready state:" + request.status + "and a response text of " + request.responseText + "'");
//alert("updatepage called with ready state:" + request.readyState);	
	//if (request.readystate == 4)
	//{
		alert("hello");
		//alert("request.status" = + request.status);
		if (request.status == 200)
		{
		//alert("request.status" = + request.status);
		var response = request.responseText;
		alert(response);
		document.getElementById("gt").style.display="none";
		document.getElementById("newgt").innerHTML = response.replace(/\n/g,"");
		//alert(document.getElementById("newgt").innerHTML );
		}
		else
		{
		alert("Server done");
		}
	//}

}

Help in this regard is highly appreciated

[iam_clint]

I think your trying incredibly too hard for a simple solution

<script>
function MakeNewInput() {
var ele = document.createElement("input");
//append it to whatever Element you want.
document.getElementsByTagName('body')[0].appendChild(ele);
ele.type = "text";
ele.style = "whateverstyle";
ele.name = "whatevername";
ele.value = "Type something here!";
//add what ever else attributes you want
}
</script>

[sakhan]

I think your trying incredibly too hard for a simple solution

<script>
function MakeNewInput() {
var ele = document.createElement("input");
//append it to whatever Element you want.
document.getElementsByTagName('body')[0].appendChild(ele);
ele.type = "text";
ele.style = "whateverstyle";
ele.name = "whatevername";
ele.value = "Type something here!";
//add what ever else attributes you want
}
</script>

Thanks for the solution. But its half of the solution for me.
I need the function to create a row of 10 textboxes
I tried a for loop in the function but it doesnot work !
Another thing the function needs to remove the existing textboxes and create new ones in their place.
Help will be highly appreciated.
Regards
Mohammed Khan

[Romulo NF]

Thanks for the solution. But its half of the solution for me.
I need the function to create a row of 10 textboxes
I tried a for loop in the function but it doesnot work !
Another thing the function needs to remove the existing textboxes and create new ones in their place.
Help will be highly appreciated.
Regards
Mohammed Khan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Textbox</title>
</head>

<style>
input[type=text] {width:100%}
</style>

<body>

<button onclick="criarTextbox(10)">Create</button>

</body>

<script>

function criarTextbox(qt) {

	pageBody = document.getElementsByTagName("body")[0]
	existingBoxes = document.getElementsByTagName("INPUT");
	
	if (existingBoxes.length > 1) {
		for (z=existingBoxes.length-1; z>-1; z--) {
			if (existingBoxes[z].className == "generated") {
			pageBody.removeChild(existingBoxes[z])
			}
		}
	}

	for (x=0; x<qt; x++) {
	var tempBox = document.createElement("INPUT");
	tempBox.type = "text";
	tempBox.value = x+1
	tempBox.className = "generated";
	//here more attributes to the element
	pageBody.appendChild(tempBox)
	}
}

</script>

</html>

Don´t know if i have understood your question right... but i think that could help you improve further.
Its creating x textboxes based on a parameter that you pass and before creating the textboxes its searching for previously created textboxes to remove em.