+ Start a Discussion
RohithaSfdcRohithaSfdc 

Dynamic Visualforce apex:inputText addition

HI Thanks in advance,
I am trying to add the fields <apex:inputText> Dynamically
i have got the code in Html (http://jsfiddle.net/YE5vF/2/) But unable to get this code in Visual force page Any body please help me over here. I have used this script even it is not working below is the code i have used. how to use those html components in salesforce VFPAGE.
<apex:page sidebar="false" StandardController="Account" standardstylesheets="false" rendered="true" docType="html-5.0">
<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$("[id$=day]").change(function() {
    var total = 0;     
    $('.timesheet2 input').each(function() {
        total = total + Number( $(this).val() );
    });
    $('div#total_amount').html(total); 
});
});//]]>  

</script>
  <apex:form > 
            <apex:pageBlock >
                <apex:pageBlockButtons >
                    <apex:commandButton action="{!save}" value="Save"/>
                </apex:pageBlockButtons>
      <table id="newspaper-b" border="" width="100%">    
          <thead>  
                
             <tr>
                <td>Value1</td>
                <td>Value2</td>      
                <td>Adding Value</td>
            </tr>                    
          </thead>
         <tr>
           <td><apex:inputText style="width:60px;height:20px"/></td>                
            <td><apex:inputText style="width:60px;height:20px"/></td>
            <td><apex:inputText style="width:60px;height:20px"/></td>                 
          </tr>
          
         <tr>
            <td><apex:inputText style="width:60px;height:20px"/></td>      
            <td><apex:inputText style="width:60px;height:20px"/></td>
            <td><apex:inputText style="width:60px;height:20px"/></td>                   
          </tr>
          
         <tr>
            <td><apex:inputText style="width:60px;height:20px"/></td>      
            <td><apex:inputText style="width:60px;height:20px"/></td>
            <td><apex:inputText style="width:60px;height:20px"/></td>
         </tr>
        </table>
       </apex:pageBlock>
</apex:form>
</apex:page>

Need Exact output , How to configure the above mentioned JS fiddle code in Visualforce page

User-added image

Thanks & regards,
Mounika
 
Best Answer chosen by RohithaSfdc
Rahul SharmaRahul Sharma
You had not loaded jquery library. Have rewritten javascript code:
<apex:page sidebar="false" StandardController="Account" standardstylesheets="false" rendered="true" docType="html-5.0">
    <apex:form > 
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>
            <table id="newspaper-b" border="" width="100%">    
                <thead>  

                    <tr>
                        <td>
                            Value1
                        </td>
                        <td>
                            Value2
                        </td>      
                        <td>
                            Adding Value
                        </td>
                    </tr>                    
                    </thead>
                    <tr>
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="column1"/>
                        </td>                
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="column2"/>
                        </td>
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="column3"/>
                        </td>                 
                    </tr>

                    <tr>
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="column1"/>
                        </td>      
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="column2"/>
                        </td>
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="column3"/>
                        </td>                   
                    </tr>

                    <tr>
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="column1"/>
                        </td>      
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="column2"/>
                        </td>
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="column3"/>
                        </td>
                </tr>
            </table>
        </apex:pageBlock>
    </apex:form>

    <!-- Important to load jQuery library -->
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>    
    <script type="text/javascript">

        // add to avoid conflict 
        var j$ = jQuery.noConflict();

        // called on page load
        j$(document).ready(function() {

            // add change event to column 1 and 2
            j$(".column1, .column2").on("change", function() {

                // go to the tr from current element
                var row = j$(this).closest("tr");

                // find the column from jquery using find
                var value1 = row.find(".column1");
                var value2 = row.find(".column2");

                // fetch the values of the column
                var colvalue1 = isNaN(parseInt(value1.val())) ? 0 : parseInt(value1.val());
                var colvalue2 = isNaN(parseInt(value2.val())) ? 0 : parseInt(value2.val());

                // some magic ;)
                row.find(".column3").val( colvalue1 + colvalue2 );


            });
        });

    </script>
</apex:page>

 

All Answers

Vivek DeshmaneVivek Deshmane
Hi Rohitha,

For me onload of visualforce page chrome latest broaser rendering inputText. what is your exact requirment. do you want dislay some of value 1 nd value 2 in addition box when user click on save button?
User-added image

Best Regards,
-Vivek
RohithaSfdcRohithaSfdc
Thanks for Response,
The above Image displays 3 columns and 3 rows, when user enter the data in those Value 1 & Value 2 the sum of values should be displayed in Added Value that is last column.
Value1+Value2 = Adding value

Thanks
Rahul SharmaRahul Sharma
You had not loaded jquery library. Have rewritten javascript code:
<apex:page sidebar="false" StandardController="Account" standardstylesheets="false" rendered="true" docType="html-5.0">
    <apex:form > 
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>
            <table id="newspaper-b" border="" width="100%">    
                <thead>  

                    <tr>
                        <td>
                            Value1
                        </td>
                        <td>
                            Value2
                        </td>      
                        <td>
                            Adding Value
                        </td>
                    </tr>                    
                    </thead>
                    <tr>
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="column1"/>
                        </td>                
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="column2"/>
                        </td>
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="column3"/>
                        </td>                 
                    </tr>

                    <tr>
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="column1"/>
                        </td>      
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="column2"/>
                        </td>
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="column3"/>
                        </td>                   
                    </tr>

                    <tr>
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="column1"/>
                        </td>      
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="column2"/>
                        </td>
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="column3"/>
                        </td>
                </tr>
            </table>
        </apex:pageBlock>
    </apex:form>

    <!-- Important to load jQuery library -->
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>    
    <script type="text/javascript">

        // add to avoid conflict 
        var j$ = jQuery.noConflict();

        // called on page load
        j$(document).ready(function() {

            // add change event to column 1 and 2
            j$(".column1, .column2").on("change", function() {

                // go to the tr from current element
                var row = j$(this).closest("tr");

                // find the column from jquery using find
                var value1 = row.find(".column1");
                var value2 = row.find(".column2");

                // fetch the values of the column
                var colvalue1 = isNaN(parseInt(value1.val())) ? 0 : parseInt(value1.val());
                var colvalue2 = isNaN(parseInt(value2.val())) ? 0 : parseInt(value2.val());

                // some magic ;)
                row.find(".column3").val( colvalue1 + colvalue2 );


            });
        });

    </script>
</apex:page>

 
This was selected as the best answer
RohithaSfdcRohithaSfdc
Hi Rahul Thanks for Code I got perfect output for Addition of columns, please can u help for Row Also (i.e, Row1+ Row2 = Row3)

Thanks,
Rohitha
Rahul SharmaRahul Sharma
Can you elaborate!
Would be better if you try it yourself first, let me know if you face any issues. :)
RohithaSfdcRohithaSfdc
User-added imageHi Rahul in he above figure you can find 3 rows, i want 1+3 = 4 (Row1+Row2 = Row3) can. I have replaced the columns with rows in the above code but i did'nt get any output.

Thanks
Rahul SharmaRahul Sharma
Could you post the code?
RohithaSfdcRohithaSfdc
Hi rahul here is the code, Please check
 
<apex:page sidebar="false" StandardController="Account" standardstylesheets="false" rendered="true" docType="html-5.0">
    <apex:form > 
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>
            <table id="newspaper-b" border="" width="100%">    
                <thead>  

                    <tr>
                        <td>
                            Value1
                        </td>
                        <td>
                            Value2
                        </td>      
                        <td>
                            Adding Value
                        </td>
                    </tr>                    
                    </thead>
                    <tr>
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="row1"/>
                        </td>                
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="row2"/>
                        </td>
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="row3"/>
                        </td>                 
                    </tr>

                    <tr>
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="row1"/>
                        </td>      
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="row2"/>
                        </td>
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="row3"/>
                        </td>                   
                    </tr>

                    <tr>
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="row1"/>
                        </td>      
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="row2"/>
                        </td>
                        <td>
                            <apex:inputText style="width:60px;height:20px" styleClass="row3"/>
                        </td>
                </tr>
            </table>
        </apex:pageBlock>
    </apex:form>

    <!-- Important to load jQuery library -->
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>    
    <script type="text/javascript">

        // add to avoid conflict 
        var j$ = jQuery.noConflict();

        // called on page load
        j$(document).ready(function() {

            // add change event to column 1 and 2
            j$(".row1, .row2").on("change", function() {

                // go to the tr from current element
                var column = j$(this).closest("tr");

                // find the column from jquery using find
                var value1 = column.find(".row1");
                var value2 = column.find(".row2");

                // fetch the values of the column
                var colvalue1 = isNaN(parseInt(value1.val())) ? 0 : parseInt(value1.val());
                var colvalue2 = isNaN(parseInt(value2.val())) ? 0 : parseInt(value2.val());

                // some magic ;)
                row.find(".row3").val( colvalue1 + colvalue2 );


            });
        });

    </script>
</apex:page>



Thanks