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
Abhi MalikAbhi Malik 

JavaScript Not Working In VF Page

Am trying to use javascript in a very simple VF page but it is not working can anybody please help me to find out the error.
<----------------PAGE---------------->
<apex:page controller="Example2">

 <script type="text/javascript">
 
    function validate()
    {
        if(document.getElementById('{!$Component.frm.pb.pbs.pbsi1.aa}').value == '')
        {
            alert("FIRST NAME is mandatory");
        }
        if(document.getElementById('{!$Component.frm.pb.pbs.bb}').value == '')
        {
            alert("LAST NAME is mandatory");
        }
         else
        {
            callmove();
            alert("NAME has been inserted CONCATINATED");
        }
    }
        
  </script>  
  <apex:form id="frm"> 
  <apex:actionFunction action="{!move}" name="move" reRender="pb"/>  
   <apex:pageBlock id="pb">   
    <apex:pageBlockSection id="pbs">
               <apex:pageBlockSectionItem ><apex:outputLabel value="FIRST NAME"/></apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="pbsi1"><apex:inputText value="{!aa}" id="aa"/></apex:pageBlockSectionItem>
              <apex:pageBlockSectionItem ><apex:outputLabel value="LAST NAME"/></apex:pageBlockSectionItem> 
            <apex:pageBlockSectionItem id="pbsi2"><apex:inputText value="{!bb}" id="bb"/></apex:pageBlockSectionItem>
       <apex:pageBlockSectionItem ><apex:outputLabel value="FULL NAME"/></apex:pageBlockSectionItem> 
            <apex:pageBlockSectionItem id="pbsi3"><apex:inputText value="{!cc}" id="cc"/></apex:pageBlockSectionItem>        
    </apex:pageBlockSection>    
      <apex:pageBlockButtons location="bottom" >      
    <apex:commandButton value="CONCAT" action="{!move}" onclick="move();"/>
        </apex:pageBlockButtons>  
   </apex:pageBlock>
     </apex:form>
 </apex:page>

<----------------CLASS---------------->
public class Example2 {

    public PageReference move() {
    cc=aa+bb;
        return null;
    }

public string aa{get;set;}
public string bb{get;set;}
public string cc{get;set;}
 
public pagereference getMove() {
cc=aa+bb;
return null;
        
    }

}
Best Answer chosen by Abhi Malik
Manish BhatiManish Bhati
Just change your VF page to the following:-
 
<apex:page controller="Example2">

 <script type="text/javascript">
 
    function validate()
    {
        if(document.getElementById('{!$Component.frm.pb.pbs.pbsi1.aa}').value == '')
        {
            alert("FIRST NAME is mandatory");
        }
        if(document.getElementById('{!$Component.frm.pb.pbs.bb}').value == '')
        {
            alert("LAST NAME is mandatory");
        }
         else
        {
            callmove();
            alert("NAME has been inserted CONCATINATED");
        }
    }
        
  </script>  
  <apex:form id="frm"> 
  <apex:actionFunction action="{!move}" name="move" reRender="pb"/>  
   <apex:pageBlock id="pb">   
    <apex:pageBlockSection id="pbs">
               <apex:pageBlockSectionItem ><apex:outputLabel value="FIRST NAME"/></apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="pbsi1"><apex:inputText value="{!aa}" id="aa"/></apex:pageBlockSectionItem>
              <apex:pageBlockSectionItem ><apex:outputLabel value="LAST NAME"/></apex:pageBlockSectionItem> 
            <apex:pageBlockSectionItem id="pbsi2"><apex:inputText value="{!bb}" id="bb"/></apex:pageBlockSectionItem>
       <apex:pageBlockSectionItem ><apex:outputLabel value="FULL NAME"/></apex:pageBlockSectionItem> 
            <apex:pageBlockSectionItem id="pbsi3"><apex:inputText value="{!cc}" id="cc"/></apex:pageBlockSectionItem>        
    </apex:pageBlockSection>    
      <apex:pageBlockButtons location="bottom" >      
    <apex:commandButton value="CONCAT" action="{!move}" onclick="validate();"/>
        </apex:pageBlockButtons>  
   </apex:pageBlock>
     </apex:form>
 </apex:page>

This will work.

Mark it as answer if it solves your pblm.

All Answers

Manish BhatiManish Bhati
Just change your VF page to the following:-
 
<apex:page controller="Example2">

 <script type="text/javascript">
 
    function validate()
    {
        if(document.getElementById('{!$Component.frm.pb.pbs.pbsi1.aa}').value == '')
        {
            alert("FIRST NAME is mandatory");
        }
        if(document.getElementById('{!$Component.frm.pb.pbs.bb}').value == '')
        {
            alert("LAST NAME is mandatory");
        }
         else
        {
            callmove();
            alert("NAME has been inserted CONCATINATED");
        }
    }
        
  </script>  
  <apex:form id="frm"> 
  <apex:actionFunction action="{!move}" name="move" reRender="pb"/>  
   <apex:pageBlock id="pb">   
    <apex:pageBlockSection id="pbs">
               <apex:pageBlockSectionItem ><apex:outputLabel value="FIRST NAME"/></apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="pbsi1"><apex:inputText value="{!aa}" id="aa"/></apex:pageBlockSectionItem>
              <apex:pageBlockSectionItem ><apex:outputLabel value="LAST NAME"/></apex:pageBlockSectionItem> 
            <apex:pageBlockSectionItem id="pbsi2"><apex:inputText value="{!bb}" id="bb"/></apex:pageBlockSectionItem>
       <apex:pageBlockSectionItem ><apex:outputLabel value="FULL NAME"/></apex:pageBlockSectionItem> 
            <apex:pageBlockSectionItem id="pbsi3"><apex:inputText value="{!cc}" id="cc"/></apex:pageBlockSectionItem>        
    </apex:pageBlockSection>    
      <apex:pageBlockButtons location="bottom" >      
    <apex:commandButton value="CONCAT" action="{!move}" onclick="validate();"/>
        </apex:pageBlockButtons>  
   </apex:pageBlock>
     </apex:form>
 </apex:page>

This will work.

Mark it as answer if it solves your pblm.
This was selected as the best answer
Abhi MalikAbhi Malik
Thanks a lot dear for help  . now i found what a silly mistake am doing .... but am completly new to javascript and started learning it from today thats why doing like this.
Surya pratap chauhanSurya pratap chauhan
Hi ,

Just Replace the code that is written after javascript, this will work



<apex:form id="frm"> 
  <apex:actionFunction action="{!move}" name="move" reRender="pb"/>  
   <apex:pageBlock id="pb">   
    <apex:pageBlockSection id="pbs">
               <apex:pageBlockSectionItem ><apex:outputLabel value="FIRST NAME"/></apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="pbsi1"><apex:inputText value="{!aa}" id="aa"/></apex:pageBlockSectionItem>
              <apex:pageBlockSectionItem ><apex:outputLabel value="LAST NAME"/></apex:pageBlockSectionItem> 
            <apex:pageBlockSectionItem id="pbsi2"><apex:inputText value="{!bb}" id="bb"/></apex:pageBlockSectionItem>
       <apex:pageBlockSectionItem ><apex:outputLabel value="FULL NAME"/></apex:pageBlockSectionItem> 
            <apex:pageBlockSectionItem id="pbsi3"><apex:inputText value="{!cc}" id="cc"/></apex:pageBlockSectionItem>        
    </apex:pageBlockSection>    
      <apex:pageBlockButtons location="bottom" >      
    <apex:commandButton value="CONCAT" action="{!move}" onclick="validate()"/>
        </apex:pageBlockButtons>  
   </apex:pageBlock>
     </apex:form>
 </apex:page>