input value is not getting assigned to variable in javascript

Question

I have a visual force page with table included. 4th column is input and 3rd column is a simple formula output. but i am not able to assign input from table to javascript variable and stuck there for a while. requesting help!(i just stared coding in jscript)

<apex:page standardController="Lead" extensions="CountExtension" showHeader="true" id="pg">

<apex:form id="formId">
    <apex:pageBlock id="pb" Title="Target Dashboard Status">
        <apex:pageBlockSection >
              <apex:inputField value="{!objLead.Intake_Year__c}"  >                     
              </apex:inputField>
              <apex:inputField value="{!objLead.Intake_Month__c}" >                    
              </apex:inputField>  
              <apex:inputField value="{!objWeekTar.Week_Start_Date__c}"  >          
              </apex:inputField>
              <apex:inputField value="{!objWeekTar.Week_End_Date__c}"  >          
              </apex:inputField>
              <apex:inputField value="{!objLead.Program__c}"  >          
              </apex:inputField>  <br/>                         
        </apex:pageBlockSection>

           <div align="center" draggable="false" >
              <apex:commandButton value="Search" action="{!refreshCountForIntakeMonthAndYear}" reRender="rerenderThis"/>
           </div>  <br/><br/>

        <apex:pageBlockSection columns="1" id="rerenderThis">
          <apex:outputPanel id="tableOutputPanel" rendered="{!vispanel}"> 
            <table id="resultsTable" style="width:90%; border:solid; padding: 1rem; align:center; margin: 0 auto;"  >
                <tr> <td> <b>Lead Stage </b> </td>                           <td><b>Actual</b></td><td><b>Target</b></td><td> <b>Percent(%)</b> </td> <td><b> Variance </b></td></tr>
                <tr> <td> Leads </td>                                        <td> {!count9}</td><td><apex:outputText id="PlanTar0Id" value="{!IniTar}"/> <script> var PTar = document.getElementById('{!$Component.PlanTar0Id}').innerHTML;</script> </td></tr> 
                <tr> <td> Applications </td>                                 <td> {!count} </td><td><apex:outputlabel id="PlanTar1Id" /> </td><td><apex:inputText id="pcent1" maxlength="3" size="3" onchange="percentCal()"/></td> </tr>
                <tr> <td> Nos called evaluations</td>                        <td> {!count2}</td><td><apex:outputlabel id="PlanTar2Id"  /> </td><td><apex:inputText id="pcent2" maxlength="3" size="3" onchange="percentCal()"/></td> </tr>
                <tr> <td> No attended evaluations</td>                       <td> {!count3}</td><td><apex:outputlabel id="PlanTar3Id"  /> </td><td><apex:inputText id="pcent3" maxlength="3" size="3" onchange="percentCal()"/></td> </tr>
                <tr> <td> Offers Made</td>                                   <td> {!count4}</td><td><apex:outputlabel id="PlanTar4Id"  /> </td><td><apex:inputText id="pcent4" maxlength="3" size="3" onchange="percentCal()"/></td> </tr>
                <tr> <td> Enrolment from these Offers (A)</td>               <td> {!count5}</td><td><apex:outputlabel id="PlanTar5Id"  /> </td><td><apex:inputText id="pcent5" maxlength="3" size="3" onchange="percentCal()"/></td> </tr>
                <tr> <td> Deffered in from Previous Intake</td>              <td> {!count6}</td><td><apex:outputlabel id="PlanTar6Id"  /> </td><td><apex:inputText id="pcent6" maxlength="3" size="3" onchange="percentCal()"/></td> </tr>
                <tr> <td> Deffered out to next intake from these offers</td> <td> {!count7}</td><td><apex:outputlabel id="PlanTar7Id"  /> </td><td><apex:inputText id="pcent7" maxlength="3" size="3" onchange="percentCal()"/></td> </tr>
                <tr> <td> Total Enrolment </td>                              <td> {!count8}</td><td><apex:outputlabel id="PlanTar8Id"  /> </td><td><apex:inputText id="pcent8" maxlength="3" size="3" onchange="percentCal()"/></td></tr>     
            </table><br/><br/>
            <a href="#" onClick="ExportToExcel()">Download to Excel</a>                   
          </apex:outputPanel>                       
        </apex:pageBlockSection>     
    </apex:pageBlock>
</apex:form>

<script type="text/javascript">      

    var PTar1;
    var PTar2;
    var PTar3;
    var PTar4;
    var PTar5;
    var PTar6;
    var PTar7;
    var PTar8;

    function percentCal(){

        alert("Ptar is:-------"+ PTar);

        var inVal1  = document.getElementById('{!$Component.formId.pb.rerenderThis.tableOutputPanel.resultsTable.pcent1}').value;
        alert("inVal1 is:-------"+ inVal1);
        var inVal2  = document.getElementById('{!$Component.formId.pb.rerenderThis.tableOutputPanel.resultsTable.pcent2}').value;
        var inVal3  = document.getElementById('{!$Component.formId.pb.rerenderThis.tableOutputPanel.resultsTable.pcent3}').value;
        var inVal4  = document.getElementById('{!$Component.formId.pb.rerenderThis.tableOutputPanel.resultsTable.pcent4}').value;
        var inVal5  = document.getElementById('{!$Component.formId.pb.rerenderThis.tableOutputPanel.resultsTable.pcent5}').value;
        var inVal6  = document.getElementById('{!$Component.formId.pb.rerenderThis.tableOutputPanel.resultsTable.pcent6}').value;
        var inVal7  = document.getElementById('{!$Component.formId.pb.rerenderThis.tableOutputPanel.resultsTable.pcent7}').value;
        var inVal8  = document.getElementById('{!$Component.formId.pb.rerenderThis.tableOutputPanel.resultsTable.pcent8}').value;

        alert("inVals are:-------"+ inVal1 + "--" +inVal2 + "--" +inVal3 + "--" +inVal4 + "--" +inVal5 + "--" +inVal6 + "--" +inVal7 + "--" +inVal8);

        if(PTar != null && inVal1 != null){

            PTar1 = (PTar/100)*inVal1;

            alert("PTar1 : "+PTar1);
            if(inVal2 != null){
                PTar2 = (PTar1/100)*inVal2;
                if(inVal3 != null){
                    PTar3 = (PTar2/100)*inVal3;
                    if(inVal4 != null){
                        PTar4 = (PTar3/100)*inVal4;
                        if(inVal5 != null){
                            PTar5 = (PTar4/100)*inVal5;
                            if(inVal6 != null){
                                PTar6 = (PTar5/100)*inVal6;
                                if(inVal7 != null){
                                    PTar7 = (PTar6/100)*inVal7;
                                    if(inVal8 != null){
                                        PTar8 = (PTar7/100)*inVal8;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        document.getElementById('PlanTar1Id').value= PTar1; 
        document.getElementById('PlanTar2Id').value= PTar2;
        alert("outpu1" + document.getElementById('{!$Component.PlanTar1Id}').value);
        document.getElementById('{!$Component.PlanTar3Id}').value= PTar3;
        document.getElementById('{!$Component.PlanTar4Id}').value= PTar4;
        document.getElementById('{!$Component.PlanTar5Id}').value= PTar5;
        document.getElementById('{!$Component.PlanTar6Id}').value= PTar6;
        document.getElementById('{!$Component.PlanTar7Id}').value= PTar7;
        document.getElementById('{!$Component.PlanTar8Id}').value= PTar8;
        alert("outpu3" + document.getElementById('{!$Component.PlanTar3Id}').value);                           

    }

</script>

<script type="text/javascript">
   function ExportToExcel(){
       var htmltable= document.getElementById('resultsTable');
       var html = htmltable.outerHTML;
       window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
    }
</script>

And my extension is:

public class CountExtension{
public integer count{get;set;}
public integer count2{get;set;}
public integer count3{get;set;}
public integer count4{get;set;}
public integer count5{get;set;}
public integer count6{get;set;}
public integer count7{get;set;}
public integer count8{get;set;}
public integer count9{get;set;}
public Lead objLead{get;set;}
public Weekly_Target__c objWeekTar { get; set; }
public boolean vispanel{get;set;}    
public Decimal IniTar{get; set;}


public CountExtension(ApexPages.StandardController stdController) {
    objLead    = new Lead();
    objWeekTar = new Weekly_Target__c();
    vispanel   = false;   
    IniTar     = 0;
    refreshCountForIntakeMonthAndYear();
}

public void refreshCountForIntakeMonthAndYear(){


           set<string> setStatus = new set<string>{'Admission Offered', 'Admitted', 'Application on Hold', 'Aptitude Test Attempt 1',
                'Aptitude Test Attempt 2','Aptitude Test Attempt 3', 'Call for Re-Evaluation', 'Conditional Admission Post Communication Workshop',
                'Defer in from previous intake', 'Deferred for Next Intake', 'Offer Accepted', 'Offer Accepted – Initial Fee Paid',
                'Offer Declined by Student', 'Re-Apply for Next Intake', 'Re-Evaluation post Communication Workshop', 'Reject Post Screening',
                'Reject Post-Evaluation', 'Re-Test Post Evaluation', 'Screening in Progress', 'Shortlisted for Aptitude', 'Shortlisted for Evaluation',
                'Shortlisted for Profile Based Evaluation', 'Waitlist', 'Withdraw' };

            set<string> setStatus2 = new set<string>{'Admission Offered', 'Admitted', 'Application on Hold', 'Aptitude Test Attempt 1',
                'Aptitude Test Attempt 2','Aptitude Test Attempt 3', 'Call for Re-Evaluation', 'Conditional Admission Post Communication Workshop',
                'Deferred for Next Intake', 'Offer Accepted', 'Offer Accepted – Initial Fee Paid', 'Offer Declined by Student', 
                'Re-Apply for Next Intake', 'Re-Evaluation post Communication Workshop', 'Reject Post Screening', 'Reject Post-Evaluation',
                'Re-Test Post Evaluation', 'Shortlisted for Aptitude', 'Shortlisted for Evaluation', 'Shortlisted for Profile Based Evaluation',
                'Waitlist', 'Withdraw' };

            set<string> setStatus3 = new set<string>{'Admission Offered', 'admitted', 'Call for Re-Evaluation', 
                        'Conditional Admission Post Communication Workshop', 'Deferred for Next Intake', 'Offer Accepted', 'Offer Accepted – Initial Fee Paid',
                        'Offer Declined by Student', 'Re-Evaluation post Communication Workshop', 'Reject Post Screening', 'Reject Post-Evaluation',
                        'Re-Test Post Evaluation', 'Withdraw' };

            set<string> setStatus4 = new set<string>{'Admission Offered', 'admitted', 'Deferred for Next Intake', 'Offer Accepted', 
                                'Offer Accepted – Initial Fee Paid', 'Offer Declined by Student', 'Withdraw'};
            set<string> setStatus5 = new set<string>{'admitted', 'Deferred for Next Intake', 'Offer Accepted', 'Offer Accepted – Initial Fee Paid'};
            set<string> setStatus6 = new set<string>{'Deffered in from Previous Intake'};
            set<string> setStatus7 = new set<string>{'Deferred for Next Intake'};
            set<string> setStatus8 = new set<string>{'Offer Accepted – Initial Fee Paid', 'admitted', 'Defer in from previous intake'};

         if(objLead.Intake_Year__c != null && objLead.Intake_Month__c != null && objLead.Program__c != null && objWeekTar.Week_Start_Date__c != null && objWeekTar.Week_End_Date__c != null)
          {
            vispanel = true;

            list<Lead> lst = [Select Id from Lead where Admission_Status__c IN : setStatus and Intake_Year__c =:objLead.Intake_Year__c 
                              and Intake_Month__c =:objLead.Intake_Month__c   and Program__c=:objLead.Program__c];  
            count = lst.size();
            list<Lead> lst2 = [Select Id from Lead where Admission_Status__c IN : setStatus2 and Intake_Year__c =:objLead.Intake_Year__c 
                               and Intake_Month__c =:objLead.Intake_Month__c and Program__c=:objLead.Program__c ];  
            count2 = lst2.size();
            list<Lead> lst3 = [Select Id from Lead where Admission_Status__c IN : setStatus3 and Intake_Year__c =:objLead.Intake_Year__c 
                               and Intake_Month__c =:objLead.Intake_Month__c and Program__c=:objLead.Program__c ];  
            count3 = lst3.size();
            list<Lead> lst4 = [Select Id from Lead where Admission_Status__c IN : setStatus4 and Intake_Year__c =:objLead.Intake_Year__c 
                               and Intake_Month__c =:objLead.Intake_Month__c and Program__c=:objLead.Program__c ];  
            count4 = lst4.size();
            list<Lead> lst5 = [Select Id from Lead where Admission_Status__c IN : setStatus5 and Intake_Year__c =:objLead.Intake_Year__c 
                               and Intake_Month__c =:objLead.Intake_Month__c and Program__c=:objLead.Program__c ];  
            count5 = lst5.size();
            list<Lead> lst6 = [Select Id from Lead where Admission_Status__c IN : setStatus6 and Intake_Year__c =:objLead.Intake_Year__c 
                               and Intake_Month__c =:objLead.Intake_Month__c and Program__c=:objLead.Program__c ];  
            count6 = lst6.size();
            list<Lead> lst7 = [Select Id from Lead where Admission_Status__c IN : setStatus7 and Intake_Year__c =:objLead.Intake_Year__c
                               and Intake_Month__c =:objLead.Intake_Month__c and Program__c=:objLead.Program__c  ];  
            count7 = lst7.size();
            list<Lead> lst8 = [Select Id from Lead where Admission_Status__c IN : setStatus8 and Intake_Year__c =:objLead.Intake_Year__c 
                               and Intake_Month__c =:objLead.Intake_Month__c and Program__c=:objLead.Program__c ];  /*  after setstatus-- and Intake_Month__c = 'July' */
            count8 = lst8.size();

            list<Lead> lst9 = [Select Id from Lead where Intake_Year__c =:objLead.Intake_Year__c and Intake_Month__c =:objLead.Intake_Month__c and IsConverted = false];  
            count9 = lst9.size();

            list<Weekly_Target__c> Wlst = [Select Planned_Target__c From Weekly_Target__c where Intake_Month__c =:objLead.Intake_Month__c and Intake_Year__c =:objLead.Intake_Year__c and Program__c =:objLead.Program__c and Week_Start_Date__c =:objWeekTar.Week_Start_Date__c and Week_End_Date__c =:objWeekTar.Week_End_Date__c Limit 1];
                if(Wlst.size() > 0){
                    IniTar = Wlst[0].Planned_Target__c;
                } else {
                    IniTar = 0;
                }               
          }
        else
         {
          vispanel = false;         
         } 

}


}

Thanks for the help....

remove the code which is not relevant

Santanu Boral
– Santanu Boral

2016-12-24 06:27:57 +00:00
Commented Dec 24, 2016 at 6:27 — Santanu Boral
– Santanu Boral, Commented Dec 24, 2016 at 6:27

Eric · Accepted Answer · 2016-12-24 07:22:59Z

1

Since you have not assigned Ids to all VF component it is going to be tough to use the method you are for selecting the element:

document.getElementById('{!$Component.PlanTar0Id}')

Since the actual Id is something like j_id01:j_id03:xxxxxx:PlanTar0Id

You will need to either add Ids to all your elements and follow the guidelines here:https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_variables_global_component.htm - Specifically the last part

or Use jQuery and a selector that uses endswith:

$('[id$=PlanTar0Id]')

Which will select the element with the Id ending with that value.

answered Dec 24, 2016 at 7:22

Eric

54.6k11 gold badges106 silver badges196 bronze badges

@user3486888 then can you please mark it so?

Eric
– Eric

2016-12-24 12:10:11 +00:00
Commented Dec 24, 2016 at 12:10

Add a comment |

Stack Exchange Network

input value is not getting assigned to variable in javascript

1 Answer 1

You must log in to answer this question.

Hot Network Questions

input value is not getting assigned to variable in javascript

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions