Member Avatar for asyieen

actually, i want to display back all checked value in checkbox..In my form, there is some checkbox element where the user should check necessary value b4 submit the form....My problem is, once the user has submit the from, i can't retrieved only checked value.....it display all value including unchecked value in checkbox....so, if anyone can help me, it would be great....thanks in advance......

  • 2 Contributors
  • 1 Reply
  • 441 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Shanti C

Dani AI

Generated

wanted only the checked checkbox values shown. Common causes for getting every value are: iterating the raw form elements without testing .checked, treating a single checkbox as an array, or building the result string in a way that leaves trailing commas or stray characters.

A compact, reliable approach is to select only checked controls with the :checked selector and join their values. This works consistently whether there is one checkbox or many:

<script>
function getCheckedValues(name) {
  return Array.from(document.querySelectorAll('input[name="' + name + '"]:checked'))
              .map(cb => cb.value);
}

document.addEventListener('DOMContentLoaded', function () {
  var form = document.querySelector('form');
  form.addEventListener('submit', function (e) {
    var values = getCheckedValues('contype');           // ["A","B"]
    document.getElementById('checkedResult').textContent = values.join(', ');
    // let the form submit normally or send 'values' via AJAX
  });
});
</script>

Notes and troubleshooting:

  • Using querySelectorAll(...:checked) always returns only checked boxes; Array.from(...).map(...) yields a clean array with no trailing delimiter.
  • For server-side languages that expect arrays (for example PHP), give checkboxes the name contype[] so the backend receives an array of checked values.
  • If older browsers must be supported (very old IE), fall back to document.getElementsByName('contype') and test .checked in a loop.
  • The snippet posted by attempts the same idea but has a few issues (an unused total, a stray # and string concatenation that can leave trailing commas). The selector-based approach above is simpler and less error-prone.
Member Avatar for Shanti C

Check this code:

<script>
function comparision(){
d=document.form2;
var total="";
if(!d.contype.length){
if(d.contype.checked) {
d.check_compare.value=d.check_compare.value+d.contype.value+',';
return true;
} else {
alert("Please select check Box");
return false;
}
}
for(var i=0; i < d.contype.length; i++){
if(d.contype[i].checked) {
#
total +=d.contype[i].value + "\n";
d.check_compare.value=d.check_compare.value+d.contype[i].value+',';
}
}

if(d.check_compare.value=="") {
alert("Please select atleast one check Box");
return false;
}
}
</script>

in the next page you should do like this:
$_POST;

And one more thing you have to add one hidden field like:
<input type=hidden name="check_compare" value="check_compare"> below your form tag starts....

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.