Show result from checkbox with JavaScript

Question

I want to show my result from a checkbox with javascript I need it to send it to the database with php

I have column for each checkbox

if the chekbox is checked I take the variables and insert them into my database

else I Leave the column empty

the html code and javascript

var checks = document.getElementsByClassName('justtest');
          var str = '';
          for( i=0; i<3; i++){
              if(checks[i].checked === true){
                str += checks[i].value + " ";
              }

            }
alert(str);

<div class="form-group">
   <div class="col-md-3">
      <div class="checkbox">
         <label>
<input type="checkbox" value="test1" class="justtest" > Test1
         </label>
       </div>
      </div>
     </div>
    <div class="form-group">
    <div class="col-md-3">
     <div class="checkbox">
       <label>
 <input type="checkbox" value="test2" class="justtest"> test2
       </label>
      </div>
     </div>
    </div>
     <div class="form-group">
      <div class="col-md-3">
       <div class="checkbox">
         <label>
<input type="checkbox" value="test3" class="justtest"> test3
          </label>
         </div>
       </div>
      </div>

I try to do this but without any result

var checks = document.getElementsByClassName('justtest');
          var str = checks.length;
          for( i=0; i<3; i++){
              if(checks[i].checked === true){
                str[i]= checks[i].value;
              }

            }
alert(str[0]);
alert(str[1]);
alert(str[2]);

Marcin · Accepted Answer · 2016-10-10 19:03:04Z

1

Few changes to your code, str is an array of result, and added a button which will execute the checking function, as for now the script was executed only once before you even had a change to select any option

var getValues = function () {
var str = [];
var checks = document.getElementsByClassName('justtest');
          for(var i=0; i<checks.length; i++){
              if(checks[i].checked){
                str.push( checks[i].value );
              } 
            }
  
  for( var x = 0; x < str.length; x++){
    alert (str[x]);
    }
  
  }

<div class="form-group">
   <div class="col-md-3">
      <div class="checkbox">
         <label>
<input type="checkbox" value="test1" class="justtest" > Test1
         </label>
       </div>
      </div>
     </div>
    <div class="form-group">
    <div class="col-md-3">
     <div class="checkbox">
       <label>
 <input type="checkbox" value="test2" class="justtest"> test2
       </label>
      </div>
     </div>
    </div>
     <div class="form-group">
      <div class="col-md-3">
       <div class="checkbox">
         <label>
<input type="checkbox" value="test3" class="justtest"> test3
          </label>
         </div>
        <button onclick="getValues()">Check</button>
       </div>
      </div>

answered Oct 10, 2016 at 19:03

Marcin

1,4921 gold badge14 silver badges27 bronze badges

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

1 Comment

saadsaad Over a year ago

and if I want to get result to my php code I use name ?

Community · Accepted Answer · 2017-05-23 12:13:42Z

1

it is possible to handle this from html point of view, where you give all the check box same input name (and use [] after it) , then let the post of the form take it to your php, and your php would see it as array, from javascript end you also get the values.

First of all let me show you the HTML version of it

each of your input field should look like this

  <input type="checkbox" name="justtest[]" value="owk 1">,
  <input type="checkbox" name="justtest[]" value="owk 2">

Note the justtest[] naming

when you do form post you can use ur php with any loop you like e.g

foreach ($_POST["justtest"] as $key => $value) {
 echo $value;
 }

While from javascript like you have done above Marcin C answer on this page still

if not satisfied here is another javascript approach which might help out too (Run the code snippet to see it in action)

function getInput(){
  var values = [];
  var inputs = document.getElementsByName("justtest[]");
  for (var i = 0; i <inputs.length; i++) {
    var inp=inputs[i];
    if(inp.checked){
     values.push(inp.value);
      }
  //alert("justtest["+i+"].value="+inp.value); this returns all with their value , we check for only checked ones
      }
 alert (values); //alert our values here
  }

<input type="checkbox" name="justtest[]" value="owk 1">
<input type="checkbox" name="justtest[]" value="owk 2">
<input type="checkbox" name="justtest[]" value="owk 3">
<input type="checkbox" name="justtest[]" value="owk 4">

<button onclick="getInput()">Get Input<button>

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Oct 10, 2016 at 19:08

Theophilus Omoregbee

2,5031 gold badge25 silver badges33 bronze badges

4 Comments

saadsaad Over a year ago

but in javascript how I can do it ?

Theophilus Omoregbee Over a year ago

if Marcin C answer did not satisfy your javascript , then are you trying to send this data to php after getting it using javascript , like as if it was a form post asynchronously

Theophilus Omoregbee Over a year ago

if it is , i will modify the answer and add the javascript part of it

Theophilus Omoregbee Over a year ago

run the code snippet to see the javascript implementation

Jake Stimpson · Accepted Answer · 2016-10-10 19:00:48Z

0

Is you script tag in the head of your document? If so, this code will always fail as the document won't have initialised the checkboxes to be able to retrieve them.

Try moving the script to the bottom of the page (just above your end body tag)

answered Oct 10, 2016 at 19:00

Jake Stimpson

3032 silver badges14 bronze badges

1 Comment

saadsaad Over a year ago

the first script code is work, but I want to show each chekbox Alone

Collectives™ on Stack Overflow

Show result from checkbox with JavaScript

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related