By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,696 Members | 1,422 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,696 IT Pros & Developers. It's quick & easy.

Dynamic textboxes

P: 10
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="<%=strHighlight%>">
<div align="left" class="paragraph">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1. General Teaching area</div>
</td>

<td align="left" valign="top" bgcolor="<%=strHighlight%>">
<div align="left" class="paragraph"><input type="text" onkeypress="return numbersonly(event)" 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="<%=strHighlight%>">
<div align="left" class="paragraph"><input type="text" onkeypress="return numbersonly(event)" 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="<%=strHighlight%>">
<div align="left" class="paragraph"><input type="text" onkeypress="return numbersonly(event)" 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="<%=strHighlight%>">
<div align="left" class="paragraph"><input type="text" onkeypress="return numbersonly(event)" 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="<%=strHighlight%>">
<div align="left" class="paragraph"><input type="text" onkeypress="return numbersonly(event)" 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="<%=strHighlight%>">
<div align="left" class="paragraph"><input type="text" onkeypress="return numbersonly(event)" 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="<%=strHighlight%>">
<div align="left" class="paragraph"><input type="text" onkeypress="return numbersonly(event)" 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="<%=strHighlight%>">
<div align="left" class="paragraph"><input type="text" onkeypress="return numbersonly(event)" 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="<%=strHighlight%>">
<div align="left" class="paragraph"><input type="text" onkeypress="return numbersonly(event)" 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="<%=strHighlight%>">
<div align="left" class="paragraph"><input type="text" onkeypress="return numbersonly(event)" 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="<%=strHighlight%>">
<div align="left" class="paragraph"></div>
</td>
</tr>

</Form>[/HTML]


The code for PQR.asp
Expand|Select|Wrap|Line Numbers
  1. <%
  2.  
  3.     Response.Write "<td align=""right"" width=""40%"" valign=""top"">"
  4.     response.Write "<div align=""left"" class=""paragraph"">"
  5.     response.Write "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
  6.     response.Write "1. General Teaching area"
  7.     response.Write "</div>"
  8.     response.Write "</td>"
  9.  
  10.         For i = 1 to 10
  11.  
  12.             response.Write "<td>"
  13.             response.Write "<div align=""left"" class=""paragraph"">" 
  14.             response.Write "<Input type=""text"" size=""10"" class=""textbox"" name=""temp"" onkeypress=""return numbersonly(event)"" >"
  15.             response.Write "</div>"
  16.             response.Write "</td>"
  17.  
  18.         Next
  19.  
  20. %>
  21.  
The code for xyz.js is

Expand|Select|Wrap|Line Numbers
  1. // JScript source code
  2. var request = false;
  3.  
  4. try
  5.     {
  6.         request =new XMLHttpRequest();
  7.     }
  8.     catch (trymicrosoft)
  9.         {
  10.             try
  11.                 {
  12.                     request = new ActiveXObject("Msxml2.XMLHTTP");
  13.                 }
  14.                 catch(othermicrosoft)
  15.                     {
  16.                         try    
  17.                             {
  18.                                 request = new ActiveXObject("Microsoft.XMLHTTP");
  19.                             }
  20.                             catch (failed)
  21.                             {
  22.                             request = false;
  23.                             }
  24.                     }
  25.         }
  26.  
  27. if(!request)
  28. {
  29. alert("Error creating XMLHttpRequest Object");
  30. }
  31.  
  32. else
  33. {
  34. //alert("done");
  35. }
  36.  
  37.  
  38. function addtextboxes()
  39. {
  40.  
  41.     var bID = document.getElementById("gt").id;
  42.     alert(bID);
  43.     var url = "formNB06Q5_textboxes.asp?bID=" + bID;
  44.     //var url = "formNB06Q5_textboxes.asp";
  45.     //alert("Ready state is:" + request.readystate);
  46.     //alert(url);
  47.     //alert("hello");
  48.     request.open("GET",url,true);
  49.     request.onreadystatechange = updatepage;
  50.     request.send(null);
  51.     //alert("Ready state is:" + request.readystate);
  52. }
  53.  
  54.  
  55. function updatepage()
  56. {
  57. // Output the current readystate
  58. alert("updatepage called with ready state:" + request.status + "and a response text of " + request.responseText + "'");
  59. //alert("updatepage called with ready state:" + request.readyState);    
  60.     //if (request.readystate == 4)
  61.     //{
  62.         alert("hello");
  63.         //alert("request.status" = + request.status);
  64.         if (request.status == 200)
  65.         {
  66.         //alert("request.status" = + request.status);
  67.         var response = request.responseText;
  68.         alert(response);
  69.         document.getElementById("gt").style.display="none";
  70.         document.getElementById("newgt").innerHTML = response.replace(/\n/g,"");
  71.         //alert(document.getElementById("newgt").innerHTML );
  72.         }
  73.         else
  74.         {
  75.         alert("Server done");
  76.         }
  77.     //}
  78.  
  79. }



Help in this regard is highly appreciated
Mar 29 '07 #1
Share this Question
Share on Google+
3 Replies


iam_clint
Expert 100+
P: 1,208
I think your trying incredibly too hard for a simple solution


Expand|Select|Wrap|Line Numbers
  1. <script>
  2. function MakeNewInput() {
  3. var ele = document.createElement("input");
  4. //append it to whatever Element you want.
  5. document.getElementsByTagName('body')[0].appendChild(ele);
  6. ele.type = "text";
  7. ele.style = "whateverstyle";
  8. ele.name = "whatevername";
  9. ele.value = "Type something here!";
  10. //add what ever else attributes you want
  11. }
  12. </script>
  13.  
Mar 29 '07 #2

P: 10
I think your trying incredibly too hard for a simple solution


Expand|Select|Wrap|Line Numbers
  1. <script>
  2. function MakeNewInput() {
  3. var ele = document.createElement("input");
  4. //append it to whatever Element you want.
  5. document.getElementsByTagName('body')[0].appendChild(ele);
  6. ele.type = "text";
  7. ele.style = "whateverstyle";
  8. ele.name = "whatevername";
  9. ele.value = "Type something here!";
  10. //add what ever else attributes you want
  11. }
  12. </script>
  13.  
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
Mar 29 '07 #3

P: 54
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
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.  
  3. <html>
  4. <head>
  5. <title>Textbox</title>
  6. </head>
  7.  
  8. <style>
  9. input[type=text] {width:100%}
  10. </style>
  11.  
  12. <body>
  13.  
  14. <button onclick="criarTextbox(10)">Create</button>
  15.  
  16. </body>
  17.  
  18. <script>
  19.  
  20. function criarTextbox(qt) {
  21.  
  22.     pageBody = document.getElementsByTagName("body")[0]
  23.     existingBoxes = document.getElementsByTagName("INPUT");
  24.  
  25.     if (existingBoxes.length > 1) {
  26.         for (z=existingBoxes.length-1; z>-1; z--) {
  27.             if (existingBoxes[z].className == "generated") {
  28.             pageBody.removeChild(existingBoxes[z])
  29.             }
  30.         }
  31.     }
  32.  
  33.     for (x=0; x<qt; x++) {
  34.     var tempBox = document.createElement("INPUT");
  35.     tempBox.type = "text";
  36.     tempBox.value = x+1
  37.     tempBox.className = "generated";
  38.     //here more attributes to the element
  39.     pageBody.appendChild(tempBox)
  40.     }
  41. }
  42.  
  43. </script>
  44.  
  45. </html>
  46.  
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.
Mar 30 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.