• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 278
  • Last Modified:

problem with hidden visibility <div>

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
kingsfan76
Asked:
kingsfan76
  • 7
  • 4
1 Solution
 
fritz_the_blankCommented:

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

Fritz the Blank
0
 
fritz_the_blankCommented:
Oops, ignore that I meant:

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

Fritz the Blank
0
 
fritz_the_blankCommented:
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
fritz_the_blankCommented:
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
 
kingsfan76Author Commented:
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
 
fritz_the_blankCommented:
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
 
kingsfan76Author Commented:
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
 
fritz_the_blankCommented:
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
 
kingsfan76Author Commented:
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
 
kingsfan76Author Commented:
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
 
fritz_the_blankCommented:
Since the problem is solved, then why the grade of C?

Fritz the Blank
0
 
DigitalXtremeCommented:
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

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 7
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now