[SalesForce] JavaScript doesn’t work with Apex command Button

I was able to get the id of the button but no able to get the outputText id. Please help

  <script >

  function exButton(){

   var remainingValues = document.getElementById("j_id0:j_id5:remaining").value;

    if(remainingValues > 0){
    document.getElementById("j_id0:j_id5:btn").click();
     }

    }
    function period(){

    setInterval("exButton()",50000)

    }

    </script>

Apex button// 

  <apex:commandButton id="btn" action="{!CreatePlan}" reRender="CreatePlan, Debug" value="Request Values" status="CreatePlanStatus"  onClick="period();" />

Here is the outputfield

    <apex:outputPanel id="Debug" layout="block">
       <h2>Remaining Values</h2><br/>
      <apex:outputText id="remaining" value="{!Debug}"/>
    </apex:outputPanel>

Best Answer

Visualforce takes over element Ids and often alters them. Have you checked the actual Id that is being rendered by Visualforce on your button? You may need to get creative with your Javascript to select your button.

EDIT: One common way to deal with this Id issue is to use the jQuery EndsWith() selector:

j$('[id$="btn"]');
Related Topic