 |
| |
| Author |
Thread |
sdna2k
Bipolar (III) Inmate
From: Plano, TX
Insane since: Jun 2001
|
posted 09-04-2002 18:54
I need to JavaScript a page so that when the user clicks on the second of two radio buttons, a small textarea field will appear... and when he or she clicks the first radio button, the field will disappear (and the field will not be displayed as the default).
Any help is appreciated.
|
andy_j
Nervous Wreck (II) Inmate
From: uk
Insane since: Aug 2002
|
posted 09-04-2002 19:12
you could use something like this; 
<html>
<head>
<title>form control</title>
<script type="text/javascript">
function showIt() {
document.frm.text.style.visibility="visible"; //set to visible
}
function hideIt() {
document.frm.text.style.visibility="hidden"; //set to hidden
}
</script>
</head>
<body>
<form name="frm">
<input type="radio" name="rad" value="one" onclick="hideIt()"> <!--Hide the text box-->
<input type="radio" name="rad" value="two" onclick="showIt()"> <!--show the text box-->
<input type="text" name="text" style="visibility: hidden"> <!--set initially to hidden-->
</form>
</body>
</html>
[This message has been edited by andy_j (edited 09-04-2002).]
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 09-04-2002 19:42
Alternatively, you can use
document.frm.text.style.display="none"; // hide
and
document.frm.text.style.display="block"; // show
Which not only makes it invisible, but actually removes it from the page, so it no longer takes up any space.
NN4 doesn't support this though, so you may want to use *both* display and visibility to ensure it will at least partially work in almost all cases.
|
kuckus
Bipolar (III) Inmate
From: Berlin (almost)
Insane since: Dec 2001
|
posted 09-04-2002 19:47
Slime just pointed that out before I could, but I'll point you to the FAQ anyway, just to make sure you know some of its treasures: 
http://faq.ozoneasylum.com/751/
kuckus (cell #282)
|
sdna2k
Bipolar (III) Inmate
From: Plano, TX
Insane since: Jun 2001
|
posted 09-05-2002 16:50
Is there any way (still using JavaScript) to simply hide/unhide the HTML tags that would make up the form element (the textarea) and, say, and accompanying description (like "Description:")... without using style/visibility?
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 09-05-2002 17:45
Well, you could use the DOM to actually remove the nodes, but trust me, this is easier and will work in more browsers.
Put all the stuff you want to hide and show in a DIV tag, give the DIV an ID (id="hideshow" or something like that), and then use document.getElementById('hideshow').style. ... to access its display and visibility style properties.
|
lorig
Obsessive-Compulsive (I) Inmate
From:
Insane since: Nov 2002
|
posted 11-20-2002 21:50
I'm using the document.frm.text.style.display="" technique to hide/display form controls based on which radio button the user clicks. It works great, except I am having one problem:
If you submit the form, it generates a report - the radio button determines which report to run, and the form fields I am making visible are required to run that report. If the user then hits the back button (say they want to run the report again, but for different values), the form fields for that radio button are invisible again and you have to reclick the radio button for them to be displayed (which the user doesn't know to do, so they get an error).
This makes some sense because the form controls I am turning on and off are wrapped in div tags:
<div id="ESALShowHide" style="display: none"> so that when the form first loads, the fields are not displayed until the user clicks a radio button that needs those fields.
Is there a way to make it so when the user backs up it will display any form fields that were displayed before the form is submitted?
Thanks!
|
snips
Nervous Wreck (II) Inmate
From:
Insane since: Apr 2003
|
posted 04-25-2003 21:34
Iorg,
Did you ever find a resolution to your problem? I am having the same issue and have been unable to find an acceptable solution. If you found one, please let me know....
|
smonkey
Paranoid (IV) Inmate
From: Northumberland, England
Insane since: Apr 2003
|
posted 04-25-2003 22:07
I can only think you will need to use javascript to set cookies when the user submits the form. The only methods of passing variables between pages using javascript is either along with the url or by using cookies. With cookies you should be able to check how the user left the page providing you had the page set the cookie when they were on it. Using the url won't work when going back to the page because the information wont go both ways with this method (unless some clever guy has devised a very devious way of doin it)
I can't tell you how to 'bake' cookies of this sort or the practicalities of the method, but there are many good people here who can and you can find many tutorials on the web.
I'm not a coder so I may be wrong here, but I think I'm right.
P.S. you could also use frames or inline frames as javascript can pass variables between the them more easily.
visit my CryoKinesis Online Gallery
[This message has been edited by smonkey (edited 04-25-2003).]
|
snips
Nervous Wreck (II) Inmate
From:
Insane since: Apr 2003
|
posted 04-28-2003 16:15
I tried setting a basic cookie (because that's all I know how to do) and then put a check on the initial page to read the cookie value. When the form is submitted I use the value of the radio button that sets the show/hide value, but when you hit the back button, the page doesn't seem to read the new cookie value, and only uses the value that was set when the page first loaded.
Is there someway to create the cookie so the browser will read it, even though the user selected the backbutton and the page didn't actually reload?
|
smonkey
Paranoid (IV) Inmate
From: Northumberland, England
Insane since: Apr 2003
|
posted 04-28-2003 20:13
I don't kno much about cookies but I would think you could instruct a cookie to be set when the user clicks the submit button for the form. That way the only cookie that would be set would be the one with all the correct details. If you want to get a answer to this I would suggest that you start a new thread asking about setting cookies. I find that people tend to slow down with help when the thread gets old and a bit off it's original subject topic.
Other than that I would suggest googling for a tutorial or something similar.
Sorry I can't help more, I hope you get it sorted.
visit my CryoKinesis Online Gallery
|
Dracusis
Maniac (V) Inmate
From: Brisbane, Australia
Insane since: Apr 2001
|
posted 04-28-2003 22:55
I don't know if this will work but I think the best way around this it to check the history on the page the form is on. If the history shows that the page they just came from was inseed the page after the form was submitted then you relaod the current page and hopefully that will re-read the cookie and reset the history.
But I've never done this before so I don't know if it'll work. If the history doesn't change when you reload the page then it'll get stuck constantly reloading that page, which would be bad.
[This message has been edited by Dracusis (edited 04-28-2003).]
|
luddenj
Obsessive-Compulsive (I) Inmate
From: McLean, Va, USA
Insane since: Jun 2003
|
posted 06-05-2003 00:36
When using the back button to return to your previous form, you *can* display any of the hidden elements that were visible upon form submission.
Include a javascript function similar to this that is called in the 'body' tag onload attribute:
<script language="Javascript" type="text/javascript">
<!-- begin hiding
function checkHiddenElements() {
if (document.forms[0].blnRecommendCCS[0].checked) {
// check to see if your radio button is checked, if so, set the styles to block
document.getElementById('question7a').style.display = 'block';
document.getElementById('question7b').style.display = 'block';
} else {
// make sure they are hidden
document.getElementById('question7a').style.display = 'none';
document.getElementById('question7b').style.display = 'none';
}
}
// end hiding -->
</script>
<body onload="checkHiddenElements();">
This function will be run (even when using the back button to access the page) and will then set the elements of your form accordingly.
Happy coding.
Jeff
|
poi
Paranoid (IV) Inmate
From: France
Insane since: Jun 2002
|
posted 06-05-2003 01:05
I often have to handle the hide/display of form elements in extranet's UI. To make sure the hidden form elements aren't sent, onsubmit of the form, I browse each form element and then the nodes hierarchy ( via the DOM ) and remove the nodes that are invisibles. Thus the invisibles form elements no longer exists and are not sent
Hope that helps,
[EDIT
]Let's see a sample page code:
<html>
<body>
<form name="toto" onsubmit="return removeHiddenElements(this)">
<a href="#" onclick="with(document.getElementById('aaaSpan').style)display=display==''?'none':'';return false">
toggle field aaa display
</a>
<span id="aaaSpan">
aaa
<input name="aaa">
</span>
<br/>
<a href="#" onclick="with(document.getElementById('bbbSpan').style)display=display==''?'none':'';return false">
toggle field bbb display
</a>
<span id="bbbSpan">
bbb
<select name="bbb">
<option value="0">zero</option>
<option value="1">one</option>
</select>
</span>
<br/>
<a href="#" onclick="with(document.getElementById('cccSpan').style)display=display==''?'none':'';return false">
toggle field bbb display
</a>
<span id="cccSpan">
ccc
<input type="radio" name="ccc" value="circle" checked="checked">circle
<input type="radio" name="ccc" value="squarre">squarre
</span>
<br/>
<input type="submit" value=">>">
</form>
</body>
<script language="javascript">
function removeHiddenElements( formHandle )
{
i=0
// browse formHandle elements
while( (currentNode = formHandle.elements[ i ]) )
{
// browse the DOM
keepTheNodes = true
while( currentNode!=formHandle )
{
parentNode = currentNode.parentNode
if( currentNode.style && currentNode.style.display && currentNode.style.display=='none' )
{
// remove invisible nodes
keepTheNodes = false
currentNode.removeNode( true )
}
currentNode = parentNode
}
if( keepTheNodes )
i++
}
return true
}
</script>
</html>
Sorry if I fucked up the width of this page.
[/EDIT]
Mathieu "POÏ" HENRI
[This message has been edited by poi (edited 06-05-2003).]
|
Nevel
Bipolar (III) Inmate
From: Amsterdam
Insane since: Jun 2002
|
posted 06-05-2003 11:03
Peter Paul Koch has written a nice script for these purposes. Might be interesting to have a peek: http://www.xs4all.nl/~ppk/js/index.html http://digital-web.com/features/feature_2003-05b.shtml
|
