hide/show selective form items

[venkusalo]

greetings all,

I am building a new mail form. It would be great to be able to hide or show various elements according to various selections.

I have done a wee search and one way seems to be using dhtml and divs but I can see positioning dramas.

I am not sure if standard 'input' items can be hidden? A simple grey out - or inoperability (I had to type that word slowly :).

Any js suggestions?

thanks
|<

[Khalid Ali]

yes they can be only add the following

style="visibility:hidden;"

or

style="display:none;"

in the element...

[MadCommando]

I had the same sort of question a little while ago. Here's what you do.

You need some sort of criteria to happen in order for the boxes to be grayed out, such as an onClick event in my case.

I had mine grayed out depending on a checkbox, so the default left it open and in the input tag for the checkbox was onClick="return greycheck()" or some other function name. The function was then


function greycheck()
{
if (document.form.checkbox.checked) {document.form.inputboxtogrey.disabled=false}
else {document.form.inputboxtogrey.disabled=true}

if (document.form.inputboxtogrey.disabled==true) {document.form.inputboxtogrey.style.backgroundColor = 'gray';}
else {document.form.inputboxtogrey.style.backgroundColor = 'white'}
}


I think you can make your adjustments as needed. This will make the box unchangeable but with the current value intact, and greyed out. It isn't the best looking thing, but it works. You might be able to use the document.form.inputboxtogrey.style and change the type color, so it blends with your grayed out box, but I'm not sure... you might want to look around for that.

[venkusalo]

thanks Khalid - a good tip

what I am after is more what MadCommando has suggested

I will try this and see what the document.form.inputboxtogrey.style yields on search

thanks
|<

[venkusalo]

not sure if anyone is following this but here is a solution I came across. Just paste the following into a txt file and save as .htm


Before selecting a radio button, try typing in the text field - you can't!
<form name=form22>
<br><b>Question 1</b>
<BR>
<table>
<tr>
<td>Answer a:<input type=radio name=sex value=male

onclick="javascript:document.form22.car.disabled=false">
<BR>Answer b:<input type=radio name=sex value=male

onclick="javascript:document.form22.car.disabled=false"><BR>
</td></tr>
<tr>
<td valign=top><BR><b>Explain your choice:</b><BR>
<input type=text name=car disabled=true><BR>
</td></tr>
</table>
</form>

Once you've set the disabled tag, you can enable it using something like the following code:

<script language="javascript">
function enableField()
{document.form22.car.disabled=false;}
</script>

<a href="javascript:enableField()">Click here to enable the element<a/>

[MadCommando]

Yeah looks like you figured it out. You might just want to put in the style.background="" parts though so it's a bit more obvious if it's been disabled.

[venkusalo]

Greetings madcommando,

Many thanks for your follow up - it would have been so easy for me to get it working and just blithely overlook this very useful tip which makes it SO much easier for the user.

I have it toggling - very nice

thanks
|<us/\!0

[MadCommando]

no prob, I just want to know if you found the command to change the text color so it blends in if there's text there.

[venkusalo]

greetings MadCommando,

Yes, I got a little toggle going. Choice is always nice - according to site colour scheme and such.
Here is my working sample...

Red??-?
no accounting for taste :)

<form name=form22><P>

<script language="javascript">
function greycheck()
{ if (document.form22.red.checked) {document.form22.car.disabled=true}
else {document.form22.car.disabled=false}
if (document.form22.car.disabled==true) {document.form22.car.style.backgroundColor = 'red';}
else {document.form22.car.style.backgroundColor = 'white'} }
</script>

disable <input type=radio name=red value="" onClick="javascript:document.form22.xx.checked=false;return greycheck()"><br>
Enable<input type=radio name=xx value="" onclick="javascript:document.form22.car.disabled=false; document.form22.red.checked=false;return greycheck()">

<BR><b>This box toggles: enable-disable:</b><BR>
<input type=text name=car disabled=true style.background="black"><BR>
</form>