...

View Full Version : How to Hide/Unhide fields and some among other things



Kylena
08-06-2003, 03:28 AM
I'd like to know if there are ways to hide/unhide fields like radio options, text fields & others by using JavaScript.

If so how do I do it? I do know I will have to check the form every time. Is there a need to refresh the form? Will the refresh clear all the selections?

Things I'd like to hide:
1. Upon the selection of a radio option, another radio option will appear.
2. Upon the selection of a radio option, a text field will appear.

Sorry for asking so many questions. But I just got to know that I need to use JavaScript in my application and I have no idea how and where to start, just bumping around, & hoping that God will drop some hint. :p

glenngv
08-06-2003, 03:44 AM
Check this out:



<html>
<head>
<script type="text/javascript">
function doClick(objRad){
if (objRad.value=="0"){
document.getElementById("textbox").style.display='none'; //hide textbox
document.getElementById("otherOpt").style.display='block'; //show other options
}
else{
document.getElementById("otherOpt").style.display='none'; //hide other options
document.getElementById("textbox").style.display='block'; //show textbox
}
}
</script>
</head>
<body>
<form name="myform">
<table>
<tr>
<td>
<input type="radio" name="rad" value="0" onclick="doClick(this)">Other options
</td>
<td>
<div id="otherOpt" style="display:none">
<input type="radio" name="rad2" value="0">Option 1
<input type="radio" name="rad2" value="1">Option 2
</div>
</td>
<tr>
<td>
<input type="radio" name="rad" value="1" onclick="doClick(this)">Show textbox
</td>
<td>
<div id="textbox" style="display:none">
<input type="text" name="txt">
</div>
</td>
</form>
</body>
</html>

Kylena
08-06-2003, 04:01 AM
Dang it!

I can't use it in R5!

I deleted the <html>, <script> & other things that made the code outputs invisible in the browser. Finally I could see the code work in the browser but there was an error.

I'm very sure it would work very well if I'm designing a website just using FrontPage or some other software.

glenngv
08-06-2003, 04:36 AM
what is R5? what browser are you using?

Kylena
08-06-2003, 05:15 AM
Ok.

I'm currently using R5 - Lotus Notes Release 5.

This version allows JavaScript to be used and some tags like <script> are not supported on R5.

Thus I previously posted the same question in Lotus Notes forum but was told to look for such scripts in those JavaScript forums and that's how I came here.

The problem is that, the people here are more on web design gurus.

I don't know where else to look for someone who knows what's going on in R5 & JavaScript.

:(

glenngv
08-06-2003, 05:23 AM
Lotus Notes is just a Web server.
It just outputs HTML and javascript codes to the browser.
So it is still the browser that renders and interprets the scripts not the server.
If you "View-Source" the generated page by the server, you should see the code I posted. Can you post the generated html source?

Kylena
08-06-2003, 05:55 AM
I could just strangle the PC.

The script works now. I don't know if it's the cache or whatever...

Thank you, Glenn, for your help.

wesogs
08-23-2006, 10:31 AM
Hello all,

I've been messing round with this code to get a better understanding of it and I was wondering how to perform hiding and unhiding of a text field using a Combo Box selection instead of clicking a radio button?

Please have a look at the following code.

==========================================================

<html>
<head>
<script type="text/javascript">
function onSelect(objSelect){
if (objSelect.value=="1") {
document.getElementById("otherOpt").style.display='block'; // Show Options
}
}
</script>
</head>
<body>
<form name="submit_details">
<table border="1">
<tr>
<td>
<!-- When the user selects option 1, new options will appear -->
<select name="values">
<option value="">None</option>
<option value="1" onfocus="onSelect(this)">1</option>
<option value="2">2</option>
</select>
</td>
<td>
<div id="otherOpt" style="display:none">
<input type="radio" name="rad2" value="0">Option 1
<input type="radio" name="rad2" value="1">Option 2
</div>
</td>
</tr>
</table>
</form>
</body>
</html>

==========================================================

It is most likely a problem with onfocus function but ive tried onchange and onclick and they don't work either. Any help on this would be appreciated.

Thanks
Wes

SP Balamurugan
12-08-2011, 11:48 AM
<html>
<head>
<script type="text/javascript">
function onSelect(objSelect){
if (objSelect.value=="1") {
document.getElementById("otherOpt").style.display='block'; // Show Options
}else{
document.getElementById("otherOpt").style.display='none'; // hide Options
}
}
</script>
</head>
<body>
<form name="submit_details">
<table border="1">
<tr>
<td>
<!-- When the user selects option 1, new options will appear -->
<select name="values" onchange="onSelect(this);">
<option value="">None</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td>
<div id="otherOpt" style="display:none">
<input type="radio" name="rad2" value="0" checked="checked">Option 1
<input type="radio" name="rad2" value="1">Option 2
</div>
</td>
</tr>
</table>
</form>
</body>
</html>

Philip M
12-08-2011, 01:27 PM
Better late than never! :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum