Wednesday, July 15, 2009

Make Textbox hidden/visible based on the DropDown selection using JavaScript

SOLUTION:

the following function will help you to solve this ......


function hideTextBox(dropDown1){
var valFromDropDown = dropDown1.value;
if(valFromDropDown == 'WRITE'){
document.forms[0].textBox1.style.visibility = "";
} else{
document.forms[0].textBox1.style.visibility = "hidden";
}
}


in the above example hideTextBox is the function name .....
and the input for this function is dropDown value selected......
in this example we are hiding the the text box if the drop down value is 'WRITE' else it will show the textbox......



the following Example.jsp page will clearly explain you how to implement this and please ignore this Symobl(--)inside the every tag Starting. i put this (--) for displaying html tags only kindly ignore that symbol

Example.jsp(please ignore this(--)symbol and try it it will surely work
--------------------------------------------------------------------
<--%@taglib uri="/includes/struts-html.tld" prefix="html"%>
<--%@taglib uri="/includes/struts-bean.tld" prefix="bean"%>
<--%@taglib uri="/includes/struts-logic.tld" prefix="logic"%>



<--script language="javascript">

function hideTextBox(dropDown1){
var valFromDropDown = dropDown1.value;
if(valFromDropDown == 'WRITE'){
document.forms[0].textBox1.style.visibility = "";
} else{
document.forms[0].textBox1.style.visibility = "hidden";
}
}

<--/script>




<--table width="100%" border="0" cellspacing="0" cellpadding="0">

<--tr>
<--td width="20%">SelectProcess:
<--td width="30%">
<--html:select property="dropDown1" onchange="javascript:hideTextBox(this)">
<--html:option value="READ">Read
<--html:option value="WRITE">Write
<--html:option value="OVERWRITE">OverWrite
<--/html:select>
<--td width="20%">
<--td width="30%">
<--/tr>

<--tr>
<--td width="20%">TextBox1:
<--td width="30%">
<--td width="30%"><--html:text property="textBox1" maxlength="10" size="10">
<--/td>
<--td width="20%">
<--td width="30%">

<--/table>

<--/html:html>
--------------------------------------------------------------------------------------
from the above Example.jsp you can clearly understood how the function is implemented

note:

you have to declare these property in the form bean this is the example used in struts Frame work.

if you still having doubts write a comment on this.

Thanks
A.T.J

No comments:

Post a Comment