Dynamic checkbox html using jquery from database

Question

I have some html like this :

<div class="control-group" id="tipePrinter">
    <label class="control-label">Tipe Printer :</label>
    <div class="controls">
       <select id="selectPrinter">

       </select>
     </div>
</div>

<div class="control-group" id="tipeInk">
    <label class="control-label">Tipe Tinta :</label>
    <div class="controls" id="labelInk">
       // Dynamic checkbox
    </div>
</div>

If I have table like this in my database :

+-------------------+--------------+--------------+
|       Type        |     Color    |     Black    |
+-------------------+--------------+--------------+
|       F2410       |     HP703    |     HP60     |
|       810C        |     HP49     |     HP20     |
|       F2410       |     HP78     |     HP45     |
|       F2410       |     HP17     |     HP15     |
+-------------------+--------------+--------------+

and I get the data from table above using jquery,

if (id === "HPD") { //ini pake tinta
     $("#selectPrinter").empty();

     var types = [];

    $.ajax({
       url: '<?php echo base_url() . 'control_printer/getTinta/' ?>',
       type: 'POST',
       data: {id: id},
       dataType: 'json',
       success: function(obj) {
            types = obj;
            $('#tipePrinter').show();
            $("#selectPrinter").html("");
            for (var i = 0; i < types.length; i++){
               var printerTypes = types[i].type.split(",");
                   for (var c = 0; c < printerTypes.length; c++){
                       $("#selectPrinter").append($("<option></option>").val(i).text(printerTypes[c].trim()));
                    }
            }
        }
     });

     $("#selectPrinter").change(function() {
         // This is the manipulation
     });

and will be returning a json that I store into a variable like this:

[
{
    "id_printer": "HPD",
    "type": "F2410",
    "color": "HP703",
    "black": "HP60"
},
{
    "id_printer": "HPD",
    "type": "810C",
    "color": "HP49",
    "black": "HP20"
},
{
    "id_printer": "HPD",
    "type": "1220C",
    "color": "HP78",
    "black": "HP45"
},
{
    "id_printer": "HPD",
    "type": "840C",
    "color": "HP17",
    "black": "HP15"
}
]

How can I make dynamic chekcbox from field color and black. For example, If user choose F2410, then would be displaying a two checkbox which is HP703 and HP60 ?

Perhaps, there would be adding some html in div labelInk like this :

<label class="checkbox inline">
  <input type="checkbox" name="colors[]" id="color" value="HP703" /> HP703</label>
<label class="checkbox inline">
  <input type="checkbox" name="colors[]" id="black" value="HP60"/> HP60 </label>

Mouser · Accepted Answer · 2015-02-25 17:12:57Z

var types = [{
  "id_printer": "HPD",
  "type": "F2410",
  "color": "HP703",
  "black": "HP60"
}, {
  "id_printer": "HPD",
  "type": "810C",
  "color": "HP49",
  "black": "HP20"
}, {
  "id_printer": "HPD",
  "type": "1220C",
  "color": "HP78",
  "black": "HP45"
}, {
  "id_printer": "HPD",
  "type": "840C",
  "color": "HP17",
  "black": "HP15"
}]


$(document).ready(function($) {
  //user selected the HPD
  //this should be in the success function of the Ajax call
  $("#selectPrinter").html("");
  for (var i = 0; i < types.length; i++) {

    var printerTypes = types[i].type.split(",");
    for (var c = 0; c < printerTypes.length; c++) {
      $("#selectPrinter").append($("<option></option>").val(i).text(printerTypes[c].trim()));
    }
    
  }
  setLabelsToPage.call($("#selectPrinter")[0]);

  //the click handler to the printer type changer should be outside the ajax call
  $("#selectPrinter").on("change", setLabelsToPage)


});

function setLabelsToPage() {
  var value = $(this).val();
  $(".checkBox_controls").empty();
  var options = [];

  if (types[value].color || types[value].black) {
    types[value].color ? options.push(["color", types[value].color]) : null;
    types[value].black ? options.push(["black", types[value].black]) : null;
    for (var i = 0; i < options.length; ++i) {
      $(".checkBox_controls").append($("<input />").attr("name", "color[]").attr("type", "checkbox").val(options[i][1]).attr("id", "checkbox_" + options[i][0]));
      $(".checkBox_controls").append($("<label></label>").attr("for", "checkbox_" + options[i][0]).html(options[i][1] + " (" + options[i][0] + ")"));
    }
  }


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group" id="merkPrinter">
  <label class="control-label" for="selectError">Merk Printer :</label>
  <div class="controls">
    <select id="selectError" class="chzn-done" data-rel="chosen" style="display: block;">
      <option value="BRO">BROTHER</option>
      <option value="EDM">EPSON DOT MATRIK</option>
      <option value="EPD">EPSON DESKJET</option>
      <option value="HPD" selected>HP DESKJET</option>
      <option value="HPL">HP LASERJET</option>
      <option value="HPO">HP OFFICEJET</option>
      <option value="KM">KOINICA MINOLTA</option>
      <option value="PNS">PANASONIC</option>

    </select>
  </div>
</div>

<div class="control-group" id="tipePrinter">
  <label class="control-label">Tipe Printer :</label>
  <div class="controls">
    <select id="selectPrinter">

    </select>
    <div class="checkBox_controls">

    </div>

  </div>
</div>

I took a similar approach as to the previous question. However made some slight adjustments, for assigning the labels. When there is no color/black retrieved from the database the corresponding checkbox won't we shown on the page.

I separated the change function from the assignment line. This way I could call the function from separately from the change event, to show the first options when the select is populated.

setLabelsToPage.call($("#selectPrinter")[0]);

This line passes a reference to the select using call.

Collectives™ on Stack Overflow

Dynamic checkbox html using jquery from database

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related