How to use values from multiple Html Checkboxes in SQL query?

Question

I have this dropdown list with multiple checkboxes, the one on left helps to check all Aisles in group by one click. All checkboxes has values i need to use in SQL Query to look them up. How i can save all the values from this dropdown in similar format like: '099','101','105','106','202' So I can then use it in SQL query as list of values.

 SELECT * FROM table   WHERE aisle IN ( '099','101','105','106','202')

I think it should store all the values inside the selectBox after i press submit, but the text value of selectBox what is <option>Select Aisles</option> never changes, even with just one selected box. I know that my code is pretty much naked, without any functions for that SQL query, as i believe i am able to do that one. Only issue is I do not know how to capture those values from all checkboxes. Thank you for advice.

Edit: I manage to figured out most of the issues with help from @Adam P. but it is not working as I would like.

Now, when i submit the form it prints those aisle numbers in to text field. I just do not know how to print all those values without , on the end, after last Aisle number.

Second issue is since i added this function there it is not closing the dropdown menu after it was submited.

Dropdown Test h1 { color: green; } .multipleSelection { width: 320px; background-color: #BCC2C1; } .selectBox { position: relative; } .selectBox select { width: 100%; font-weight: bold; } .overSelect { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #checkBoxes { display: none; border: 1px #8DF5E4 solid; } #checkBoxes label { display: inline-block; } #checkBoxes label:hover { background-color: #4F615E; }

 <form id="aisle_selection" method="post" action="" >
     <div class="multipleSelection">
         <div class="selectBox" 
             onclick="showCheckboxes()">
             <select>
                 <option  id="aisle_selectbox">Select Aisle</option>
             </select>
             <div class="overSelect"></div>
         </div>

         <div id="checkBoxes">

             <div>
                 <table>
             <thead>
                     <tr>
                         <th class="col-md-2">Zone</th>
                         <th class="col-md-10">Aisle</th>
                     </tr>
                     </thead>
                     <tbody><tr><td><input onClick="selectAllLe(this,'class_LE')" type="checkbox" value=""><span>LE<span></span></span></td><td class="checkBOX">
                         <label><input class="class_LE" type="checkbox" name="aisle[]" id="001" value="001"><span>1</span></label>
                         <label><input class="class_LE"  type="checkbox" name="aisle[]" id="002"value="002"><span>2</span></label>
                         <label><input class="class_LE"  type="checkbox" name="aisle[]" id="003" value="003"><span>3</span></label>
                         <label><input class="class_LE"  type="checkbox" name="aisle[]" id="096" value="096"><span>96</span></label>
                         <label><input class="class_LE"  type="checkbox" name="aisle[]" id="097" value="097"><span>97</span></label>
                         <label><input class="class_LE"  type="checkbox" name="aisle[]" id="098" value="098"><span>98</span></label>
                         <label><input class="class_LE"  type="checkbox" name="aisle[]" id="099" value="099"><span>99</span></label>
                         <label><input class="class_LE"  type="checkbox" name="aisle[]" id="990" value="990"><span>990</span></label>
                         <label><input class="class_LE"  type="checkbox" name="aisle[]" id="991" value="991"><span>991</span></label>
                         <label><input class="class_LE"  type="checkbox" name="aisle[]" id="992" value="992"><span>992</span></label>
                         <label><input class="class_LE"  type="checkbox" name="aisle[]" id="993" value="993"><span>993</span></label>
                         <label><input class="class_LE"  type="checkbox" name="aisle[]" id="994" value="994"><span>994</span></label>
                         <label><input class="class_LE"  type="checkbox" name="aisle[]" id="995" value="995"><span>995</span></label>
                         <label><input class="class_LE"  type="checkbox" name="aisle[]" id="996" value="996"><span>996</span></label>
                         <label><input class="class_LE"  type="checkbox" name="aisle[]" id="997" value="997"><span>997</span></label>
                         <label><input class="class_LE"  type="checkbox" name="aisle[]" id="998" value="998"><span>998</span></label>
                         <label><input class="class_LE"  type="checkbox" name="aisle[]" id="999" value="999"><span>999</span></label>
                         <hr style="margin-top: 0.05em; margin-bottom: 0.05em; border-top: 3px dotted #bbb;">
                     </td></tr><tr><td><input onClick="selectAllA(this,'class_A')" type="checkbox" value=""><span>A<span></span></span></td><td class="checkBOX">
                         <label><input class="class_A"  type="checkbox" name="aisle[]" id="100" value="100"><span>100</span></label>
                         <label><input class="class_A"  type="checkbox" name="aisle[]" id="101" value="101"><span>101</span></label>
                         <label><input class="class_A"  type="checkbox" name="aisle[]" id="102" value="102"><span>102</span></label>
                         <label><input class="class_A"  type="checkbox" name="aisle[]" id="103" value="103"><span>103</span></label>
                         <label><input class="class_A"  type="checkbox" name="aisle[]" id="104" value="104"><span>104</span></label>
                         <label><input class="class_A"  type="checkbox" name="aisle[]" id="105" value="105"><span>105</span></label>
                         <hr style="margin-top: 0.05em; margin-bottom: 0.05em; border-top: 3px dotted #bbb;">
                     </td></tr><tr><td><input onClick="selectAllB1(this,'class_B1')" type="checkbox" value=""><span>B1<span></span></span></td><td class="checkBOX">
                         <label><input class="class_B1"  type="checkbox" name="aisle[]" id="106" value="106"><span>106</span></label>
                         <label><input class="class_B1"  type="checkbox" name="aisle[]" id="107" value="107"><span>107</span></label>
                         <label><input class="class_B1"  type="checkbox" name="aisle[]" id="108" value="108"><span>108</span></label>
                         <label><input class="class_B1"  type="checkbox" name="aisle[]" id="109" value="109"><span>109</span></label>
                         <hr style="margin-top: 0.05em; margin-bottom: 0.05em; border-top: 3px dotted #bbb;">
                     </td></tr><tr><td><input onClick="selectAllB2(this,'class_B2')" type="checkbox" value=""><span>B2<span></span></span></td><td class="checkBOX">
                         <label><input class="class_B2"  type="checkbox" name="aisle[]" id="110" value="110"><span>110</span></label>
                         <label><input class="class_B2"  type="checkbox" name="aisle[]" id="111" value="111"><span>111</span></label>
                         <label><input class="class_B2"  type="checkbox" name="aisle[]" id="112" value="112"><span>112</span></label>
                         <label><input class="class_B2"  type="checkbox" name="aisle[]" id="113" value="113"><span>113</span></label>
                         <hr style="margin-top: 0.05em; margin-bottom: 0.05em; border-top: 3px dotted #bbb;">
                     </td></tr><tr><td><input onClick="selectAllC1(this,'class_C1')" type="checkbox" value=""><span>C1<span></span></span></td><td class="checkBOX">
                         <label><input class="class_C1"  type="checkbox" name="aisle[]" id="114" value="114"><span>114</span></label>
                         <label><input class="class_C1"  type="checkbox" name="aisle[]" id="115" value="115"><span>115</span></label>
                         <label><input class="class_C1"  type="checkbox" name="aisle[]" id="116" value="116"><span>116</span></label>
                         <label><input class="class_C1"  type="checkbox" name="aisle[]" id="117" value="117"><span>117</span></label>
                         <label><input class="class_C1"  type="checkbox" name="aisle[]" id="118" value="118"><span>118</span></label>
                         <label><input class="class_C1"  type="checkbox" name="aisle[]" id="119" value="119"><span>119</span></label>
                         <hr style="margin-top: 0.05em; margin-bottom: 0.05em; border-top: 3px dotted #bbb;">
                     </td></tr><tr><td><input onClick="selectAllC2(this,'class_C2')" type="checkbox" value=""><span>C2<span></span></span></td><td class="checkBOX">
                         <label><input class="class_C2"  type="checkbox" name="aisle[]" id="120" value="120"><span>120</span></label>
                         <label><input class="class_C2"  type="checkbox" name="aisle[]" id="121" value="121"><span>121</span></label>
                         <hr style="margin-top: 0.05em; margin-bottom: 0.05em; border-top: 3px dotted #bbb;">
                     </td></tr><tr><td><input onClick="selectAllD1(this,'class_D1')" type="checkbox" value=""><span>D1<span></span></span></td><td class="checkBOX">
                         <label><input class="class_D1"  type="checkbox" name="aisle[]" id="200" value="200"><span>200</span></label>
                         <label><input class="class_D1"  type="checkbox" name="aisle[]" id="201" value="201"><span>201</span></label>
                         <label><input class="class_D1"  type="checkbox" name="aisle[]" id="202" value="202"><span>202</span></label>
                         <label><input class="class_D1"  type="checkbox" name="aisle[]" id="203" value="203"><span>203</span></label>
                         <label><input class="class_D1"  type="checkbox" name="aisle[]" id="204" value="204"><span>204</span></label>
                         <label><input class="class_D1"  type="checkbox" name="aisle[]" id="205" value="205"><span>205</span></label>
                         <label><input class="class_D1"  type="checkbox" name="aisle[]" id="206" value="206"><span>206</span></label>
                         <hr style="margin-top: 0.05em; margin-bottom: 0.05em; border-top: 3px dotted #bbb;">
                     </td></tr><tr><td><input onClick="selectAllD2(this,'class_D2')" type="checkbox" value=""><span>D2<span></span></span></td><td class="checkBOX">
                         <label><input class="class_D2"  type="checkbox" name="aisle[]" id="207" value="207"><span>207</span></label>
                         <label><input class="class_D2"  type="checkbox" name="aisle[]" id="208" value="208"><span>208</span></label>
                         <label><input class="class_D2"  type="checkbox" name="aisle[]" id="209" value="209"><span>209</span></label>
                         <label><input class="class_D2"  type="checkbox" name="aisle[]" id="210" value="210"><span>210</span></label>
                         <label><input class="class_D2"  type="checkbox" name="aisle[]" id="211" value="211"><span>211</span></label>
                         <label><input class="class_D2"  type="checkbox" name="aisle[]" id="212" value="212"><span>212</span></label>
                         <label><input class="class_D2"  type="checkbox" name="aisle[]" id="213" value="213"><span>213</span></label>
                         <hr style="margin-top: 0.05em; margin-bottom: 0.05em; border-top: 3px dotted #bbb;">
                     </td></tr><tr><td><input onClick="selectAllD3(this,'class_D3')" type="checkbox" value=""><span>D3<span></span></span></td><td class="checkBOX">
                         <label><input class="class_D3"  type="checkbox" name="aisle[]" id="214" value="214"><span>214</span></label>
                         <label><input class="class_D3"  type="checkbox" name="aisle[]" id="215" value="215"><span>215</span></label>
                         <label><input class="class_D3"  type="checkbox" name="aisle[]" id="216" value="216"><span>216</span></label>
                         <label><input class="class_D3"  type="checkbox" name="aisle[]" id="217" value="217"><span>217</span></label>
                         <label><input class="class_D3"  type="checkbox" name="aisle[]" id="218" value="218"><span>218</span></label>
                         <label><input class="class_D3"  type="checkbox" name="aisle[]" id="219" value="219"><span>219</span></label>
                         <hr style="margin-top: 0.05em; margin-bottom: 0.05em; border-top: 3px dotted #bbb;">

                     </td></tr><tr><td><span>Abnormal<span></span></span></td><td>
                         <label><input type="checkbox" name="aisle[]" id="900" value="900"><span>900</span></label></td></tr></tbody>
                 </table>
                 <div> <button type="reset">Reset</button>  <button type="button" id="confirmQ" name="confirmQ">Confirm</button> </div>

             </div>
     </div>
          </div>
 </form>
 <?php
  echo($_POST);
 ?>
 <div id="results"></div>
 <script>

     $('#confirmQ').on('click',function(){
       var x = $("#aisle_selection").serializeArray();
       $("#aisle_selectbox").empty();
       $.each(x, function(i, field){         
         $("#aisle_selectbox").append(field.value + ", ");
       });
     });


     function selectAllLe(source) {
         checkboxes = document.getElementsByClassName('class_LE');
         for(var i in checkboxes)
             checkboxes[i].checked = source.checked;
     }
     function selectAllA(source) {
         checkboxes = document.getElementsByClassName('class_A');
         for(var i in checkboxes)
             checkboxes[i].checked = source.checked;
     }
     function selectAllB1(source) {
         checkboxes = document.getElementsByClassName('class_B1');
         for(var i in checkboxes)
             checkboxes[i].checked = source.checked;
     }
     function selectAllB2(source) {
         checkboxes = document.getElementsByClassName('class_B2');
         for(var i in checkboxes)
             checkboxes[i].checked = source.checked;
     }
     function selectAllC1(source) {
         checkboxes = document.getElementsByClassName('class_C1');
         for(var i in checkboxes)
             checkboxes[i].checked = source.checked;
     }
     function selectAllC2(source) {
         checkboxes = document.getElementsByClassName('class_C2');
         for(var i in checkboxes)
             checkboxes[i].checked = source.checked;
     }
     function selectAllD1(source) {
         checkboxes = document.getElementsByClassName('class_D1');
         for(var i in checkboxes)
             checkboxes[i].checked = source.checked;
     }
     function selectAllD2(source) {
         checkboxes = document.getElementsByClassName('class_D2');
         for(var i in checkboxes)
             checkboxes[i].checked = source.checked;
     }
     function selectAllD3(source) {
         checkboxes = document.getElementsByClassName('class_D3');
         for(var i in checkboxes)
             checkboxes[i].checked = source.checked;
     }

     var show = true;

     function showCheckboxes() {
         var checkboxes =
             document.getElementById("checkBoxes");

         if (show) {
             checkboxes.style.display = "block";
             show = false;
         } else {
             checkboxes.style.display = "none";
             show = true;
         }
     }
 </script>

I suggest for you to use a select box with enabled multiple selection instead of a lot of checkboxes with same name. Look for it: developer.snapappointments.com/bootstrap-select/examples — adampweb
– adampweb, Commented Nov 22, 2020 at 7:19
@AdamP. looks good, but is it possible to create a loyout similar to my layout there? — nahakubuilder
– nahakubuilder, Commented Nov 22, 2020 at 7:51

adampweb · Accepted Answer · 2020-11-22 08:39:21Z

1

I modified your Confirm button, to type="button" and add an id id="confirm"

And add a JS click event handler for this button:

$('#confirm').on('click',function(){ console.log($('form').serializeArray()); }); Now when checkboxes selected and click the Confirm button, the form data will appear in the console like this:

And here is a sample of backend processing (var_dump($_POST);) result:

edited Nov 22, 2020 at 8:39

answered Nov 22, 2020 at 8:28

adampweb

1,4691 gold badge12 silver badges21 bronze badges

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

15 Comments

nahakubuilder Over a year ago

Thank you for your time, but i change only id="confirmQ" and it does not work, even with i do not add thatQ there, no action after pressing the button. I updated main post with whole code.

adampweb Over a year ago

Do you open the console (developer tools)? I forget to tell you, you need to include jquery.js in the head section

nahakubuilder Over a year ago

I am getting this error Uncaught ReferenceError: $ is not defined <anonymous> file:///C:/xampp/htdocs/a/index.html:155 in console for the line where is <script> $('#confirmQ').on('click',function(){ console.log($('form').serializeArray()); });</script> I downloaded jquery from their website and call it from head section with: <script>src="jquery-3.5.1.js"</script>

adampweb Over a year ago

your script tag is broken, correct tag is: <script src="jquery-3.5.1.js"></script>

adampweb Over a year ago

I make a short video from working code and result here: youtu.be/EqPwVC7P9zs

|

Collectives™ on Stack Overflow

How to use values from multiple Html Checkboxes in SQL query?

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related