[SalesForce] JavaScript repeat issue..

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;

               }                  
          }
    }

Best Answer

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>
Related Topic