Visual JSf: textField hide or disable, when selecting dropDown list

Question

Hello everyone,
I am new to this forum, I am working on Visaul JSF, I have a question,
When i select a value dropDown List, i want to disable or hide textField depending on the selected item in the list.
I have put javascript for dropDown list. I am not able to do this. Can any one help me please...
<webuijsf:script>
                    function fun(sel){
                        var state = sel.options[sel.selectedIndex].value;
                        alert(state);
                        if(state == 2){ alert("if");  document.getElementById('form1:textField2').disabled='true' }else{ alert("else"); document.getElementById('form1:textField2').disabled='false'}
                </webuijsf:script>for downdown, i have added this..
onChange="fun(this)"In dropdon list
name value
One 1
Two 2
Three 3
Jsp code:
<jsp:root version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:webuijsf="http://www.sun.com/webui/webuijsf">
    <jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/>
    <f:view>
        <webuijsf:page id="page1">
            <webuijsf:html id="html1">
                <webuijsf:script/>
                <webuijsf:script>
                    function fun(sel){
                        var state = sel.options[sel.selectedIndex].value * 1;
                        alert(state);
                        if(state == 2){ alert("if");  document.getElementById('form1:textField2').disabled='true' }else{ alert("else"); document.getElementById('form1:textField2').disabled='false'}
                </webuijsf:script>
                <webuijsf:head id="head1">
                    <webuijsf:link id="link1" url="/resources/stylesheet.css"/>
                </webuijsf:head>
                <webuijsf:body id="body1" style="-rave-layout: grid">
                    <webuijsf:form id="form1">
                        <webuijsf:textField id="textField2" onChange="" style="height: 18px; left: 174px; top: 258px; position: absolute; width: 216px"/>
                        <webuijsf:button id="button1" onClick="return fun()" style="position: absolute; left: 228px; top: 324px" text="Button"/>
                        <webuijsf:dropDown id="dropDown1" items="#{Page3.dropDown1DefaultOptions.options}" style="position: absolute; left: 312px; top: 90px" onChange="fun(this)"/>
                    </webuijsf:form>
                </webuijsf:body>
            </webuijsf:html>
        </webuijsf:page>
    </f:view>
</jsp:root>Thanks in advance
Neha
Edited by: Neha_540 on Apr 5, 2009 11:02 PM
Edited by: Neha_540 on Apr 5, 2009 11:05 PM

Answer 1

Hi Neha,
Hope this helps.
function changeMarital()
                            var marital = document.getElementById('form1:drpMarital_list').value;
                            if(marital == "Others")
                                document.getElementById('form1:lblOtherMarital').style.display='';
                                document.getElementById('form1:txtOtherMarital').style.display='';
                            else
                                document.getElementById('form1:lblOtherMarital').style.display='none';
                                document.getElementById('form1:txtOtherMarital').style.display='none';
                        }