Calculate textbox value

peterjc · July 5, 2010

Some javascript help needed. The input textbox like example below were generated using php. The 1, 3,6,8 inside the num[] textbox is actually the dabase table primary key id.

the problem is i need a way to calculate the total number for all of the textbox. Example: 12 + 8 +15 +5 = 40. I does not know how to get all of the textbox value because it is in array. Could someone please help me how to get the textbox value using javasript?

Example:

Name A <input name="num[1]" type="text" id="num[]" value="12" />

Name B <input name="num[3]" type="text" id="num[]" value="8" />

Name C <input name="num[6]" type="text" id="num[]" value="15" />

Name D <input name="num[8]" type="text" id="num[]" value="5" />

Thank in advance

joePHP · July 6, 2010

Hi,

What you should do is give them all the same name like that you are creating an array. The primary key that you get from the database put in the id property instead. Now that you have an array of text boxes, you could loop through its value and add up the total.

<html>
<head>
<title>Calculate textbox value</title>
<script type="text/javascript">

function getTotal()
{
var numTxt = document.myform.num.length;
var total = 0;

for(var i = 0; i < numTxt; i++)
{
	total += parseFloat(document.myform.num[i].value);
}

document.getElementById("total").value = total;
}
</script>
</head>
<body>
<div class="main">
<form name="myform">
	Name A <input name="num" type="text" id="num[1]" value="12" />
	Name B <input name="num" type="text" id="num[3]" value="8" />
	Name C <input name="num" type="text" id="num[6]" value="15" />
	Name D <input name="num" type="text" id="num[8]" value="5" />
	Total <input name="total" type="text" id="total" value="" />
</form>
</div>

<script type="text/javascript">
getTotal();
</script>
</body>
</html>

Hope it helps,

Joe

peterjc · July 7, 2010

Thank for your reply.

But the problem is, if i set the primary key that get from the database to the id property, after send the form, in php, i cannot identify which text box value belong to which name.

Example: If all text box with name 'num' only, after send, the query string will be

num=12&num=8&num=15&num=5

Is there any way to get the text box value even the text box name property with the primary key?

Any idea?

Thank.

joePHP · July 7, 2010

I see what you are saying. So lets keep the names as the database PK and give the id's the value num. Now lets loop through the forms elements and find the text boxes. If it is a text box, lets make sure that it has an id with the value of num, because we only want to add their values and not for example the text box with the id of total which doesn't get added but just displays the final total.

<html>
<head>
<title>Calculate textbox value</title>
<script type="text/javascript">

function getTotal()
{
var numElements = document.myform.length;
var total = 0;

//loop through the form
for(var i = 0; i < numElements; i++)
{
	//check if it's a textbox
	if(document.myform[i].type == 'text')
	{
		//check if has the id value of num
		if(document.myform[i].id == 'num')
		{		
			total += parseFloat(document.myform[i].value);
		}
	}
}

//Display the total
document.getElementById("total").value = total;
}
</script>
</head>
<body>
<div class="main">
   <form name="myform">
      Name A <input id="num" type="text" name="num[1]" value="12" />
      Name B <input id="num" type="text" name="num[3]" value="8" />
      Name C <input id="num" type="text" name="num[6]" value="15" />
      Name D <input id="num" type="text" name="num[8]" value="5" />
      Total <input name="total" type="text" id="total" value="" />
   </form>
</div>

<script type="text/javascript">
getTotal();
</script>
</body>
</html>

I hope that helps,

Joe

Psycho · July 7, 2010

You cannot give multiple elements the same ID. It is against the standards and has no purpose since you cannot reference all of them by the same ID. Only the last element will be assigned the ID.

If you fix that problem you make the solution to this much, much easier.

When creating the input fields use an incrementing counter to give all the fields unique ids in the format "num_0", "num_1", etc.

Name A <input name="num[1]" type="text" id="num_0" value="12" /><br />
Name B <input name="num[3]" type="text" id="num_1" value="8" /><br />
Name C <input name="num[6]" type="text" id="num_2" value="15" /><br />
Name D <input name="num[8]" type="text" id="num_3" value="5" /><br />

Then you can use this more efficient function to calculate the total:

function getTotal()
{
    var total = 0;
    var idx = 0;
    while(fieldObj = document.getElementById('num_'+ idx++))
    {
        total += parseInt(fieldObj.value);
    }
    return total;
}

Working example:

<html>
<head>
<script type="text/javascript">
  
function getTotal()
{
    var total = 0;
    var idx = 0;
    while(fieldObj = document.getElementById('num_'+ idx++))
    {
        total += parseInt(fieldObj.value);
    }
    return total;
}
</script>
</head>
<body>
Name A <input name="num[1]" type="text" id="num_0" value="12" /><br />
Name B <input name="num[3]" type="text" id="num_1" value="8" /><br />
Name C <input name="num[6]" type="text" id="num_2" value="15" /><br />
Name D <input name="num[8]" type="text" id="num_3" value="5" /><br />
<button onclick="alert(getTotal());">Get Total</button>
</body>
</html>

Sign In

Calculate textbox value

Recommended Posts

peterjc

Link to comment

Share on other sites

joePHP

Link to comment

Share on other sites

peterjc

Link to comment

Share on other sites

joePHP

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information