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 08: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



Recent Articles