2

I am disabling one text-field based on if the other has value.I have done that but in repeat Ids are dynamic for each text in different row.I am adding row based on a button click

  var hiddenRep1 = document.getElementById('thePage:form:hrs:hrs:0:decimal');
var hiddenRep1 = document.getElementById('thePage:form:hrs:hrs:1:decimal');
and so on...

Here 0 comes dynamically its 0 for first row and 1 for the next.

My code

var hiddenRep1 = document.getElementById('thePage:form:hrs:hrs:0:decimal');
 if(hiddenRep1.value.length >= 1)      
     {              
       var hoursVal=document.getElementById("thePage:form:hrs:hrs:0:hours").disabled = true;
      }

I don't know how to make it work for all every row in repeat.Its working for first row.I don't have a good hand in Java-script.Please help.I need to do this urgently.

Thanks

EDIT

<apex:inputField id="decimal" value="{!Adj.Hours_Decimal__c}" onchange="setHidden();"/>

EDIT 2

public list<Hours__c> listAdj{get;set;}

public void AddRow()
{
   listAdj.add(new Hours__c ());
}

listAdj is the list i am using in apex:repeat on VF page.

VF Page

<apex:repeat value="{!listAdj}" var="Adj" id="hrs">

 <td><div class="requiredInput"><div class="requiredBlock"></div>
<apex:inputField id="decimal" value="{!Adj.Hours_Decimal__c}" onchange="setHidden5(this);" >
  </apex:inputField>
</div></td>      

 <apex:inputField id="hours" value="{!Adj.Hours__c}" />

        </apex:repeat>

Javascript Code

 function setHidden5(element){
    //split the id of the inputField by ':' and then use the 5th index in the array to exact position of the inputField in the apex:repeat.
  var idArray = element.id.split(':');
    var hiddenRep1 =document.getElementById("thePage:form:hrs:hrs:"+idArray[4]+":decimal");
         var hiddenRep2 = document.getElementById("thePage:form:hrs:hrs:"+idArray[4]+":hours");


    if(element.value.length >=1){

      document.getElementById("thePage:form:hrs:hrs:"+idArray[4]+":hours").disabled = true;

               }                  
          }
    }
  • How are you displaying the textField in the apex:repeat? If you're using the apex:inputText then you can dynamically set the disabled attribute. But you're using the just the HTML <input> tag then we will need javascript – Sam Jan 19 '14 at 2:58
  • Thanks for replying.I am using inputField.I have edited my questions to add my inputField. – miku Jan 19 '14 at 3:00
  • Actually if a user will enter value.In run time it should become disabled and becomes enabled if the value is cleared. – miku Jan 19 '14 at 3:05
3

you can pass the element reference from the element where the change is happening and then based on the element that got changed, get the row number from the element id, construct the id for the hours field that you want to disable. You can do something like this:

function setHidden(element){
    //split the id of the inputField by ':' and then use the 5th index in the array to exact position of the inputField in the apex:repeat.
    var idArray = element.id.split(':');
    if(element.value.length >=1){
        document.getElementById("thePage:form:hrs:hrs:"+idArray[4]+":hours").disabled = true;
    }
}


<apex:inputField id="decimal" value="{!Adj.Hours_Decimal__c}" onchange="setHidden(this);"/>

EDIT

I have assumed that you're using the commandButton to add the row and then the apex:repeatis wrappd inside a apex:outputPanel and then you're reRendering the panel based on the reRender attribute in the commandButton.

function checkEditability(){
    if(parseInt('{!listAdj.size}')!=0){
        // get the size of the list
        var listSize = parseInt('{!listAdj.size}');

        //disable all the hours field if the decimal field is blank.
        for(var i=0;i<listSize;i++){
            if(document.getElementById("thePage:form:hrs:hrs:"+i+":decimal").value.length>1){
                document.getElementById("thePage:form:hrs:hrs:"+i+":hours").disabled=true;

            }
        }
    }

}


//use the oncomplete tag in the command button to call a javacript which will check the editability of the fields and disbale it if required
<apex:commandButton value="Add Rows" action="{!addRows}" oncomplete="checkEditability();" reRender="tablePanel"/>
<apex:outputPanel id="tablePanel">
    <apex:repeat value="{!listAdj}" var="Adj" id="hrs">

         <td>
             <div class="requiredInput">
                 <div class="requiredBlock">
                 </div>
                <apex:inputField id="decimal" value="{!Adj.Hours_Decimal__c}" onchange="setHidden5(this);" ></apex:inputField>
            </div>
        </td>      

         <apex:inputField id="hours" value="{!Adj.Hours__c}" />

    </apex:repeat>
</apex:outputPanel>
| improve this answer | |
  • Hi Mate i have an issue..Can you help me..When i click on addrow button..but disable text is not working...Can you please help me how to hold disabled textbox when i click on Addrow button.On addrow button i am just adding a new row by calling controller method.Please help mate – miku Jan 19 '14 at 13:26
  • is there any way i can hold the disabled textbox in repeat..?Did you understand my questions mate..? – miku Jan 19 '14 at 13:32
  • @miku Can you please explain in a little more detail as to how you're adding a new row? And is the disabling functionality not working for the new row elements or it stopped working for the existing elements? YOu can edit the question and post the code. – Sam Jan 19 '14 at 14:54
  • When i add a new row it is not working even for the older rows..when i add a row and enter a value in the textbox..the other text becomes disabled but when i click on add row is everything is enabled again. – miku Jan 19 '14 at 15:11
  • 1
    Yes the reason why its not working is you're reRendering the table which is an ajax request and when this happens the javascript changes that you have mode to the table elements is lost. I will modify my answer to address this issue.. – Sam Jan 20 '14 at 11:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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