DeveloperBarn Forums

Go Back   DeveloperBarn Forums > Programming & Scripting > JavaScript Programming
display textboxes problem display textboxes problem
Register Blogs FAQ Awards Members List Calendar Search Today's Posts Mark Forums Read

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.


Reply « Previous Thread | Next Thread »
Page 1 of 2 1 2 >
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old May 19th, 2008, 04:50 PM
Contributing Member

  
Join Date: Mar 2008
Posts: 174
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Power: 1
todd2006 is an unknown quantity at this point
Default display textboxes problem
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>"/>
Reply With Quote
Sponsored Links
  #2 (permalink)  
Old May 20th, 2008, 05:10 AM
richyrich's Avatar
Moderator

  
Join Date: Mar 2008
Location: Somewhere only we know...
Posts: 325
Thanks: 22
Thanked 23 Times in 23 Posts
Rep Power: 1
richyrich is on a distinguished road

Awards Showcase
Classic ASP JavaScript 
Total Awards: 2

Default
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.
Last edited by richyrich; May 20th, 2008 at 05:13 AM.
Reply With Quote
  #3 (permalink)  
Old May 20th, 2008, 04:32 PM
Contributing Member

  
Join Date: Mar 2008
Posts: 174
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Power: 1
todd2006 is an unknown quantity at this point
Default
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>
Reply With Quote
  #4 (permalink)  
Old May 21st, 2008, 04:11 AM
richyrich's Avatar
Moderator

  
Join Date: Mar 2008
Location: Somewhere only we know...
Posts: 325
Thanks: 22
Thanked 23 Times in 23 Posts
Rep Power: 1
richyrich is on a distinguished road

Awards Showcase
Classic ASP JavaScript 
Total Awards: 2

Default
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.
Last edited by richyrich; May 21st, 2008 at 04:13 AM.
Reply With Quote
  #5 (permalink)  
Old May 21st, 2008, 11:47 AM
Contributing Member

  
Join Date: Mar 2008
Posts: 174
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Power: 1
todd2006 is an unknown quantity at this point
Default
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
Reply With Quote
  #6 (permalink)  
Old May 21st, 2008, 12:44 PM
Contributing Member

  
Join Date: Mar 2008
Posts: 174
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Power: 1
todd2006 is an unknown quantity at this point
Default
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
Reply With Quote
  #7 (permalink)  
Old May 21st, 2008, 02:31 PM
richyrich's Avatar
Moderator

  
Join Date: Mar 2008
Location: Somewhere only we know...
Posts: 325
Thanks: 22
Thanked 23 Times in 23 Posts
Rep Power: 1
richyrich is on a distinguished road

Awards Showcase
Classic ASP JavaScript 
Total Awards: 2

Default
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>
Last edited by richyrich; May 21st, 2008 at 02:40 PM. Reason: I added some browser detection...
Reply With Quote
  #8 (permalink)  
Old May 21st, 2008, 02:47 PM
Contributing Member

  
Join Date: Mar 2008
Posts: 174
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Power: 1
todd2006 is an unknown quantity at this point
Default
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
Reply With Quote
  #9 (permalink)  
Old May 21st, 2008, 03:09 PM
Contributing Member

  
Join Date: Mar 2008
Posts: 174
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Power: 1
todd2006 is an unknown quantity at this point
Default
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
Reply With Quote
  #10 (permalink)  
Old May 21st, 2008, 06:16 PM
richyrich's Avatar
Moderator

  
Join Date: Mar 2008
Location: Somewhere only we know...
Posts: 325
Thanks: 22
Thanked 23 Times in 23 Posts
Rep Power: 1
richyrich is on a distinguished road

Awards Showcase
Classic ASP JavaScript 
Total Awards: 2

Default
See the change I made with regards to browser detection.

It is in the full code in my last post.
Reply With Quote
Reply
Page 1 of 2 1 2 >

  DeveloperBarn Forums > Programming & Scripting > JavaScript Programming

Bookmarks

« Previous Thread | Next Thread »
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

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


Sponsored Links
ASP.NET Resource Index
a directory of ASP.NET tutorials, applications, scripts, assemblies and articles for the novice to professional developer.

Free Web Directory
Including Chats and Forums Resources, Offer automatic, instant and free directory submissions. 		URLZ Web Directory
URLZ Web Directory

Free Web Directory - Add Your Link
The Little Web Directory 		Free Web Directory
Pegasus free web directory is a free directory organised by categories.

Web Directory & SEO Services
dirroot web directory

All times are GMT -4. The time now is 10:30 PM.

Contact Us - DeveloperBarn.com - Archive - Top

Powered by vBulletin® Version 3.7.2
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.2.0
Copyright © 2008 DeveloperBarn.com

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46