Skip to content
Advertisement

How to print the selected checkbox values after submit

Here is the my checkbox list and the button which I need to submit the data..

<label>Access Locations </label>
     <br />


     <input type="checkbox" name="chk[]" id="check1" class="pl" value="INT" /> dummy1
     <input type="checkbox" name="chk[]" id="check2" class="pl" value="MV" /> dummy2
     <input type="checkbox" name="chk[]" id="check3" class="pl" value="FV" /> dummy3
     <input type="checkbox" name="chk[]" id="check4" class="pl" value="PS" /> dummy4

     <br />
     <h4 name ="checkboxvalues" style="color:green" id="result_checkbox"></h4>  
    
     <input type="hidden" name="employee_id_update" id="employee_id_update" />
     <input onclick="getCheckboxValue()" type="submit" name="insert" id="insert" value="Update" class="btn btn-success" />

I am using below class when button clicked..

function getCheckboxValue() {

var l1 = document.getElementById("check1");
var l2 = document.getElementById("check2");
var l3 = document.getElementById("check3");
var l4 = document.getElementById("check4");

 
var res=" "; 
if (l1.checked == true){
  var pl1 = document.getElementById("check1").value;
  res = pl1 + ","; 
} 
else if (l2.checked == true ){
  var pl2 = document.getElementById("check2").value;
  res = res + pl2 + ","; 
}
else if (l3.checked == true){
document.write(res);
  var pl3 = document.getElementById("check3").value;
  res = res + pl3 + ","; 
}
else if (l4.checked == true){
  var pl4 = document.getElementById("check4").value;
  res = res + pl4 + ","; 
}

return document.getElementById("result_checkbox").innerHTML = "You have selected " + res ;

}

From above method I could see only one value in checkboxvalues as in the image when button clicked eventhough I have checked several checkboxes.

enter image description here

Can someone show me how to improve my code to show all the values when I checked several checkboxes?

If both check1 and check2 selected output should be

Output:

 You have selected INT,MV

Advertisement

Answer

You are using if else if statements so once one of the statements gets executed, the rest aren’t getting executed. You can try an if statement for each checkbox, it will get the job done.

var res=" "; 
if (l1.checked == true){
  var pl1 = document.getElementById("check1").value;
  res = pl1 + ","; 
} 
if (l2.checked == true ){
  var pl2 = document.getElementById("check2").value;
  res = res + pl2 + ","; 
}
if (l3.checked == true){
document.write(res);
  var pl3 = document.getElementById("check3").value;
  res = res + pl3 + ","; 
}
if (l4.checked == true){
  var pl4 = document.getElementById("check4").value;
  res = res + pl4 + ","; 
}
User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement