Hiding/Displaying form fields.

[v_karthi]

Hi All,

I have situation whereby I have to hide/display fields based on the selection of previous field value. Is it possible to do it with JavaScript without moving the control to a new page?. Does anyone has idea on this.


Karthik

[lakshman]

Hi,

set object.onfocusout = handler in you input field.

In your handler use
document.<form>.<object>.style.visibility = "visible"; or
document.<form>.<object>.style.visibility = "hidden";


You could also use
document.<form>.<object>.disabled
document.<form>.<object>.disabled = true;


The second I think is what you will need.
You wouldn't want your users to see fields disappearing from the form.

[SniperX]

Im not too sure about this, but you could put everything in alot of div tags and based on the previous fields input set the div's too visible or not...

Regards MW

[v_karthi]

Hi All,

Thanks for your replies. I want to hide the field completely including associated <td> heading.

document.<form>.<object>.style.visibility="visible" or "hidden" can be used for my situation. I think, still something is lacking to hide the associated <td> which does not have any fields associated with it.

Given below is the actual situation:

The below is a portion of my form.

<tr height="20">

<td class="stylelevel0"><b>Employee Role:</b></td>

<td class="stylelevel0">

<select name="emptype" id="emptype"
onchange="javascript:checkuser();">
<option value="1" selected>Admin Staff</option>
<option value="2">Instructor</option>
<option value="3">Manager</option>
<option value="4">Staff</option>
</select>
</td>

</tr>

<tr height="20">

<td
class="stylelevel0"><b>Supervisor:</b></td>

<td class="stylelevel0"><input name="txtsupervisor"
type="text" id="txtsupervisor" size="20"
maxlength="50" disabled><a href=javascript:openwindow
()>
<fontize="-3"face='Verdana,Arial'>Search</font></a>
</td>

</tr>



When value in the <select> is changed, it will trigger "OnChange" event and which in turn will run javascript "checkuser()".

If the value choosen is "Manager", I have to enable the field to enter supervisor name. For other types, the field "txtsupervisor" should be disabled and they will get the value from another script "openwindow()" this is called from the "<a href>" and the value will be inserted to the form field. Basic idea here is to allow editing for user type "Manager". For others have to get from the popup window. So, the script does that.

Javascript checkuser():
===============

function checkuser()
{
var usrtype = document.adduser.emptype.options[document.adduser.emptype.selectedIndex].value;

if (usrtype == 3)
{
document.adduser.txtsupervisor.disabled = false;
}
else
{
document.adduser.txtsupervisor.disabled = true;
}

}

So far it is fine. Now I want to introduce a new field to collect a of "Coordinator" only when the selected value is manager. For other types (Admin Staff, Instructor, Staff), there is no coordinator. Hence I want to display the below lines only when manager option is selected from <select>


<tr height="20">
<td class="stylelevel01"><b>Coordinator:</b></td>
<td class="stylelevel01"><input name="txtcoordinator" type="text" id="txtcoordinator" size="20" maxlength="50"><a href=javascript:openwindow()><font size="-3" face='Verdana,Arial'>Search</font></a></td>
</tr>

Now, if i apply

document.<form>.<object>.style.visibility = "hidden";

property to the style "stylevel01" , the background color of the stylelevel01 is not applied, hence there is a "white strip" appears.

Any idea how to fix?

[SniperX]

add an id to the td's and use:
document.getElementById("id").style.visibility = 'hidden';

just like the div tag ideas