function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
PrabhaPrabha 

seems simple, but not working, An issue with javascript and pageblocktable

Hi,

 

I am trying to populate value in one field based on the picklist selection in different field of the samae object.

 

exactly like "stage" and "probability" in opportunity..

 

please check the code and tell me why it is not working only in apex:pageBlockTable.

I searched the boards and followed some solution but its not coming,

 

my VF is:

<apex:page standardController="contact" extensions="practice4">

  <script type="text/javascript">
   function populatefield()
    {
     var ex = document.getElementById('{!$Component.form.block.sec.firstfieldID}').value;
     if(ex=="one")
      document.getElementById('{!$Component.form.block.sec.secondfieldID}').value = '1';
     else
      document.getElementById('{!$Component.form.block.sec.secondfieldID}').value = '';
      
     var ex = document.getElementById('{!$Component.form.block.sec.table.firstfieldID1}').value;
          alert(ex);
     if(ex=="one")
      document.getElementById('{!$Component.form.block.sec.table.secondfieldID1}').value = '1';
    }
  </script>
  
<apex:form id="form" >
<apex:pageBlock id="block" >
<apex:pageBlockSection id="sec" >

 <apex:inputField id="firstfieldID" value="{!contact.third__c}" onchange="populatefield();" />
 <apex:inputField value="{!contact.second__c}" id="secondfieldID" />                   

 <apex:pageBlockTable id="table" value="{!section1}" var="allGNG">
  <apex:column headervalue="pick" width="15%" >
  <apex:inputField id="firstfieldID1" value="{!allGNG.third__c}" onchange="populatefield();" >
  </apex:inputField>
  </apex:column>  
  <apex:column headerValue="value">
  <apex:inputField value="{!allGNG.second__c}" id="secondfieldID1" />                   
  </apex:column>

 </apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

my controller is  

public class practice4 {

    public practice4(ApexPages.StandardController controller) {

    }
    public contact[] section1 = new contact[0];
    
     Public List<contact> getsection1()
    {
     section1= [SELECT third__c, second__c from contact];
     return section1;
    }


}

what I saw is "document.getElementById" is getting the values from pageblocksection, but not from pageblocktable.

 

Is there any other way...?!?

 

Thanks

Prabhan

 

 

Best Answer chosen by Admin (Salesforce Developers) 
kerwintangkerwintang

I think a better solution would be to pass "this" in populateField function.

 

onchange="populatefield(this)"

function populatefield(field){
  var secondFieldId = field.id.replace("first","second");
  if(field.value=="one"){
     document.getElementById(secondFieldId).value='1';
  }
}

Try this out. hope this helps :D

All Answers

kerwintangkerwintang

After your page has loaded, view the source and can you post the converted javascript/html code here?

PrabhaPrabha
  <script type="text/javascript">
   function populatefield()
    {
     var ex = document.getElementById('j_id0:form:block:sec:firstfieldID').value;
     if(ex=="one")
      document.getElementById('j_id0:form:block:sec:secondfieldID').value = '1';
     else
      document.getElementById('j_id0:form:block:sec:secondfieldID').value = '';
      
     var ex = document.getElementById('j_id0:form:block:sec:table:firstfieldID1').value;
          alert(ex);
     if(ex=="one")
      document.getElementById('j_id0:form:block:sec:table:secondfieldID1').value = '1';
    }
  </script>

 from IE...

 

Thanks

Prabha

kerwintangkerwintang

Can you compare with the generated HTML of the pageblock/table and see if the ids are correct?

 

PrabhaPrabha

wow, thats great guys, 

now I understand the reason why it is not pulling it... there is this identifier for each record.

 

please see 

  <script type="text/javascript">
   function populatefield()
    {
     alert("hi hi");
     var ex = document.getElementById('page:form:block:sec:firstfieldID').value;
     if(ex=="one")
      document.getElementById('page:form:block:sec:secondfieldID').value = '1';
     else
      document.getElementById('page:form:block:sec:secondfieldID').value = '';
       var ex = document.getElementById('page:form:block:sec:table:firstfieldID1').value;
          alert(ex);
     if(ex=="one") document.getElementById('page:form:block:sec:table:secondfieldID1').value = '1';
    }
  </script>

....
....
....


<td class="dataCell  " id="page:form:block:sec:table:0:j_id1" colspan="1" width="15%"><select  id="page:form:block:sec:table:0:firstfieldID1" name="page:form:block:sec:table:0:firstfieldID1" onchange="populatefield();"><option value="">--None--</option><option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select></td>

Its always wrong with the '0'.

 

now the question is, how to deal with it. please throw some light.

 

thanks

prabha.

kerwintangkerwintang

I think a better solution would be to pass "this" in populateField function.

 

onchange="populatefield(this)"

function populatefield(field){
  var secondFieldId = field.id.replace("first","second");
  if(field.value=="one"){
     document.getElementById(secondFieldId).value='1';
  }
}

Try this out. hope this helps :D

This was selected as the best answer
PrabhaPrabha

way to use javascript. 

 

it worked. 

 

thanks :)