calculate total from text input in javascript

Discussion in 'JavaScript' started by anisFarim, Jun 8, 2010.

0
  1. #1
    i need some help..

    my coding..

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>

    <body>

    <SCRIPT language="javascript">

    function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    cell1.innerHTML = 'Others ';

    var cell2 = row.insertCell(1);
    cell2.innerHTML = ': ';

    var cell3 = row.insertCell(2);
    var element3 = document.createElement("textarea");
    element3.cols = "20";
    element3.rows = "1";
    cell3.appendChild(element3);


    var cell4 = row.insertCell(3);
    var element4 = document.createElement("input");
    element4.type = "text";
    element4.size = "4";
    element4.name= "others";
    cell4.innerHTML = '$: ';
    cell4.appendChild(element4);

    }

    </SCRIPT>

    <table id = "dataTable" width="325" border="0">
    <form id="form2" name="form2" method="post" action="">
    <td width="38">Others</td>
    <td width="7">:</td>
    <td width="182"><textarea name="textarea" id="textarea" cols="20" rows="1"></textarea></td>
    <td width="80">$: <input type="text" name="others" size="4" /></td>

    </form>

    <input type="button" value="Add Others" onclick="addRow('dataTable')"/>
    </table>


    </body>
    </html>


    my question.
    how can i sum all value in text input after user click Add Others button?
    please help me....
     
    anisFarim, Jun 8, 2010 IP
  2. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #2
    Try this:

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<SCRIPT language="javascript">

function addRow(tableID) {

var total_value = 0;
var all_others = document.getElementsByTagName("input");

for(var i=0; i<all_others.length; i++){
    if(all_others[i].type!="text" && all_others[i].name!="others"){
        continue;
    }

    total_value += parseFloat(all_others[i].value);
}

alert(total_value);

var table = document.getElementById(tableID);

var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

var cell1 = row.insertCell(0);
cell1.innerHTML = 'Others ';

var cell2 = row.insertCell(1);
cell2.innerHTML = ': ';

var cell3 = row.insertCell(2);
var element3 = document.createElement("textarea");
element3.cols = "20";
element3.rows = "1";
cell3.appendChild(element3);


var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.size = "4";
element4.name= "others[";
cell4.innerHTML = '$: ';
cell4.appendChild(element4);

}

</SCRIPT>

<table id = "dataTable" width="325" border="0">
<form id="form2" name="form2" method="post" action="">
<td width="38">Others</td>
<td width="7">:</td>
<td width="182"><textarea name="textarea" id="textarea" cols="20" rows="1"></textarea></td>
<td width="80">$: <input type="text" name="others" size="4" /></td>

</form>

<input type="button" value="Add Others" onclick="addRow('dataTable')"/>
</table>


</body>
</html>
    Code (markup):
     
    s_ruben, Jun 8, 2010 IP
  3. anisFarim

    anisFarim Peon

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks s_ruben,

    but can it be in another function not in function addRow(tableID), like say function total()
    it mean have 1 another button
    <input type="button" value="Grand Total" onclick="total()" />

    then it display at text input
    <input type="text" name="g_total" />


    can u help me?
     
    anisFarim, Jun 9, 2010 IP
  4. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #4
    Try this one:

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<SCRIPT language="javascript">

function total(){
var total_value = 0;
var all_others = document.getElementsByTagName("input");

for(var i=0; i<all_others.length; i++){
    if(all_others[i].type!="text" || all_others[i].name!="others"){
        continue;
    }

    total_value += parseFloat(all_others[i].value);
}

document.getElementById("g_total").value = total_value;
}

function addRow(tableID) {

var table = document.getElementById(tableID);

var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

var cell1 = row.insertCell(0);
cell1.innerHTML = 'Others ';

var cell2 = row.insertCell(1);
cell2.innerHTML = ': ';

var cell3 = row.insertCell(2);
var element3 = document.createElement("textarea");
element3.cols = "20";
element3.rows = "1";
cell3.appendChild(element3);


var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.size = "4";
element4.name= "others";
cell4.innerHTML = '$: ';
cell4.appendChild(element4);

}

</SCRIPT>

<table id = "dataTable" width="325" border="0">
<form id="form2" name="form2" method="post" action="">
<td width="38">Others</td>
<td width="7">:</td>
<td width="182"><textarea name="textarea" id="textarea" cols="20" rows="1"></textarea></td>
<td width="80">$: <input type="text" name="others" size="4" /></td>

</form>

<input type="button" value="Add Others" onclick="addRow('dataTable')"/>
</table>

<br /><br />
<input type="text" id="g_total" name="g_total" /> <input type="button" value="Grand Total" onclick="total()" />

</body>
</html>
    Code (markup):
     
    s_ruben, Jun 9, 2010 IP
  5. anisFarim

    anisFarim Peon

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    thanks s_ruben.

    really appreciate. it really help to done my project. really thanks.

    :)
     
    anisFarim, Jun 9, 2010 IP