0

i need some option like: three input fields linked with three radio buttons, initially all the fields should active, if i click first radio button it should disable 2nd & 3rd inputfiled, please understood all the radio buttons only make active only linked inputfiled.

This is a simple online submit form i wanted to create. In this form if any one clicked radio button B. he can only able to enter fields in School / Collage Students section, A & C section should be disabled mode.

Since not able to paste the code, i have attached a link here

can you help me in this, i will appreciate if you provide JSFiddle demo.

  • 1
    Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. – Jarvis May 26 '17 at 4:08
  • 1
    if you can please post your code as well, that would help to analyze. – Nitish Singhal May 26 '17 at 4:35
  • This is a simple online submit form i wanted to create. In this form if any one clicked radio button B. he can only able to enter fields in School / Collage Students section, A & C section should be disabled mode. – Elango May 26 '17 at 13:51
1

Here a javascript function is written which is performing the task of disabling the inputText. At javascript the "removeAttribute" is enabling your inputtext and ".setAttribute("disabled", true)" is disabling your inputText. Each and every time you need to check and make 1 full set enable and rest 2 full set disable. Here we are identifying the row selected with the parameter passed from the function(here a/b/c). Based on it we are doing our action.

please find the code below :

    <apex:page id="myPageID">
<script>
    function makeReadOnly(PassedVal){
        var gotValue = PassedVal;
        if(gotValue == 'a'){
            document.getElementById("Rwradio1Id").checked = true;
            document.getElementById("Rwradio2Id").checked = false;
            document.getElementById("Rwradio3Id").checked = false;              

            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:AFstNamId").removeAttribute('disabled');
            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:ALstNamInpId").removeAttribute('disabled');
            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:ACmpNamInpId").removeAttribute('disabled');
            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:ADsgInpId").removeAttribute('disabled');
            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:AAddInpId").removeAttribute('disabled');
            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:AMblInpId").removeAttribute('disabled');
            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:AEmlInpId").removeAttribute('disabled');

            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BFstNamId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BLstNamInpId").setAttribute("disabled", true); 
            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BCmpNamInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BDsgInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BAddInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BMblInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BEmlInpId").setAttribute("disabled", true);


            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CFstNamId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CLstNamInpId").setAttribute("disabled", true); 
            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CCmpNamInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CDsgInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CAddInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CMblInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CEmlInpId").setAttribute("disabled", true);
        }
        else if (gotValue == 'b'){
            document.getElementById("Rwradio1Id").checked = false;
            document.getElementById("Rwradio2Id").checked = true;
            document.getElementById("Rwradio3Id").checked = false;

            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:AFstNamId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:ALstNamInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:ACmpNamInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:ADsgInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:AAddInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:AMblInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:AEmlInpId").setAttribute("disabled", true);

            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BFstNamId").removeAttribute('disabled');
            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BLstNamInpId").removeAttribute('disabled'); 
            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BCmpNamInpId").removeAttribute('disabled');
            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BDsgInpId").removeAttribute('disabled');
            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BAddInpId").removeAttribute('disabled');
            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BMblInpId").removeAttribute('disabled');
            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BEmlInpId").removeAttribute('disabled');


            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CFstNamId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CLstNamInpId").setAttribute("disabled", true); 
            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CCmpNamInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CDsgInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CAddInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CMblInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CEmlInpId").setAttribute("disabled", true);
        }
        else if (gotValue == 'c'){              
            document.getElementById("Rwradio1Id").checked = false;
            document.getElementById("Rwradio2Id").checked = false;
            document.getElementById("Rwradio3Id").checked = true;

            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:AFstNamId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:ALstNamInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:ACmpNamInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:ADsgInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:AAddInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:AMblInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:ADetlPgBlkId:AEmlInpId").setAttribute("disabled", true);

            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BFstNamId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BLstNamInpId").setAttribute("disabled", true); 
            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BCmpNamInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BDsgInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BAddInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BMblInpId").setAttribute("disabled", true);
            document.getElementById("myPageID:MyFrmId:BDetlPgBlkId:BEmlInpId").setAttribute("disabled", true);


            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CFstNamId").removeAttribute('disabled');
            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CLstNamInpId").removeAttribute('disabled');
            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CCmpNamInpId").removeAttribute('disabled');
            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CDsgInpId").removeAttribute('disabled');
            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CAddInpId").removeAttribute('disabled');
            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CMblInpId").removeAttribute('disabled');
            document.getElementById("myPageID:MyFrmId:CDetlPgBlkId:CEmlInpId").removeAttribute('disabled');
        }
    }

</script>


<apex:form id="MyFrmId">
    <apex:pageBlock id="pgBlkId">            
        <table id="Mytabls1Id">
            <tr id="row1ID">
                <td> <input type="radio" name="A" value="A. MNC / Large / Med Scale companies" onClick="makeReadOnly('a');" id="Rwradio1Id"/></td>
                <td><apex:outputLabel value="A. MNC / Large / Med Scale companies" for="A" /></td>

                <td> <input type="radio" name="B" value="B. School / Collage Students" onClick="makeReadOnly('b');" id="Rwradio2Id"/></td>
                <td><apex:outputLabel value="B. School / Collage Students" for="B" /></td>

                <td> <input type="radio" name="C" value="C. Research Students" onClick="makeReadOnly('c');" id="Rwradio3Id"/></td>
                <td><apex:outputLabel value="C. Research Students" for="C" /></td>
            </tr>
        </table>
    </apex:pageBlock>
    <apex:pageBlock id="ADetlPgBlkId"> 
        <b><apex:outputLabel value="A. MNC / Large / Med Scale companies"/></b>
        <table id="DetailTblId">
            <tr id="ARow1ID">                    
                <td> <apex:outputLabel value="First name:" for="AFstNamId"/></td>
                <td> <apex:inputText id="AFstNamId" /> </td>

                <td> <apex:outputLabel value="Last Name:" for="ALstNamId"/></td>
                <td> <apex:inputText id="ALstNamInpId" /> </td>
            </tr>
            <tr id="ARow2ID">
                <td> <apex:outputLabel value="Company name:" for="ACmpNamId"/></td>
                <td> <apex:inputText id="ACmpNamInpId" /> </td>

                <td> <apex:outputLabel value="Designation:" for="ADsgId"/></td>
                <td> <apex:inputText id="ADsgInpId" /> </td>
            </tr>
            <tr id="ARow3ID">
                <td> <apex:outputLabel value="Address:" for="AAddId"/></td>
                <td> <apex:inputTextarea id="AAddInpId" /> </td>
            </tr>
            <tr id="ARow4ID">
                <td> <apex:outputLabel value="Mobile:" for="AMblId"/></td>
                <td> <apex:inputText id="AMblInpId" /> </td>

                <td> <apex:outputLabel value="Email:" for="AEmlId"/></td>
                <td> <apex:inputText id="AEmlInpId" /> </td>
            </tr>
        </table>
    </apex:pageBlock>

    <apex:pageBlock id="BDetlPgBlkId"> 
        <b><apex:outputLabel value="B. School / Collage Students"/></b>
        <table id="DetailTb2Id">
            <tr id="BRow1ID">                    
                <td> <apex:outputLabel value="First name:" for="BFstNamId"/></td>
                <td> <apex:inputText id="BFstNamId" /> </td>

                <td> <apex:outputLabel value="Last Name:" for="BLstNamId"/></td>
                <td> <apex:inputText id="BLstNamInpId" /> </td>
            </tr>
            <tr id="BRow2ID">
                <td> <apex:outputLabel value="Company name:" for="BCmpNamId"/></td>
                <td> <apex:inputText id="BCmpNamInpId" /> </td>

                <td> <apex:outputLabel value="Designation:" for="BDsgId"/></td>
                <td> <apex:inputText id="BDsgInpId" /> </td>
            </tr>
            <tr id="BRow3ID">
                <td> <apex:outputLabel value="Address:" for="BAddId"/></td>
                <td> <apex:inputTextarea id="BAddInpId" /> </td>
            </tr>
            <tr id="BRow4ID">
                <td> <apex:outputLabel value="Mobile:" for="BMblId"/></td>
                <td> <apex:inputText id="BMblInpId" /> </td>

                <td> <apex:outputLabel value="Email:" for="BEmlId"/></td>
                <td> <apex:inputText id="BEmlInpId" /> </td>
            </tr>
        </table>
    </apex:pageBlock>


    <apex:pageBlock id="CDetlPgBlkId"> 
        <b><apex:outputLabel value="C. Research Students"/></b>
        <table id="DetailTb3Id">
            <tr id="CRow1ID">                    
                <td> <apex:outputLabel value="First name:" for="CFstNamId"/></td>
                <td> <apex:inputText id="CFstNamId" /> </td>

                <td> <apex:outputLabel value="Last Name:" for="CLstNamId"/></td>
                <td> <apex:inputText id="CLstNamInpId" /> </td>
            </tr>
            <tr id="CRow2ID">
                <td> <apex:outputLabel value="Company name:" for="CCmpNamId"/></td>
                <td> <apex:inputText id="CCmpNamInpId" /> </td>

                <td> <apex:outputLabel value="Designation:" for="CDsgId"/></td>
                <td> <apex:inputText id="CDsgInpId" /> </td>
            </tr>
            <tr id="CRow3ID">
                <td> <apex:outputLabel value="Address:" for="CAddId"/></td>
                <td> <apex:inputTextarea id="CAddInpId" /> </td>
            </tr>
            <tr id="CRow4ID">
                <td> <apex:outputLabel value="Mobile:" for="CMblId"/></td>
                <td> <apex:inputText id="CMblInpId" /> </td>

                <td> <apex:outputLabel value="Email:" for="CEmlId"/></td>
                <td> <apex:inputText id="CEmlInpId" /> </td>
            </tr>
        </table>
    </apex:pageBlock>

Snap shot is as below :

default onload screen : enter image description here

1st Radio selected : enter image description here

2nd Radio selected: enter image description here

  • javascript you mentioned not worked for me, may be i dont know how to use it. i have edited my question again elaborately, please try to give answer this. – Elango May 26 '17 at 14:17
  • probably the document.getElementById() your id is inappropriate. If the id is not provided correctly then it will not work . So can you please provide your vf page and controller so that I can investigate the issue . – Partha Sarathi Mandal May 29 '17 at 7:28
  • @Elango - I have modified the code based on your latest comment and code snippet attached by you. Hopefully this will solve your problem .Please keep in mind the id at javascript is very important for the script to work . – Partha Sarathi Mandal May 29 '17 at 10:08

Not the answer you're looking for? Browse other questions tagged or ask your own question.