How i can add multiple input field dynamically

Question

How i can add multiple input field dynamically and how we can send multiple input field data to controller. Example:

<apex:page controller="controllermethod">
 <apex:form >
  <apex:pageBlock mode="edit"><br/><br/>
        <div class="row">
       <apex:outputLabel styleClass="label" value="Project Name " /> 
       <apex:inputField styleClass="field" value="{!newproj.Name}"/>
       </div>
       <div class="row">
       <apex:outputLabel styleClass="label" value="Start Date "/> 
       <apex:inputField styleClass="field" value="{!newproj.Start_Date__c}"/>
        </div>
      <div class="row">
       <apex:outputLabel styleClass="label" value="Module "/> 
       <apex:inputField styleClass="field" value="{!module.Name}"/>
       </div> 
       <div class="row">
       <apex:outputLabel styleClass="label" value="Vendor "/> 
       <apex:inputField styleClass="field" value="{!module.Vendor__c}"/>
       </div> 
       <div class="row">
       <apex:outputLabel styleClass="label" value="Module "/> 
       <apex:inputField styleClass="field" value="{!module.Name}"/>
       </div> 
       <div class="row">
       <apex:outputLabel styleClass="label" value="Vendor "/> 
       <apex:inputField styleClass="field" value="{!module.Vendor__c}"/>
       </div> 
     <apex:commandButton value="Save" action="{!savecreatenew}"/>
      <apex:commandButton value="Cancel" action="{!closePopup}" />
      </apex:pageBlock>   
        </apex:form>
</apex:page>

My controller is:-

public class controllermethod 
{
public  Project__c newproj{get;set;}
   public Module__c  module{get;set;}

    public controllermethod()
    {
         newproj = new Project__c();
         module=new Module__c();
    }
 public PageReference savecreatenew() {
    insert  newproj; 
    module.Project__c = String.valueOf(newproj.get('Id'));
     insert  module; 
    module.clear();
    newproj = new Project__c();
        return null;
    }

}

This is working fine but i want to add multiple modules for single project i.e i want to provide one add button for users to add multiple modules and vendors for that project.

Answer 1

if we want to create a row dynamically, we just need to create instance and add to the list, and use the list in vf page like below

add one more button as add

<apex:commandButton value="Add" action="{!Add}"/>

and the apex class is like below

public class controllermethod {

    public Project__c newproj {get;set;}
    public List<Module__c>  moduleList {get;set;}

    public void Add() {
        Module__c module=new Module__c();
        moduleList.add(module);
    }

    public controllermethod() {
        newproj = new Project__c();
        Module__c module = new Module__c();
        moduleList.add(module);
    }

    public PageReference savecreatenew() {
        insert newproj; 
        for (Module__c module :moduleList) {
            module.Project__c = String.valueOf(newproj.get('Id'));
        } 
        insert moduleList; 
        module.clear();
        return null;
    }
}

VF page is like below

<apex:page controller="controllermethod">

  <apex:repeat value="moduleList" var="module">
  <div class="row">
   <apex:outputLabel styleClass="label" value="Module "/> 
   <apex:inputField styleClass="field" value="{!module.Name}"/>
   </div> 
   <div class="row">
   <apex:outputLabel styleClass="label" value="Vendor "/> 
   <apex:inputField styleClass="field" value="{!module.Vendor__c}"/>
   </div> 
   <div class="row">
   <apex:outputLabel styleClass="label" value="Module "/> 
   <apex:inputField styleClass="field" value="{!module.Name}"/>
   </div> 
   <div class="row">
   <apex:outputLabel styleClass="label" value="Vendor "/> 
   <apex:inputField styleClass="field" value="{!module.Vendor__c}"/>
   </div> 
  </apex:repeat> 
 <apex:commandButton value="Save" action="{!savecreatenew}"/>
  <apex:commandButton value="Cancel" action="{!closePopup}" />
  </apex:pageBlock>   
  </apex:form></apex:page>

If you want to use delete row , you need to give indexing to each row added for that , we need to use wrapper class like below

public class indexwrapper {
    integer rowIndex;
    Module__c module;
}

Use this wrapper class list instead of the Module__c list, when you want to delete just pass the row index using <apex:actionFunction/> and delete the row.