+ Start a Discussion
KRISHNAMURTHY ANANTHARAMAKRISHNANKRISHNAMURTHY ANANTHARAMAKRISHNAN 

Save onclick action in VF page not working properly. Please help!

I have a VF Page wherein I have a form that the user inputs. The issue is when I click on Save1 only the "Cleaning_Activity__c" should get saved but VF page executes the whole page and because of that the required fields are throwing error in other sections. See the below image.
User-added image

How to separate the two sections such that when I click Save1 the Cleaning activity gets inserted and record gets saved?

VF Code:
<apex:page controller="i2"  sidebar="false" lightningStylesheets="true" >
    
    <script >
    function mysave1(Clicked_Id){
        var id = Clicked_Id.id;
        if(id='1')
        {
            save1();
        }
        else{
            save2();
        }
    }
    </script>

    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="x-ua-compatible" content="ie=edge" />
            <title>SLDS ResponsiveDesign Visualforce Page in Salesforce Mobile</title>
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            
            <!-- Import the Design System style sheet -->
            <apex:slds />
        </head>
        <body>
            
            <!-- REQUIRED SLDS WRAPPER -->
            <div class="slds-scope">
                
                <!-- PRIMARY CONTENT WRAPPER -->
                
                <!-- RESPONSIVE GRID EXAMPLE -->
                
                
                
                <style>
                    .mystyle {
                    
                    color: black;
                    font-size: 18px;
                    font-weight: bold;
                    }
                </style>
                
                <style>
                    body .bPageBlock .pbBody .grey .pbSubheader{
                    background-color:#585858;
                    
                    color:white;
                    font-size:100}
                    }
                    
                    }
                </style>
                
                <apex:form id="theform" >
                    
                    
                    <apex:pageBlock id="thePageBlock" >
                        <div class = "mystyle">
                            Maintenance Activities
                        </div>

                        <apex:pageMessages id="showmsg"></apex:pageMessages>
                        
                        <apex:pageBlockSection columns="1" >
                            <apex:outputPanel styleClass="grey" layout="block">
                                <apex:pageBlockSection columns="2" title="Cleaning Activity" id="section1" collapsible="false">
                                    <apex:inputField value="{!cle.Operation__c}"/>
                                    <apex:inputField value="{!cle.Cleaning_Company__c}"/>
                                    <apex:inputField value="{!cle.Cleaning_Start_Date__c}"/>
                                    <apex:inputField value="{!cle.Cleaning_End_Date__c}"/>
                                    <apex:inputField value="{!cle.Date_of_Cleaning__c}"/>
                                    <apex:inputField value="{!cle.Full_Site_Cleaning__c}"/>
                                    <apex:inputField value="{!cle.Qualtiy_of_Cleaning__c}"/>
                                    <apex:inputField value="{!cle.Specific_Size_Cleaned_kWp__c}"/>
                                    <apex:inputField value="{!cle.Status__c}"/>
                                    <apex:inputField value="{!cle.URL_of_Photos_folder__c}"/>
                                    <apex:inputField value="{!cle.Password__c}"/>
                                </apex:pageBlockSection> 
                            </apex:outputPanel>
                            
                            
                            <apex:actionFunction name="save1" action="{!save1}"  />
                            <input type = "button" id="1" value="Save1" onclick = "mysave1(this.id)"  />   
                     
                            <apex:outputPanel styleClass="grey" layout="block">
                                <apex:pageBlockSection columns="1" title="Permit to Work Number"  collapsible="false">
                                    <apex:inputField value="{!ptw.PTW_Number__c}"/>
                                    <apex:inputField value="{!ptw.Number_of_Workers__c}"/>
                                    <apex:inputField value="{!ptw.Date__c}"/>
                                    <apex:inputField value="{!ptw.Maintenance_Ticket__c}"/>
                                </apex:pageBlockSection> 
                            </apex:outputPanel>
                            
                            <apex:actionFunction name="save2" action="{!save2}"  />
                            <input type = "button"  id ="2" value="Save2" onclick = "mysave1(this.id)" />        
                           
                        </apex:pageBlockSection>
     
                        <apex:outputPanel styleClass="grey" layout="block">
                            <apex:pageBlockTable value="{!clelist}" var="a">
                                <apex:column headerValue="Cleaning Ticket Number">
                                    <apex:outputLink value="https://c.ap2.visual.force.com/apex/Record_detail_Vf_Page?id = {a.Cleaning_Activity__c}">{!a.Name}</apex:outputLink>
                                </apex:column>
                                <apex:column value="{!a.Password__c}"/>
                                
                                
                            </apex:pageBlockTable> 
                        </apex:outputPanel>
                    </apex:pageBlock>
                    
                </apex:form>
                <!-- / RESPONSIVE GRID EXAMPLE -->
            </div>
        </body>
    </html>
</apex:page>

Class:
public class i2{
    public Cleaning_Activity__c cle{get;set;}
    public Permit_to_Work_Number__c ptw{get;set;}
    public List<Cleaning_Activity__c> clelist{get;set;}
    
    //constructor to create a new record
    public i2(){
        cle = new Cleaning_Activity__c();
        ptw = new Permit_to_Work_Number__c();  
    }
    
    public void save1(){  
        if(cle.Password__c == 'pv' || cle.Password__c == 'sunsure')
        {
            
            insert cle;
            clelist = [SELECT Name, Password__c FROM Cleaning_Activity__c where Password__c =: cle.Password__c];
            
            /*if(cle.Id != null)
            {
                ptw.Cleaning_Activity__c = cle.Id;
            }
            if(ptw.PTW_Number__c!=null)
            {
                insert ptw;
            }*/
            ApexPages.addmessage(new ApexPages.message(ApexPages.severity.CONFIRM,'Record Inserted Successfully'));
            cle = new Cleaning_Activity__c();
            
        }
        else
            ApexPages.addmessage(new ApexPages.message(ApexPages.severity.FATAL,'Password is incorrect'));    
    }
    
    
    public void save2(){  
        if(cle.Password__c == 'pv' || cle.Password__c == 'sunsure')
     {
            
            if(ptw.PTW_Number__c!=null)
            {
                insert ptw;
            }
            ApexPages.addmessage(new ApexPages.message(ApexPages.severity.CONFIRM,'Record Inserted Successfully'));
            ptw = new Permit_to_Work_Number__c(); 
       }
        else
            ApexPages.addmessage(new ApexPages.message(ApexPages.severity.FATAL,'Password is incorrect'));
        
        
        
        
    }
}

​​​​​​​
ChinnoyChinnoy
give an Id to output panel and use that Id as rerender on the button.
<apex:outputpanel id="test">
<apex:actionFunction name="save2" action="{!save2}"  rerender="test"/> 
modify your code something like this.

Thanks
Dushyant SonwarDushyant Sonwar
Use ActionRegion , it will process only those part that are in the actionRegion block by the server. 

Final Code would be something like this below: 
 
<apex:page controller="i2"  sidebar="false" lightningStylesheets="true" >
    
    <script >
    function mysave1(Clicked_Id){
        var id = Clicked_Id.id;
        if(id='1')
        {
            save1();
        }
        else{
            save2();
        }
    }
    </script>

    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="x-ua-compatible" content="ie=edge" />
            <title>SLDS ResponsiveDesign Visualforce Page in Salesforce Mobile</title>
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            
            <!-- Import the Design System style sheet -->
            <apex:slds />
        </head>
        <body>
            
            <!-- REQUIRED SLDS WRAPPER -->
            <div class="slds-scope">
                
                <!-- PRIMARY CONTENT WRAPPER -->
                
                <!-- RESPONSIVE GRID EXAMPLE -->
                
                
                
                <style>
                    .mystyle {
                    
                    color: black;
                    font-size: 18px;
                    font-weight: bold;
                    }
                </style>
                
                <style>
                    body .bPageBlock .pbBody .grey .pbSubheader{
                    background-color:#585858;
                    
                    color:white;
                    font-size:100}
                    }
                    
                    }
                </style>
                
                <apex:form id="theform" >
                    
                    
                    <apex:pageBlock id="thePageBlock" >
                        <div class = "mystyle">
                            Maintenance Activities
                        </div>

                        <apex:pageMessages id="showmsg"></apex:pageMessages>
                        
                        <apex:pageBlockSection columns="1" >
                            <apex:actionRegion>
								<apex:outputPanel styleClass="grey" layout="block">
									<apex:pageBlockSection columns="2" title="Cleaning Activity" id="section1" collapsible="false">										
										<apex:inputField value="{!cle.Operation__c}"/>
										<apex:inputField value="{!cle.Cleaning_Company__c}"/>
										<apex:inputField value="{!cle.Cleaning_Start_Date__c}"/>
										<apex:inputField value="{!cle.Cleaning_End_Date__c}"/>
										<apex:inputField value="{!cle.Date_of_Cleaning__c}"/>
										<apex:inputField value="{!cle.Full_Site_Cleaning__c}"/>
										<apex:inputField value="{!cle.Qualtiy_of_Cleaning__c}"/>
										<apex:inputField value="{!cle.Specific_Size_Cleaned_kWp__c}"/>
										<apex:inputField value="{!cle.Status__c}"/>
										<apex:inputField value="{!cle.URL_of_Photos_folder__c}"/>
										<apex:inputField value="{!cle.Password__c}"/>										
									</apex:pageBlockSection> 
								</apex:outputPanel>
                                                        
								<apex:commandButton value="Save1" action="{!save1}" rerender="thePageBlock"/>
							</apex:actionRegion>
							
							<apex:actionRegion>
								<apex:outputPanel styleClass="grey" layout="block">
									<apex:pageBlockSection columns="1" title="Permit to Work Number"  collapsible="false">										
											<apex:inputField value="{!ptw.PTW_Number__c}"/>
											<apex:inputField value="{!ptw.Number_of_Workers__c}"/>
											<apex:inputField value="{!ptw.Date__c}"/>
											<apex:inputField value="{!ptw.Maintenance_Ticket__c}"/>										
									</apex:pageBlockSection> 
								</apex:outputPanel>
                            
                            <apex:commandButton value="Save1" action="{!save2}" rerender="thePageBlock"/>
                           </apex:actionRegion>
                        </apex:pageBlockSection>
     
                        <apex:outputPanel styleClass="grey" layout="block">
                            <apex:pageBlockTable value="{!clelist}" var="a">
                                <apex:column headerValue="Cleaning Ticket Number">
                                    <apex:outputLink value="https://c.ap2.visual.force.com/apex/Record_detail_Vf_Page?id = {a.Cleaning_Activity__c}">{!a.Name}</apex:outputLink>
                                </apex:column>
                                <apex:column value="{!a.Password__c}"/>
                                
                                
                            </apex:pageBlockTable> 
                        </apex:outputPanel>
                    </apex:pageBlock>
                    
                </apex:form>
                <!-- / RESPONSIVE GRID EXAMPLE -->
            </div>
        </body>
    </html>
</apex:page>

Hope this helps!
Dushyant SonwarDushyant Sonwar

KRISHNAMURTHY,


Did you try with above code(actionregion)? Does it solve your purpose?