www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: dynamic addition of numeric values of textboxes in another textbox javascript

  1. #1
    Join Date
    Jun 2008
    Posts
    8

    dynamic addition of numeric values of textboxes in another textbox javascript

    Hello everyone

    I want to dynamically add the numeric values of different textboxes in single text box.please give me javascript code if any.

    thank u in advance

  2. #2
    Join Date
    Jun 2008
    Location
    England
    Posts
    121
    you could try something like this:

    this is your script

    Code:
    <script language="javascript">
    function getValues(){
    var numVal1=document.getElementById("one").value;
    var numVal2=document.getElementById("two").value;
    var numVal3=document.getElementById("three").value;
    
    document.getElementById("main").value = numVal1+"<br/>"+numVal2+"<br/>"+numVal3;
    {
    </script>
    this is your html

    HTML Code:
    textbox1:<br/>
    <input type="text" id="one" value=""/>
    textbox2:<br/>
    <input type="text" id="two" value=""/>
    textbox3:<br/>
    <input type="text" id="three" value=""/>
    <br/><br/>
    Main TextBox:<br/>
    <textarea id="main" value=""></textarea>
    <input type="button" value="get text" onClick="getValues()" />
    hope this helps.

  3. #3
    Join Date
    Jun 2008
    Posts
    8

    Thank u

    Thank u
    But the thing is when i enter number in text box automatically it should show in total textbox.if i decrease the value total should be decreased.

  4. #4
    Join Date
    Jun 2008
    Location
    England
    Posts
    121
    ok try this.

    HTML Code:
    <script language="javascript">
    function getValues(){
    var numVal1=document.getElementById("one").value;
    var numVal2=document.getElementById("two").value;
    var numVal3=document.getElementById("three").value;
    
    document.getElementById("main").value = numVal1+"\n"+numVal2+"\n"+numVal3;
    }
    </script>
    <style>
    input.numbox{
    	width:30px;
    	height:20px;
    }
    textarea.mainbox{
    	width:200px;
    	height:100px;
    }
    </style>
    textbox1:
    <input class="numbox" type="text" id="one" value="" onkeyup="getValues()" /><br/>
    textbox2:
    <input class="numbox" type="text" id="two" value="" onkeyup="getValues()"/><br/>
    textbox3:
    <input class="numbox" type="text" id="three" value="" onkeyup="getValues()"/><br/>
    <br/>
    Main TextBox:<br/>
    <textarea style="mainbox" id="main" value=""></textarea>
    Last edited by shakeuk; 06-20-2008 at 07:24 AM.

  5. #5
    Join Date
    Jun 2008
    Posts
    8

    hi

    I want addition of numbers
    if i enter 1 2 3 in total box 6.
    if i change 2 to 3 then total should be 7

  6. #6
    Join Date
    Jun 2008
    Location
    England
    Posts
    121
    hmm ok what about this.

    HTML Code:
    <script language="javascript">
    function getValues(val){
    
    var numVal1=parseInt(document.getElementById("one").value);
    var numVal2=parseInt(document.getElementById("two").value);
    var numVal3=parseInt(document.getElementById("three").value);
    
    var totalValue = numVal1 + numVal2 + numVal3;
    
    document.getElementById("main").value = totalValue;
    }
    </script>
    <style>
    input.numbox{
    	width:30px;
    	height:20px;
    }
    textarea.mainbox{
    	width:200px;
    	height:100px;
    	font-size:30;
    	font-weight:bold;
    }
    </style>
    textbox1:
    <input class="numbox" type="text" id="one" value="0" onkeyup="getValues(1)" /><br/>
    textbox2:
    <input class="numbox" type="text" id="two" value="0" onkeyup="getValues(2)"/><br/>
    textbox3:
    <input class="numbox" type="text" id="three" value="0" onkeyup="getValues(3)"/><br/>
    <br/>
    Main TextBox:<br/>
    <textarea style="mainbox" id="main" value=""></textarea>

  7. #7
    Join Date
    Jun 2008
    Posts
    8

    Thank you

    Hey thank u for your hlp.
    Its working.

  8. #8
    Join Date
    Jun 2008
    Location
    England
    Posts
    121
    no problem

  9. #9
    Join Date
    Jun 2008
    Posts
    8

    hi

    the code u sent is working but the thing is
    i will send one code check it and can u give the code for dynamic addition

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@page import="com.vc_inloop.hibernate.dao.ClientDAO"%>
    <%@page import="com.vc_inloop.hibernate.dao.ProjectDAO"%>
    <%@page import="java.util.Collection"%>
    <%@page import="java.util.Iterator"%>
    <%@page import="com.vc_inloop.hibernate.beans.Client"%>
    <%@page import="com.vc_inloop.hibernate.beans.Project"%>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head><%
    ClientDAO cdao = new ClientDAO();
    Collection contcol = (Collection) cdao.getAllClient();
    Iterator j = contcol.iterator();
    Client cl = new Client();
    ProjectDAO pdao = new ProjectDAO();
    Collection projcol = (Collection) pdao.getAllProject();
    Iterator k = projcol.iterator();
    Project p = new Project();
    %>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>New Invoice</title>
    <link href="<%=request.getContextPath() %>/css/bookstyle.css" rel="stylesheet" type="text/css" />
    <script language="javascript" src="<%=request.getContextPath() %>/js/date-picker.js"></script>
    <script language=javascript>
    function isInteger(s)
    {
    var i;
    s = s.toString();
    for (i = 0; i < s.length; i++)
    {
    var c = s.charAt(i);
    if (isNaN(c))
    {
    alert("Entered value is not a number!!! Please Enter the correct Value");
    return false;
    }
    }
    return true;
    }
    </script>
    <script language="javascript">
    function getValues(){
    var i;
    var numVal[]=document.getElementById("one").value;
    for(i=0;i<numVal;i++){
    document.getElementById("inputtext3").value = numVal[i]+1;
    }
    }
    </script>
    </head>
    <body>
    <script language="javascript">
    function addRow(aTable)
    {
    aRow = aTable.insertRow(aTable.rows.length);
    numCells=3
    var col_dir = ['<input type="text" style="text-align:right" name="Slno" size="5" onkeyup="isInteger(this.value)">',
    '<input size="90" name="Des">',
    '<input size="30" style="text-align:right" name="Total" onkeyup="getValue()">']

    aCell = aRow.insertCell(0);

    for (i=0;i<numCells;i++){
    aCell = aRow.insertCell(i);
    aCell.innerHTML= col_dir[i]
    }
    }
    </script>
    <script language="javascript">
    function addRowTax(aTable)
    {
    aRow = aTable.insertRow(aTable.rows.length);
    numCells=3
    var col_dir = ['<input type="text" style="text-align:right" name="TaxSlno" size="5" onkeyup="isInteger(this.value)">',
    '<input size="90" name="TaxDes">',
    '<input size="30" style="text-align:right" name="TaxTotal" onkeyup="getValue()" >']

    aCell = aRow.insertCell(0);

    for (i=0;i<numCells;i++){
    aCell = aRow.insertCell(i);
    aCell.innerHTML= col_dir[i]
    }
    }
    </script>
    <div id="login" class="boxed">
    <h2 class="title" align="center">Invoice</h2>
    </div>
    <div id="login" class="boxed">
    <%String msg=(String) request.getAttribute("Message");
    if(msg!=null)
    out.println(msg);
    %>
    </div>
    <form action="<%=request.getContextPath() %>/invoiceregister.do" name="sampleform" method="post">
    <fieldset><legend style="text-align:left">Details</legend>
    <table width="100%" border="0" align="center">
    <tr>
    <td width="14%"><label for="inputtext1"><b>Client:</b></label></td>
    <td width="35%"><select name="ClientName">
    <%
    while (j.hasNext()) {
    cl = (Client) j.next();
    %>
    <option value="<%=cl.getClientid() %>"><%=cl.getClientname() %></option>
    <%} %>
    </select></td>
    <td width="10%"><label for="inputtext1"><b>Project:</b></label></td>
    <td width="41%"><select name="ProjectName">
    <%
    while (k.hasNext()) {
    p = (Project) k.next();
    %>
    <option value="<%=p.getProjectid() %>"><%=p.getProjectname() %></option>
    <%} %>
    </select></td>
    </tr>
    <tr>
    <td width="14%"><label for="inputtext1"><b>Invoice
    Date:</b></label></td>
    <td width="35%">
    <input type="text" name="firstinput" size=20/><a href="javascript: show_cal('document.sampleform.firstinput.value')"><img
    src="<%=request.getContextPath() %>/images/cal.gif" width="16" height="16" border="0"
    alt="Pick a date"/></a></td>

    <td width="14%"><label for="inputtext1"><b>Due Date:</b></label></td>
    <td width="35%"><input type="text" name="secondinput" size=20/><a href="javascript: show_cal('document.sampleform.secondinput.value')"><img
    src="<%=request.getContextPath() %>/images/cal.gif" width="16" height="16" border="0"
    alt="Pick a date"/></a></td>
    </tr>
    </table>
    </fieldset>
    <fieldset><legend style="text-align:left">Items</legend>
    <table id="myTable" name="myTable" border="0" width="100%"
    align="center">
    <tbody id="myTableTBody" name="myTableTBody">
    <tr>
    <td width="4%" align="center"><b>SL NO.</b></td>
    <td width="54%" align="center"><b>Description</b></td>
    <td width="42%" align="center"><b>Amount</b></td>
    </tr>
    <tr>
    <td width="4%"><input type="text" style="text-align:right"
    name="Slno" size="5" onkeyup="isInteger(this.value)"/></td>
    <td width="54%"><input size="90" name="Des" maxlength="300" /></td>
    <td width="42%"><input size="30" style="text-align:right"
    name="Total" onkeyup="getValue()"/></td>
    </tr>
    <!--<tr>
    <td width="4%"><input type="text" style="text-align:right"
    name="Slno" size="5"/></td>
    <td width="54%"><input size="90" name="Des" maxlength="300"/></td>
    <td width="42%"><input size="30" style="text-align:right"
    name="Total"/></td>
    </tr>
    <tr>
    <td width="4%"><input type="text" style="text-align:right"
    name="Slno" size="5"/></td>
    <td width="54%"><input size="90" name="Des" maxlength="300"/></td>
    <td width="42%"><input size="30" style="text-align:right"
    type="text" name="Total"/></td>
    </tr>
    --></tbody>
    </table>
    <table width="90%" border="0" align="center">
    <tr>
    <td><input type="button" id="inputsubmit1"
    onclick="addRow(document.getElementById('myTable'))"
    value=" add Item"/></td>
    </tr>
    </table>
    </fieldset>
    <fieldset><legend style="text-align:left">Tax</legend>
    <table id="myTable2" name="myTable" border="0" width="100%"
    align="center">
    <tbody id="myTableTBody2" name="myTableTBody">
    <tr>
    <td width="4%" align="center"><b>SL NO.</b></td>
    <td width="56%" align="center"><b>Description</b></td>
    <td width="40%" align="center"><b>Amount</b></td>
    </tr>
    <tr>
    <td width="4%"><input type="text" style="text-align:right"
    name="TaxSlno" size="5" onkeyup="isInteger(this.value)"/></td>
    <td width="56%"><input size="90" name="TaxDes" maxlength="300"/></td>
    <td width="40%"><input size="30" style="text-align:right"
    name="TaxTotal" onkeyup="getValue()"/></td>
    </tr>
    <!--<tr>
    <td width="4%"><input type="text" style="text-align:right"
    name="TaxSlno" size="5"/></td>
    <td width="56%"><input size="90" name="TaxDes" maxlength="300"/></td>
    <td width="40%"><input size="30" style="text-align:right"
    name="TaxTotal"/></td>
    </tr>
    <tr>
    <td width="4%"><input type="text" style="text-align:right"
    name="TaxSlno" size="5"/></td>
    <td width="56%"><input size="90" name="TaxDes" maxlength="300"/></td>
    <td width="40%"><input size="30" style="text-align:right"
    name="TaxTotal"/></td>
    </tr>
    --></tbody>
    </table>
    <table width="90%" border="0" align="center">
    <tr>
    <td><input type="button" id="inputsubmit1"
    onclick="addRowTax(document.getElementById('myTable2'))"
    value=" add tax"/></td>
    </tr>
    </table>
    </fieldset>
    <fieldset><legend style="text-align:left">Total</legend>
    <table width="100%" border="0" align="">
    <tr>
    <td width="73%" align="right"><label for="inputtext1"><b>Total
    Amount:</b></label></td>
    <td width="27%"><input style="text-align:right" id="inputtext3"
    size="30" name="TotalAmt" value="" /></td>
    </tr>
    </table>
    </fieldset>
    <br />
    <table width="12%" align="center">
    <tr>
    <td width="9%"></td>
    <td width="6%" align="center"><input id="inputsubmit1"
    type="submit" name="Submit" value="Submit" /></td>
    <td width="85%" align="center"><input id="inputsubmit1"
    type="reset" name="Clear" value="Clear" /></td>
    </tr>
    </table>

    </form>
    </body>
    </html>

  10. #10
    Join Date
    Jun 2008
    Location
    England
    Posts
    121
    i dont suppose you want to note the script so i can see whats going on, its hard to see a large script and know whats going on without someking of notation.

  11. #11
    Join Date
    Jun 2008
    Posts
    8

    hi

    ok.
    In UI i am having a button add, when i click it new row will be added.In each row i will enter amount of invoice.The total should be displayed in textbox.

  12. #12
    Join Date
    Jun 2008
    Location
    England
    Posts
    121
    what i ment was can you note the existing javascript as to explain how its working?

  13. #13
    Join Date
    Jun 2008
    Posts
    8

    Ok

    This code i tried to add the multiple values of text box.but there is a mistake in it

    <script language="javascript">
    function getValues(){
    var i;
    var numVal[]=document.getElementById("one").value;
    for(i=0;i<numVal;i++){
    document.getElementById("inputtext3").value = numVal[i]+1;
    }
    }
    </script>

    This code is used to add new row.Row consists of slno, description, amount.

    <script language="javascript">
    function addRow(aTable)
    {
    aRow = aTable.insertRow(aTable.rows.length);
    numCells=3
    var col_dir = ['<input type="text" style="text-align:right" name="Slno" size="5">',
    '<input size="90" name="Des">',
    '<input size="30" style="text-align:right" name="Total">']

    aCell = aRow.insertCell(0);

    for (i=0;i<numCells;i++){
    aCell = aRow.insertCell(i);
    aCell.innerHTML= col_dir[i]
    }
    }
    </script>
    

  14. #14
    Join Date
    Jun 2008
    Location
    England
    Posts
    121
    Quote Originally Posted by pavanbh
    function getValues(){
    var i;
    var numVal[]=document.getElementById("one").value;
    for(i=0;i<numVal;i++){
    document.getElementById("inputtext3").value = numVal[i]+1;
    }
    }
    can you please explain what this snippit of code is ment to be doing?

    why are you adding 1 to the numVal[i] value? i mean i know its the value of document.getElementById("one").value; but why are you looping the same value and then adding just 1?

    also what is the numVal value?

  15. #15
    Join Date
    Jun 2008
    Posts
    8

    The code is wrong

    I tought of storing the values in array and adding it.but it is wrong.
    plz send me the code

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.20508 seconds
  • Memory Usage 3,037KB
  • Queries Executed 15 (?)
More Information
Template Usage (38):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (3)bbcode_html
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (15)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (15)postbit
  • (15)postbit_onlinestatus
  • (15)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (74):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates