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
rohitash yadavrohitash yadav 

Adding rows dynamically with input fields to table and save data


I have some records with checkbox for each record. When I checked any checkbox then I need to add new row to another table. In the new row I also need some input boxes with some actions. After that I need to save all these records.

My Visualforce page is :
<apex:page standardController="Line_Item__c" extensions="LineItemPackagesExtensions" recordSetVar="lineitems" >
	<apex:includeScript value="//"/>
	<script type="text/javascript">
		function addPackage(pkgid){
		                function(result, event){
                			$('#OpporPackages tr:last').after('<tr class="child"><td>Remove</td><td>Add</td><td>'+result.Name+'<\/td><td>'+result.Product_Category__c+'<\/td><td>'+result.Cost__c+'<\/td><td><apex:inputText value="{!result.Cost__c}"/><\/td><td>'+result.Name+'<\/td></tr>');
		                {escape: true}
	<apex:form >
        	<apex:pageBlock title="Selected Packages">
            		<apex:pageBlockButtons location="top">
				<apex:commandButton value="Save" action="{!save}"/>
                		<apex:commandButton value="Cancel" action="{!cancel}"/>
            		<table class="list" id="OpporPackages">
                        			<th>Product Name</th>
		                        	<th>Product Category</th>
		                        	<th>Final Price</th>
                		        	<th>No of Days</th>
		                        	<th>No of People</th>
		                        	<th>No of Male</th>
		                        	<th>No of Female</th>
		                        	<th>Total Price</th>
		<apex:pageBlock title="Search for Packages">
			<apex:outputPanel id="packagesList">
				<apex:pageBlockTable value="{!Packages}" var="a">
					<apex:column >
						<apex:actionsupport event="onclick" />
						<apex:inputCheckbox value="{!}" onclick="addPackage('{!}')"/>
					<apex:column value="{!a.Name}"/>
					<apex:column value="{!a.Product_Category__c}"/>
                    			<apex:column value="{!a.Cost__c}"/>
                    			<apex:column value="{!a.Stay__c}"/>
                    			<apex:column value="{!a.Activity__c}"/>
                    			<apex:column value="{!a.Description__c}"/>

Apex Class is:
global with sharing class LineItemPackagesExtensions {

    public Package__c pkgs;
    public List<Package__c> Packages { get; set; }
    public static Package__c packageDetail{ get; set; }
    public String params{get;set;}
    public Package__c prdcat{get;set;}
    public LineItemPackagesExtensions(ApexPages.StandardSetController controller) {
        prdcat = new Package__c();
        Packages = [SELECT Name,Product_Category__c,Cost__c,Stay__c,Activity__c,Description__c FROM Package__c ];

    global static Package__c getPackage(String pkgid){
        packageDetail = [SELECT Name,Product_Category__c,Cost__c,Stay__c,Activity__c,Description__c FROM Package__c 
            where id=:pkgid ];
        return packageDetail;
    public  List<Package__c> getPackages(){
        Packages = [SELECT Name,Product_Category__c,Cost__c,Stay__c,Activity__c,Description__c FROM Package__c ];
        return Packages;
I don't know how to add text box in javascript code in visualforce page. Please help to achieve this.

Abdul RazzaqAbdul Razzaq
It seems like you would like to add another table with selected(checkbox) product name fields and additional inputfields and get them saved. 
rohitash yadavrohitash yadav
Hi Abdul Razzaq,

Yes, But not able to achieve this.

Abdul RazzaqAbdul Razzaq


create another pageblocktable and display fields of selected items and additional input field and save them.. you could easily do this using wrapper class.. Javascript not needed.

Link below gives hint to your query..

Apologies couldn't be more specific (@ work).
Thumbs up, If it helped.