?
Solved

problem with hidden visibility <div>

Posted on 2003-03-05
12
Medium Priority
?
277 Views
Last Modified: 2008-03-10
the code in brief:
<div id='A' style="visibilty:hidden">
<table><tr><td>
  <input name="B" id="B1">
</table></div>
This section of code is not shown by default when the page loads.  It is shown when one of the redio buttons is checked in the page.  This part is ok.
The problem is I cannot get the value of the input field in javascript.  It tells me that 'document.form.B' is an [object], but when I get the value it returns [undefine].  Anyone knows why and how I can get the value?  or any better way for doing this?
0
Comment
Question by:kingsfan76
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 4
12 Comments
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8075207

<input name="B" id="B1"> should be <input name="B" id="B1" name="B1">

Fritz the Blank
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8075214
Oops, ignore that I meant:

<input name="B" id="B">

Fritz the Blank
0
 
LVL 46

Accepted Solution

by:
fritz_the_blank earned 300 total points
ID: 8075263
This shows a form that hides in a div tag. Try showing the form and put a value in field 1 and click on the show values button, and it works. If you hide the form, it will still work:

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;

function showValues(){
     alert(document.secondForm.text1.value)
}

function switchDiv(strDivName,bolVisible){

 //identify the element based on browser type
 if (isNS4) {
   objElement = document.layers[strDivName];
 } else if (isIE4) {
   objElement = document.all[strDivName];
 } else if (isIE5 || isNS6) {
   objElement = document.getElementById(strDivName);
 }
 
 if(isNS4){
     if(!bolVisible) {
       objElement.visibility ="hidden"
     } else {
       objElement.visibility ="visible"
     }    
 }else{
     if(!bolVisible) {
       objElement.style.visibility = "hidden";
     } else {
       objElement.style.visibility = "visible";
     }
 }
}
//-->
</SCRIPT>
</HEAD>

<BODY>

<FORM action="" method=POST id=form1 name=form1>
<p><INPUT type="button" value="Show" name=ShowMe onClick="switchDiv('myDiv',true)">
<INPUT type="button" value="Hide" name=HideMe onClick="switchDiv('myDiv',false)"></p>
<INPUT type="button" value="Show Values" id=button1 name=button1 onClick="showValues()">

</form>
<div id="myDiv" style="visibility:hidden;position:relative">
<form name="secondForm">
Text1<INPUT type="text" name="text1"><br>
Text2<INPUT type="text"  name="text2"><br>
<INPUT type="submit" value="Submit" id=submit1 name=submit1>
<INPUT type="reset" value="Reset" id=reset1 name=reset1>
</FORM>
</div>

</BODY>
</HTML>

Fritz the Blank
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8075297
I am also wondering about your input tag--you don't specify a type. That might be causing problems as well.

Fritz the Blank
0
 
LVL 12

Author Comment

by:kingsfan76
ID: 8075702
Thanks for the help.  but i think i found what the problem is.  let me describe it.  In the html body,
<form name="form1">
.......some other codes

<div id="B"></div>  This is where it supposed to show
.......some more codes

<div id="A" style="visibility:hidden">
     <input name="test">
</div>

</form>

There's a javascript function that sets
B.innerhtml = A.innerhtml
not the exact code but u know what i mean.  so the block of code will show up dynamically.  i think the problem is after setting the innerhtml, there are two input fields of the same name "test" under the same form coz <div B> gets the exact same code from <div A>.  is there anyway to go around this? or i have to use a second form?
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8075736
It is bad news to have more than one field with the same name. When you create the new block of dynamic code, you should set it up so that each new block gets an incremented number, so in Div A, the field is Test0, in Div B, Test1, and etc.

Fritz the Blank
0
 
LVL 12

Author Comment

by:kingsfan76
ID: 8075824
Thanks for the help.  but i think i found what the problem is.  let me describe it.  In the html body,
<form name="form1">
.......some other codes

<div id="B"></div>  This is where it supposed to show
.......some more codes

<div id="A" style="visibility:hidden">
     <input name="test">
</div>

</form>

There's a javascript function that sets
B.innerhtml = A.innerhtml
not the exact code but u know what i mean.  so the block of code will show up dynamically.  i think the problem is after setting the innerhtml, there are two input fields of the same name "test" under the same form coz <div B> gets the exact same code from <div A>.  is there anyway to go around this? or i have to use a second form?
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8075876
Please use the reload this question link in the upper left hand corner of this page. If you use the refresh from your browser it will repost your question.

I left you comment about your question above.

Fritz the Blank
0
 
LVL 12

Author Comment

by:kingsfan76
ID: 8075908
Thanks for the help.  but i think i found what the problem is.  let me describe it.  In the html body,
<form name="form1">
.......some other codes

<div id="B"></div>  This is where it supposed to show
.......some more codes

<div id="A" style="visibility:hidden">
     <input name="test">
</div>

</form>

There's a javascript function that sets
B.innerhtml = A.innerhtml
not the exact code but u know what i mean.  so the block of code will show up dynamically.  i think the problem is after setting the innerhtml, there are two input fields of the same name "test" under the same form coz <div B> gets the exact same code from <div A>.  is there anyway to go around this? or i have to use a second form?
0
 
LVL 12

Author Comment

by:kingsfan76
ID: 8076254
ooops.  no wonder.  thanks alot for ur help.

I got it now.  To avoid having the same name, i need to get rid of the code in <DIV A> after i tranfer it to <DIV B>
<script>
if (A.innerHTML != "")
{
   B.innerHTML = A.innerHTML;
   form1.Code.value = A.innerHTML;  //save the codes
   A.innerHTML = "";  //get rid of duplicate codes
}
else
   A.innerHTML = form1.Code.value;  //use the saved codes
</script>

<input type=hidden name="Code">
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8076318
Since the problem is solved, then why the grade of C?

Fritz the Blank
0
 

Expert Comment

by:DigitalXtreme
ID: 8236584
grade changed to a "B" as I'm believing the asker answered the question himself. If this is the case I will also refund their point to them. Any objections to this change should be posted here and I will review. Thank You

DigitalXtreme
CS Moderator
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you ever needed to get an ASP script to wait for a while? I have, just to let something else happen. Or in my case, to allow other stuff to happen while I was murdering my MySQL database with an update. The Original Issue This was written…
I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…
Add bar graphs to Access queries using Unicode block characters. Graphs appear on every record in the color you want. Give life to numbers. Hopes this gives you ideas on visualizing your data in new ways ~ Create a calculated field in a query: …
In this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA: https://www.percona.com/resources/we…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question