/    Sign up×
Community /Pin to ProfileBookmark

Visibility problem

Hi have a newbie question and i have used the search box but couldnt find the answer basically i have a form and within this form is a div that i want to be visible or hidden depending on a user selection of a radio button however i cant seem to get it to work this is what i have coded begining with the div the full script in order can be found at the bottom of the page:

<div id=”NoOfPrivRM” align=”right” style=”visibility:hidden”>
Some other stuff here
</div>

before this div i have two check boxes when one is selected it calls a javascript function as so::
<input type=”radio” name=”privDin” value=”yes” onclick=”privDinY()”>
<input type=”radio” name=”privDin” value=”No” onClick=”privDinN()” >

and the two functions are:::

function privDinY(){
NoOfPrivRM.style.visibility=’visible’;
register2.privDinRm.focus();
}
function privDinN(){
NoOfPrivRm.style.visibility=’hidden’;
}

===========================Full script==============
<script type=”text/javascript”>
function privDinY(){
NoOfPrivRM.style.visibility=’visible’;
register2.privDinRm.focus();
}
function privDinN(){
NoOfPrivRm.style.visibility=’hidden’;
}
</script>
Yes
<input type=”radio” name=”privDin” value=”yes” onclick=”privDinY()”>
No
<input type=”radio” name=”privDin” value=”No” onClick=”privDinN()” checked=”checked”>
</span> </div></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td align=”right”>&nbsp;</td>
<td width=”116″>&nbsp;</td>
</tr>
<tr>
<td><span class=”style1″>No Of Private Rooms:</span></td>
<td colspan=”2″>
<div id=”NoOfPrivRM” align=”right” style=”visibility:visible”>
Some stuff here
</div>

to post a comment
JavaScript

9 Comments(s)

Copy linkTweet thisAlerts:
@KorJun 21.2006 — use the correct reference. All the tagged elements belong to the [B]document[/B] object and if they have an id, they have to be found on using getElementById() method

[COLOR=Red]document.[/COLOR][COLOR=Blue]getElementById('NoOfPrivRM')[/COLOR].style.visibility='visible';

[COLOR=Red]document.[/COLOR]register2.privDinRm.focus();

and so on
Copy linkTweet thisAlerts:
@omnipitenceauthorJun 21.2006 — thanks for the quick reply, ithat sorted it thanks again
Copy linkTweet thisAlerts:
@omnipitenceauthorJun 22.2006 — I go the visibility thing working for one box however when i try to add a second box to the list of paramaters the javascript stops working this is the code i have::


<script type="text/javascript">
function privdinrm(){

if (document.register2.privDinRm[0].selected)

document.register2.privDinRmNm.style.visibility='hidden';

document.register2.privDinRmS.style.visibility='hidden';

else if(document.register2.privDinRm[1].selected)

document.register2.privDinRmNm.style.visibility='visible';

document.register2.privDinRmS.style.visibility='visible';

}

if (document.all || document.getElementById)

setInterval("privdinrm()",100)

</script>


the second box is privDinRmS but for some reason the code wont work

any help would be really really appreciated.
Copy linkTweet thisAlerts:
@KorJun 22.2006 — why do you use a such a devious code.

I guess that you need to hide/show something acording to the selected option in a list box. If so, you must use the proper event. Why repeting a setimeout?, when you actualy may "capture" the select action using [B]onchange[/B] event handler attached to the SELECT element.

My i see your whole code (I mean the HTML related to your javascript code)?
Copy linkTweet thisAlerts:
@omnipitenceauthorJun 22.2006 — Ok here is the whole code:: I am new to using javascript but basically the first script diplays the select box if the person chooses yes to the question if no the select box isnt displayed.. the second script i was trying to get it to hide or display named text boxes dependent on the number selected from the dropdown menu. Thanks for your help so far.

<tr>

<td><span class="style1">Private Dining: </span></td>

<td colspan="2" align="right"><div align="right"><span class="style1">

<script type="text/javascript">

function privDinY(){

document.getElementById('NoOfPrivRM').style.visibility='visible';

document.getElementById('NoOfPrivRMT').style.visibility='visible';

document.register2.privDinRm.focus();

}

function privDinN(){

document.getElementById('NoOfPrivRM').style.visibility='hidden';

}

</script>

Yes

<input type="radio" name="privDin" value="yes" onclick="privDinY()" >

No

<input type="radio" name="privDin" value="No" onClick="privDinN()" checked="checked">

</span> </div></td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td align="right">&nbsp;</td>

<td width="116">&nbsp;</td>

</tr>

<tr>

<td><span id="NoOfPrivRMT" class="style1" style="visibility:hidden">No Of Private Rooms:</span></td>

<td colspan="2">

<div id="NoOfPrivRM" align="right" style="visibility:hidden">

<select name="privDinRm" type="text" value="<? echo $form->value("privDinRm"); ?>" maxlength="3">

<option selected></option>

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

<option>6</option>

<option>7</option>

<option>8</option>

<option>9</option>

<option>10</option>

</select>

<script type="text/javascript">

function privdinrm(){

if (document.register2.privDinRm[0].selected)

document.register2.privDinRmNm.style.visibility='hidden';

document.register2.privDinRmS.style.visibility='hidden'

else if(document.register2.privDinRm[1].selected)

document.register2.privDinRmNm.style.visibility='visible';

document.register2.privDinRmS.style.visibility='visible';*/

}

if (document.all || document.getElementById)

setInterval("privdinrm()",100)

</script>

</div></td><td><span class="style1"><? echo $form->error("privDinRm"); ?></span></td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td width="116">&nbsp;</td>

</tr>

<tr>

<td><span class="style1"> Room 1: </span></td>

<td width="48"><div align="right"><span class="style1">Name: </span>

</div></td>

<td width="144"><div align="right"><span class="style1">

<input name="privDinRmNm" type="text" value="<? echo $form->value("privDinRmNm"); ?>" maxlength="30" style="visibility:hidden" >

</span></div></td>

<td><span class="style1"><? echo $form->error("privDinRmNm"); ?>

</span></td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td width="116">&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td><div align="right"><span class="style1">Seats:</span></div></td>

<td><div align="right">

<select name="privDinRmS" type="text" value="<? echo $form->value("privDinRmS"); ?>" maxlength="10" style="visibility:hidden">

<option selected>1-10</option>

<option>10-25</option>

<option>25-50</option>

<option>50-75</option>

<option>75-100</option>

<option>100-150</option>

<option>150-250</option>

</select>

</div></td>

<td><div align="left"><span class="style1"><? echo $form->error("privDinRmS"); ?></span> </div></td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td width="116">&nbsp;</td>

</tr>
Copy linkTweet thisAlerts:
@KorJun 22.2006 — Exactly what I thought. use onchange handler and selectedIndex attribute:

<i>
</i>&lt;script type="text/javascript"&gt;
function privdinrm([COLOR=Green]f[/COLOR],[COLOR=Blue]s[/COLOR]){
if(s==0){
f['privDinRmNm'].style.visibility='hidden';
f['privDinRmS'].style.visibility='hidden';
}
else if(s==1){
f['privDinRmNm'].style.visibility='visible';
f['privDinRmS'].style.visibility='visible';
}
}
&lt;/script&gt;
......

&lt;select name="privDinRm" type="text" value="&lt;? echo $form-&gt;value("privDinRm"); ?&gt;" maxlength="3" [B]onchange[/B]="privdinrm([COLOR=Green]this.form[/COLOR],[COLOR=Blue]this.selectedIndex[/COLOR])"&gt;
..........
Copy linkTweet thisAlerts:
@omnipitenceauthorJun 22.2006 — I made the changes you suggested but it still doesnt work,,,

Would you like me to send you the .php file so you can take a look at it?
Copy linkTweet thisAlerts:
@KorJun 22.2006 — I made the changes you suggested but it still doesnt work,,,
[/QUOTE]


Should work:
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function privdinrm(f,s){
if(s==0){
f['privDinRmNm'].style.visibility='hidden';
f['privDinRmS'].style.visibility='hidden';
}
else if(s==1){
f['privDinRmNm'].style.visibility='visible';
f['privDinRmS'].style.visibility='visible';
}
}
</script>
</head>
<body>
<form>
<select onchange="privdinrm(this.form,this.selectedIndex)">
<option>hide</option>
<option>show</option>
</select>
<input type="text" name="privDinRmNm" value="privDinRmNm" style="visibility:hidden"><input type="text" name="privDinRmS" value="privDinRmS" style="visibility:hidden">
</form>

</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@omnipitenceauthorJun 22.2006 — Thank you soo much,, I managed to get it working you really really have helped. Thanks again.
×

Success!

Help @omnipitence spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...