Get checkbox values in javascript

Question

Roughly, this is my code:

<form name="mpform" id="mpform">
<input type="checkbox" onclick="mpfunc()" id="mpay" name="mpay[]" value="19" style="float:left;" />
//many of the above input tag - only the value changes with other numbers
</form>
<script type="text/javascript">
function mpfunc()
{
var comp=0;
document.getElementById("mpaydiv").style.visibility="visible";
for(var i=0; i< document.getElementById("mpform").elements['mpay[]'].length;i++){
if(document.getElementById("mpform").elements['mpay[]'][i].checked)
comp = comp + document.getElementById("mpform").elements['mpay[]'][i].value;
}
document.getElementById("mpaydiv").innerHTML=comp;
}
</script>
<div id="mpaydiv" style="position:fixed; right:0; visibility:hidden; bottom:0; border:1px solid black; background-color:white; padding:2px 2px;"></div></div>
    </div>

    <div id="footer"></div>
</div>

I have tried substituting getElementById("mpform") with form[0],mpform and others but I cant seem to access the values. With the current getelementid I get

Error: document.getElementById("mpform") is null Source File: index.php?page=fakturi Line: 3938

With mpform I get mpform is undefined as with form[0] Please help. How do I get the sum of the values of all selected checkboxes?

Kyle · Accepted Answer · 2011-08-05 20:36:21Z

2

The id of your form must be mpform. You have name="mpform". Add id="mpform".

Also, for efficiency sake, you should change your function to this. Using multiple getElementById for grabbing the same element is very inefficient.

<script type="text/javascript">
function mpfunc()
{
   var comp=0;
   document.getElementById("mpaydiv").style.visibility="visible";
   var elements = document.getElementById("mpform").elements;
   for(var i=0; i< elements.length;i++){
      if(elements[i].type == 'checkbox' && elements[i].checked)
         comp = comp + parseInt(elements[i].value);
   }
   document.getElementById("mpaydiv").innerHTML=comp;
}
</script>

edited Aug 5, 2011 at 20:36

answered Aug 5, 2011 at 20:14

Kyle

4,46124 silver badges33 bronze badges

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

3 Comments

DreamWave Over a year ago

Yes, sorry I changed it. Same result though: Error: document.getElementById("mpform") is null Source File: index.php?page=fakturi Line: 3938

DreamWave Over a year ago

With the change of the function I get this: Error: document.getElementById("mpform") is null Source File: index.php?page=fakturi Line: 3938

Kyle Over a year ago

I just edited my script. I believe the problem was the way you were accessing the elements. I just tested the script I just posted with your html code and it works now.

cwallenpoole · Accepted Answer · 2011-08-05 20:23:00Z

1

I seem to recall IE having issues with the 0 index of the forms array. You can access it through, document.getElementsByName("mpform")[0] or document.forms['mpform']. To get the checkbox descendants, you might use getElementById('mpay') or document.getElementsByName("mpay")[0] or document.getElementsByName("mpform")[0].elements[0]

edited Aug 5, 2011 at 20:23

answered Aug 5, 2011 at 20:17

cwallenpoole

82.4k26 gold badges132 silver badges174 bronze badges

3 Comments

DreamWave Over a year ago

Error: document.forms.mpform is undefined Source File: index.php?page=fakturi Line: 3938 Error: document.getElementsByName("mpform")[0] is undefined Source File: index.php?page=fakturi Line: 3938 I tried it even though I'm using FireFox

cwallenpoole Over a year ago

Are you sure that the form is actually there? What do you see when you do CTRL + U?

DreamWave Over a year ago

Thank you for making me look at my code. I had a previous form tag that wasn't closed.

blejzz · Accepted Answer · 2011-08-05 20:13:54Z

1

Should be like this

     <form name="mpform" id="mpform"></form>

answered Aug 5, 2011 at 20:13

blejzz

3,3575 gold badges43 silver badges61 bronze badges

1 Comment

DreamWave Over a year ago

Yes, sorry I changed it. Same result though: Error: document.getElementById("mpform") is null Source File: index.php?page=fakturi Line: 3938

Madara's Ghost · Accepted Answer · 2011-08-05 20:15:10Z

1

You try to get Element By Id but you specified a name for it.

<form id="mpform">

answered Aug 5, 2011 at 20:15

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

1 Comment

DreamWave Over a year ago

Yes, sorry I changed it. Same result though: Error: document.getElementById("mpform") is null Source File: index.php?page=fakturi Line: 3938

silverstrike · Accepted Answer · 2011-08-05 20:30:35Z

1

Is it possible that the function is running before the form element has finished loading? Try running the function as part of the window.onload event.

answered Aug 5, 2011 at 20:30

silverstrike

5222 silver badges7 bronze badges

Comments

Kyle · Accepted Answer · 2011-08-05 20:32:14Z

1

I just tried this out using your html code, and it seems to work. I edited my answer above to show this, but also posted it as another answer to make sure you saw.

<script type="text/javascript">
function mpfunc()
{
   var comp=0;
   document.getElementById("mpaydiv").style.visibility="visible";
   var elements = document.getElementById("mpform").elements;
   for(var i=0; i< elements.length;i++){
      if(elements[i].type == 'checkbox' && elements[i].checked)
         comp = comp + parseInt(elements[i].value);
   }
   document.getElementById("mpaydiv").innerHTML=comp;
}
</script>

answered Aug 5, 2011 at 20:32

Kyle

4,46124 silver badges33 bronze badges

Collectives™ on Stack Overflow

Get checkbox values in javascript

6 Answers 6

3 Comments

3 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

3 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related