Add the Values of Text boxes dynamically with Javascript

Question

I Expect to get the sum when I click the button but nothing happens. This is however the simplified version of the code I want to use. The values of the textboxes are actually being queried from a database with php. Please F1. Here is the complete code.

<html>
<head>
</head>
<body>
<h1> JavaScript </h1>
<script type="text/javascript">
// Addint an array of values from a text box
function calc(){
    var mutli_Credit = document.course_reg.elements['Credit[]'];
    var sum = 0, i = 0, len = mutli_Credit.length;
    for(i < len; ++i){
    sum += parseInt(document.getElementById('Credit[i]).value, 10); 
    // Use parseFloat if you're dealing with floating point numbers.
    }
    //alert(sum);   
    document.getElementById('credit_load').value = sum;
    };

</script>
<form name='course_reg' onLoad=''>
MATH101 <input type='text' name='Credit[]'  value='3' id='Credit[]' size='3' readonly /><br/>
CSC201 <input type='text' name='Credit[]'  value='2' id='Credit[]' size='3' readonly /><br/>
EDU301 <input type='text' name='Credit[]'  value='2' id='Credit[]' size='3' readonly /><br/>
<BUTTON onClick='calc()'> CALCULATE </BUTTON>
Total Credit Load:<input type='text' value='' id='credit_load' name='credit_load' size='3'  readonly/></p>

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

Different elements cannot have the same id, it is invalid html. It's not the cause of your issue, but it's bad practise. — DoctorMick
– DoctorMick, Commented Feb 9, 2015 at 14:52
@DoctorMick that's not true at all; it's perfectly OK to re-use "name" values. It really depends on the server-side framework. Now, re-using "id" values, that's bad. — Pointy
– Pointy, Commented Feb 9, 2015 at 14:53
Your code is full of mistakes. your for clause is incomplete, you are opening string and not closing and there's missing concate — nanndoj
– nanndoj, Commented Feb 9, 2015 at 14:55

DoctorMick · Accepted Answer · 2015-02-09 15:01:23Z

1

Problem 1 - you need to initialise the counter variable in the for loop.

for(i = 0; i < len; ++i){

Problem 2 - the way you're trying to get an element using it's index is incorrect, you should be using the array of elements you grabbed at the top.

sum += parseInt(mutli_Credit[i].value, 10);

Problem 3 - you're not returning anything from your function so the page refreshes.

function calc(){
    ....
    return false;
};

<BUTTON onClick='return calc()'> CALCULATE </BUTTON>

And remove the duplicate ids.

answered Feb 9, 2015 at 15:01

DoctorMick

6,80330 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nanndoj · Accepted Answer · 2015-02-09 15:09:31Z

Your code is full of mistakes. I fixed it for you to use as base

Add a class to all input elements you want to sum, never use the same ID to different elements and add a class to all inputs you want to sum;

MATH101 <input type='text' name='Credit0'  value='3' id='Credit0' class="sumInput" size='3' readonly /><br/>
CSC201 <input type='text' name='Credit1'  value='2' id='Credit1' class="sumInput" size='3' readonly /><br/>
EDU301 <input type='text' name='Credit2'  value='2' id='Credit2' class="sumInput" size='3' readonly /><br/>

Retrieve all input elements

var mutli_Credit = document.getElementsByTagName("input");

Fix your for statement by initializing the variable

for(var i = 0; i < len; ++i){

Check if the element has the ID you gave them

if(mutli_Credit[i].className === "sumInput")

Sum the elements

sum += parseInt(mutli_Credit[i].value);

This is the fixed code:

// Addint an array of values from a text box 
function calc(){
    var mutli_Credit = document.getElementsByTagName("input");
    var sum = 0, i = 0, len = mutli_Credit.length;
    for(var i = 0; i < len; ++i){
      if(mutli_Credit[i].className === "sumInput") {
        sum += parseInt(mutli_Credit[i].value);
      }
    }
    document.getElementById('credit_load').value = sum;
};

...

MATH101 <input type='text' name='Credit0'  value='3' id='Credit0' class="sumInput" size='3' readonly /><br/>
CSC201 <input type='text' name='Credit1'  value='2' id='Credit1' class="sumInput" size='3' readonly /><br/>
EDU301 <input type='text' name='Credit2'  value='2' id='Credit2' class="sumInput" size='3' readonly /><br/>
<BUTTON onClick='calc()'> CALCULATE </BUTTON>
Total Credit Load:<input type='text' value='' id='credit_load' name='credit_load' size='3'  readonly/></p>

I have effected all the suggestions made but it still doesn't work. Moreover, I wont want to change the name of the text box because ot only that it is automatically echoed by php but it is going to be posted to a php script when submitted

Collectives™ on Stack Overflow

Add the Values of Text boxes dynamically with Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related