Discuss "display textboxes problem" in the JavaScript Programming forum.

todd2006 · #1 May 19th, 2008, 04:50 PM

Hi,

I have a drop down

the user selects a number from the drop down and then i display those many textboxes

so when the page is first displayed he only sees the drop down the textboxes will be displayed in a div

so here is my code I dont want to refresh or submit the page

Is there a way i get the drop down number in the div so i run a for loop and display the textboxes

Code:

<%
ReserveDisplay= "none"
%>


function displaydiv()
{
var getnum;
getnum=document.frm1.numfac.value;
document.frm1.numfacval.value=getnum;
hideAll();
changeDiv('reserve', 'block');
}

function changeDiv(the_div,the_change)
{
	var the_style = getStyleObject(the_div);
	

	if (the_style != false)
		{
			the_style.display = the_change;
		}
  }

function hideAll()
 {

	changeDiv("reserve", "none");
 }

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;
		}
}

<select  name="numfac" id="numfac" size="1" onChange="displaydiv();">
<option value="">Select a no</option>
<%
For i=1 To 25
%>
<option value="<%=i%>"><%=i%></option>
<%
Next
%>
</select>


<div id="reserve" style="display: <%=ReserveDisplay%>;">
Display DIV
<%
Dim getnumcount
getnumcount=Trim(Request.Form("numfacval"))
Response.write getnumcount
%>
</div>

<input type="hidden" name="numfacval" value="<%=numfacval>"/>

richyrich · #2 May 20th, 2008, 05:10 AM

You can clone a node using Javascript and append it to an existing div.
Have a look at this and see if it helps.

Code:

<%@LANGUAGE="VBSCRIPT"%>
<% option explicit %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace" >
<head>
    <title>Clone Object</title>
    <script type="text/javascript" language="javascript">
function cloneDiv(div_id){
     //clear the div where elements to be placed
    document.getElementById('root').innerHTML='';
    //create variable containg element to be cloned
   oEle = document.getElementById(div_id);
       //loop through cloning by value in dropdown
      for(var i=0;i<document.getElementById('ddl_no').value;i++){
            //make a clone of the div
           oClone=oEle.cloneNode(true);
            //find the input elements
           oField = oClone.getElementsByTagName('input');
           //rename each input element appending i to name
           oField[0].setAttribute('name',oField[0].getAttribute('name')+i);
           // set value of each input clone to ''
           oField[0].setAttribute('value','');
           //append the cloned div to the div named root
           document.getElementById('root').appendChild(oClone);
      }
}
    </script>
</head>
<body>
 <div>
  <select name="ddl_no" id="ddl_no" size="1" onchange="cloneDiv('clone')">
                     <% Dim i
                     for i = 1 to 25
                     response.Write("<option value="&i&">"&i&"</option>")
                     next
                     %>
                 </select>
                 <div style="display:none;">
                        <!-- element to be cloned -->
                        <div id="clone" style="height:25px;"> 
                                <input name="textbox" type="text" size="30" id="textbox"><br />
                        </div>
                        <!-- END element to be cloned -->
                  </div>
 </div>
           <div id="root"> 
                        <!-- cloned element to be placed here -- 
                  </div>
 
</body>
</html>

If there's any bit you're not sure about, post back.

Hope that helps.

todd2006 · #3 May 20th, 2008, 04:32 PM

Richyrich,

thanks for your reply. IT worked great. But i want to display one textbox and 2 drop downs

i tried to tweak the code but it doesnt work

can you tell me what i am doing wrong

Code:

function cloneDiv(div_id)
{
    document.getElementById('root').innerHTML='';
    oEle = document.getElementById(div_id);
    for(var i=0;i<document.getElementById('ddl_no').value;i++)
	{
       oClone=oEle.cloneNode(true);
       oField = oClone.getElementsByTagName('input');
       oField[0].setAttribute('txt_title',oField[0].getAttribute('txt_title')+i);
       oField[0].setAttribute('value','');
       document.getElementById('root').appendChild(oClone);
     }
    for(var i=0;i<document.getElementById('ddl_no').value;i++)
	{
       oClone=oEle.cloneNode(true);
       oField = oClone.getElementsByTagName('select');
       oField[0].setAttribute('drpdatebilld',oField[0].getAttribute('drpdatebilld')+i);
       oField[0].setAttribute('value','');
       document.getElementById('root').appendChild(oClone);
     }

}



<div style="display:none;">
<!-- element to be cloned -->
<div id="clone" style="height:25px;"> 
<table width="720">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>dateBilled</th>
</tr>
</thead>
<tbody>
<tr class="evenrow">
<td style="width:10px;">1</td
<td><input name="txt_title" type="text" size="30" id="txt_title"></td>
<td>
<select name="drpdatebilld" id="drpdatebilld" size="1">
<option value=""></option>
<%
For jh= 31  to 1 Step-1 
%>
<option value="<%=jh%>"><%=jh%></option>
<%
next
%>
</select> / 

<select name="drpamount" id="drpamount" size="1">
<option value=""></option>
<%
For jh= 6  to 1 Step-1 
%>
<option value="<%=jh%>"><%=jh%></option>
<%
next
%>
</select>
</td>
</tr>
</table>

</div>

</div>

<div id="root"> 

</div>

richyrich · #4 May 21st, 2008, 04:11 AM

Try this:-

Code:

<%@LANGUAGE="VBSCRIPT"%>
<% option explicit %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace" >
<head>
    <title>Clone Object</title>
    <script type="text/javascript" language="javascript">
   function cloneDiv(div_id){
           document.getElementById('root').innerHTML='';
           oEle = document.getElementById(div_id);
           for(var i=0;i<document.getElementById('ddl_no').value;i++){
                      oClone=oEle.cloneNode(true);
                      var sp_no = oClone.getElementsByTagName('span');
                      sp_no[0].innerHTML=i+1;
                      var arr_input = oClone.getElementsByTagName('input');
                      for(n=0;n<arr_input.length;n++){
                             oField = document.getElementById(arr_input[n].id);
                             oField.setAttribute('name',arr_input[n].getAttribute('name')+i);
                             oField.setAttribute('value','');
                      }
                      var arr_select = oClone.getElementsByTagName('select');
                      for(n=0;n<arr_input.length;n++){
                             oField = document.getElementById(arr_select[n].id);
                             oField.setAttribute('name',arr_select[n].getAttribute('name')+i);
                             oField.setAttribute('value','');
                      }
         document.getElementById('root').appendChild(oClone);
         }
}
    </script>
</head>
<body>
                     <div>
                     <select name="ddl_no" id="ddl_no" size="1" onchange="cloneDiv('clone')">
                     <% Dim i
                     for i = 1 to 25
                     response.Write("<option value="&i&">"&i&"</option>")
                     next
                     %>
                     </select>
                     </div>
<div style="display:none;">
<!-- element to be cloned -->
<div id="clone"> 
<table width="720">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>dateBilled</th>
</tr>
</thead>
<tbody>
<tr class="evenrow">
<td style="width:10px;"><span id="no"></span></td>
<td><input name="txt_title" type="text" size="30" id="txt_title"></td>
<td>
<select name="drpdatebilld" id="drpdatebilld" size="1">
<option value=""></option>
<%
Dim jh
For jh= 31  to 1 Step-1 
response.write("<option value="&jh&">"&jh&"</option>")
next
%>
</select> / 
<select name="drpamount" id="drpamount" size="1">
<option value=""></option>
<%
For jh= 6  to 1 Step-1 
response.write("<option value="&jh&">"&jh&"</option>")
next
%>
</select>
</td>
</tr>
</table>
</div>
</div>
<div id="root"> 
</div>
 
</body>
</html>

I also presumed you wanted the numbers to increment.

It will basically loop through all the input and select elements in your clone div no matter how many there are and clone them.

Hope that helps.

todd2006 · #5 May 21st, 2008, 11:47 AM

thank you so much for your reply.

my earlier code worked on

But it has a big problem

If i select 2 in the drop down i see the table headers twice one below each other

which is this code

Code:

<table width="720">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>dateBilled</th>
</tr>
</thead>

can you tell me how i can fix it

todd

todd2006 · #6 May 21st, 2008, 12:44 PM

Richyrich,

There are 2 problems.

First one is the header if i select 3 in the drop down i see 3 table headers

Second one is this code works in Firefox and not in IE

So when i select a number in the drop down it displays those many textboxes and drop downs
but also those many table headers

Code:

<%@LANGUAGE="VBSCRIPT"%>
<% option explicit %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace" >
<head>
    <title>Clone Object</title>
    <script type="text/javascript" language="javascript">
function cloneDiv(div_id)
{
    document.getElementById('root').innerHTML='';
    oEle = document.getElementById(div_id);
    for(var i=0;i<document.getElementById('ddl_no').value;i++)
	{
       oClone=oEle.cloneNode(true);
       oField = oClone.getElementsByTagName('input');
       oField[0].setAttribute('txt_title',oField[0].getAttribute('txt_title')+i);
       oField[0].setAttribute('value','');
       document.getElementById('root').appendChild(oClone);
     }
    for(var i=0;i<document.getElementById('ddl_no').value;i++)
	{
       oClone=oEle.cloneNode(true);
       oField = oClone.getElementsByTagName('select');
       oField[0].setAttribute('drpdatebilld',oField[0].getAttribute('drpdatebilld')+i);
       oField[0].setAttribute('value','');
       document.getElementById('root').appendChild(oClone);
     }


}

    </script>
</head>
<body>
                     <div>
                     <select name="ddl_no" id="ddl_no" size="1" onchange="cloneDiv('clone')">
                     <% Dim i
                     for i = 1 to 25
                     response.Write("<option value="&i&">"&i&"</option>")
                     next
                     %>
                     </select>
                     </div>
<div style="display:none;">
<!-- element to be cloned -->
<div id="clone"> 
<table width="720">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>dateBilled</th>
</tr>
</thead>
<tbody>
<tr class="evenrow">
<td style="width:10px;"><span id="no"></span></td>
<td><input name="txt_title" type="text" size="30" id="txt_title"></td>
<td>
<select name="drpdatebilld" id="drpdatebilld" size="1">
<option value=""></option>
<%
Dim jh
For jh= 31  to 1 Step-1 
response.write("<option value="&jh&">"&jh&"</option>")
next
%>
</select> / 
<select name="drpamount" id="drpamount" size="1">
<option value=""></option>
<%
For jh= 6  to 1 Step-1 
response.write("<option value="&jh&">"&jh&"</option>")
next
%>
</select>
</td>
</tr>
</table>
</div>
</div>
<div id="root"> 
</div>
 
</body>
</html>

When i use your code which is this i dont see the clone div in both browsers it doesnt display the textboxes and also the drop downs

Code:

<%@LANGUAGE="VBSCRIPT"%>
<% option explicit %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace" >
<head>
    <title>Clone Object</title>
    <script type="text/javascript" language="javascript">
   function cloneDiv(div_id){
           document.getElementById('root').innerHTML='';
           oEle = document.getElementById(div_id);
           for(var i=0;i<document.getElementById('ddl_no').value;i++){
                      oClone=oEle.cloneNode(true);
                      var sp_no = oClone.getElementsByTagName('span');
                      sp_no[0].innerHTML=i+1;
                      var arr_input = oClone.getElementsByTagName('input');
                      for(n=0;n<arr_input.length;n++){
                             oField = document.getElementById(arr_input[n].id);
                             oField.setAttribute('name',arr_input[n].getAttribute('name')+i);
                             oField.setAttribute('value','');
                      }
                      var arr_select = oClone.getElementsByTagName('select');
                      for(n=0;n<arr_input.length;n++){
                             oField = document.getElementById(arr_select[n].id);
                             oField.setAttribute('name',arr_select[n].getAttribute('name')+i);
                             oField.setAttribute('value','');
                      }
         document.getElementById('root').appendChild(oClone);
         }
}
    </script>
</head>
<body>
                     <div>
                     <select name="ddl_no" id="ddl_no" size="1" onchange="cloneDiv('clone')">
                     <% Dim i
                     for i = 1 to 25
                     response.Write("<option value="&i&">"&i&"</option>")
                     next
                     %>
                     </select>
                     </div>
<div style="display:none;">
<!-- element to be cloned -->
<div id="clone"> 
<table width="720">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>dateBilled</th>
</tr>
</thead>
<tbody>
<tr class="evenrow">
<td style="width:10px;"><span id="no"></span></td>
<td><input name="txt_title" type="text" size="30" id="txt_title"></td>
<td>
<select name="drpdatebilld" id="drpdatebilld" size="1">
<option value=""></option>
<%
Dim jh
For jh= 31  to 1 Step-1 
response.write("<option value="&jh&">"&jh&"</option>")
next
%>
</select> / 
<select name="drpamount" id="drpamount" size="1">
<option value=""></option>
<%
For jh= 6  to 1 Step-1 
response.write("<option value="&jh&">"&jh&"</option>")
next
%>
</select>
</td>
</tr>
</table>
</div>
</div>
<div id="root"> 
</div>
 
</body>
</html>

thanks for all your help

todd

richyrich · #7 May 21st, 2008, 02:31 PM

Hi. OK. I've tested this in FF, IE6 and IE7 and it worked fine for me. I tested the previous script in FF, not IE. The issue with IE is that it didn't seem to like .innerHTML, so I changed this to .innerText.

Code:

<%@LANGUAGE="VBSCRIPT"%>
<% option explicit %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace" >
<head>
    <title>Clone Object</title>
    <script type="text/javascript" language="javascript">
function cloneDiv(div_id){
    var browser = navigator.appName;
    if(browser.indexOf('Internet Explorer')!=-1){
    document.getElementById('root').innerText='';
    }else{
    document.getElementById('root').innerHTML='';
    }
    document.getElementById('header').style.visibility='visible';
    document.getElementById('root').innerText='';
    oEle = document.getElementById(div_id);
    for(i=0;i<document.getElementById('ddl_no').value;i++){
        oClone=oEle.cloneNode(true);
        var sp_no = oClone.getElementsByTagName('span');
        sp_no[0].innerHTML=i+1;
        var arr_input = oClone.getElementsByTagName('input');
        for(n=0;n<arr_input.length;n++){
            oField = document.getElementById(arr_input[n].id);
            oField.setAttribute('name',arr_input[n].getAttribute('name')+i);
            oField.setAttribute('value','');
        }
        var arr_select = oClone.getElementsByTagName('select');
        for(n=0;n<arr_select.length;n++){
            oField = document.getElementById(arr_select[n].id);
            oField.setAttribute('name',arr_select[n].getAttribute('name')+i);
            oField.setAttribute('value','');
        }
        document.getElementById('root').appendChild(oClone);
    }
}
    </script>
</head>
<body>
                     <div>
                     <select name="ddl_no" id="ddl_no" size="1" onchange="cloneDiv('row')">
                     <% Dim i
                     for i = 1 to 25
                     response.Write("<option value="&i&">"&i&"</option>")
                     next
                     %>
                     </select>
                     </div>
<!-- element to be cloned -->
<table width="720">
<thead id="header" style="visibility:hidden;">
<tr>
<th>No</th>
<th>Title</th>
<th>dateBilled</th>
</tr>
</thead>
<tbody style="display:none;">
<tr id="row" class="evenrow">
<td><span id="no"></span></td>
<td><input name="txt_title" type="text" size="30" id="txt_title"></td>
<td>
<select name="drpdatebilld" id="drpdatebilld" size="1">
<option value=""></option>
<%
Dim jh
For jh= 31  to 1 Step-1 
response.write("<option value="&jh&">"&jh&"</option>")
next
%>
</select> / 
<select name="drpamount" id="drpamount" size="1">
<option value=""></option>
<%
For jh= 6  to 1 Step-1 
response.write("<option value="&jh&">"&jh&"</option>")
next
%>
</select>
</td>
</tr>
</tbody>
<tfoot id="root">
</tfoot>
</table>
 
</body>
</html>

The problem was appending the clones somewhere. You'll see I'm cloning the tr within tbody and then appending it to tfoot.

I tried a number of different options, but this seemed to be the best. The problem is making sure the headers and rows line up because you can't embed div's inside tables.

I just hide the header row until the JS script is fired.

Hope that helps.

<edit>It wasn't working right in FF, so I added a little browser detection to toggle .innerHTML and .innerText</edit>

todd2006 · #8 May 21st, 2008, 02:47 PM

Richyrich,

thank you so much you rock.

I get this error

oEle is null or not an object on this line

oEle = document.getElementById(div_id);

so i tried it like this

var oEle = document.getElementById(div_id);

but same error

any idea

todd

todd2006 · #9 May 21st, 2008, 03:09 PM

richyrich,

I found the error

thank you so much it works great

but in Firefox if you select 4 and then you will see 4 textboxes

then when u change it to 8 it will show you the original 4 and then adds new 8

the counting is like this

1
2
3
4
1
2
3
4
5
6
7
8

but it works in IE

Can you tell me why it does that

todd

richyrich · #10 May 21st, 2008, 06:16 PM

See the change I made with regards to browser detection.

It is in the full code in my last post.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
display problem	todd2006	JavaScript Programming	19	May 12th, 2008 02:08 PM
text display problem	todd2006	HTML & CSS Help	10	May 7th, 2008 08:14 PM
display problem with drop downs	todd2006	JavaScript Programming	3	May 5th, 2008 05:31 PM
IE and Mozilla display problem	todd2006	HTML & CSS Help	11	April 18th, 2008 01:17 PM

Discuss "display textboxes problem" in the JavaScript Programming forum.

JavaScript Programming - Javascript is a cross-browser client-side scripting language. Discuss Javascript and AJAX related scripts here.