Collect multiple checkbox values without form tag using javascript

Question

I am working on a plugin for MyBB, and there I have to collect values of all checked "checkboxes" every checkbox has diffrent name/ID & unfortunatly these checkboxes are not placed under any form tag so how can I do this ??? Look at code below this code works fine if I place form tag at first row but it doesn't return anything if I place form tag below all checkbox (actually this is exactly how I have to handle checkboxes in MyBB) Thanks,

<input type="checkbox" name="chb1" value="html" />HTML<br/>
<input type="checkbox" name="chb2" value="css" />CSS<br/>
<input type="checkbox" name="chb3" value="javascript" />JavaScript<br/>
<input type="checkbox" name="chb4" value="php" />php<br/>
<input type="checkbox" name="chb5" value="python" />Python<br/>
<input type="checkbox" name="chb6" value="net" />Net<br/>

<form action="script.php" method="post">
  <input type="button" value="Click" id="btntest" />
</form>

<script type="text/javascript"><!--
function getSelectedChbox(frm) {
  var selchbox = [];        
  var inpfields = frm.getElementsByTagName('input');
  var nr_inpfields = inpfields.length;
   for(var i=0; i<nr_inpfields; i++) {
    if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true)    selchbox.push(inpfields[i].value);
  }
  return selchbox;
}


document.getElementById('btntest').onclick = function(){
  var selchb = getSelectedChbox(this.form);   
  alert(selchb);
}
//-->

</script>

It would be simplest to either select by type (using jQuery) or add a class to all the checkboxes and then use frm.getElementsByClassName('<class name>'); — RevanProdigalKnight
– RevanProdigalKnight, Commented Jul 15, 2014 at 18:50
1) Why are you hiding your JavaScript with ? 2) If you're not using a form tag, get rid of this.form in your click event. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Jul 15, 2014 at 18:50

Alcides Queiroz · Accepted Answer · 2014-07-15 19:08:02Z

2

>>>Test the Fiddle<<<

Well... with pure JavaScript:

function getCheckboxesValues(){
    return [].slice.apply(document.querySelectorAll("input[type=checkbox]"))
           .filter(function(c){ return c.checked; })
           .map(function(c){ return c.value; });
}

document.getElementById("btntest").addEventListener("click", function(){
    console.log(getCheckboxesValues());
});

edited Jul 15, 2014 at 19:08

answered Jul 15, 2014 at 19:00

Alcides Queiroz

9,5563 gold badges30 silver badges44 bronze badges

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

Collectives™ on Stack Overflow

Collect multiple checkbox values without form tag using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related