How to create dynamic checkboxes based on values in a database, using AJAX?

Question

I'm trying to create dynamic checkboxes using AJAX so that on the basis of categories the number of checkboxes should appear on screen. I've sample code in HTML that I want to convert in JS.

HTML Code

<div id="check-awesome" class="form-group checkbox">

    <input type="checkbox" id="History">

    <label for="History">

        <span></span>

        <span class="check"></span>

        <span class="box"></span>

        History

    </label>

</div>

AJAX Code

<script>

    $(document).ready(function(){

        $.ajax({

            type:'post',

            url:'/categories',

            contentType:'application/json',

            data: '{"_token":"<?php echo csrf_token() ?>"}',

            success:function(data) {

                for(i=0; i<=data.category_name.length;i ++)

                {

                    var checkbox = document.createElement('input');

                    checkbox.type="checkbox";

                    checkbox.value=data.category_name.category_id;

                    checkbox.id=data.category_name[i].category_name;

                    var label= document.createElement('label');

                    label.htmlFor=data.category_name[i].category_name;

                    var span=document.createElement('span');

                    label.appendChild(span);

                    var span1=document.createElement('span');

                    span1.className="check";

                    label.appendChild(span1);

                    var span2=document.createElement('span');

                    span2.className="box";

                    label.appendChild(span2);

                    label.appendChild(document.createTextNode(data.category_name[i].category_name));

                    var div= document.getElementById('check-awesome');

                    div.appendChild(label);

                    div.appendChild(checkbox);

                }

                return div;

            }

        });

    });

</script>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

I've figured out the mess actually I got messed up in the order of append actually these checkboxes are bit different and need to be append just after creation therefore the code should be like this. Thank you everyone for help! :)

<script>
   $(document).ready(function(){
     $.ajax({
       type:'post',
       url:'/categories',
       contentType:'application/json',
       data: '{"_token":"<?php echo csrf_token() ?>"}',
       success:function(data) {
         for(i=0; i<=data.category_name.length;i ++)
           { 
             var div= document.createElement('div');
             div.id="check-awesome";
             div.className="form-group checkbox"
             var checkbox = document.createElement('input');
             checkbox.type="checkbox";
             checkbox.value=data.category_name.category_id;
             checkbox.id=data.category_name[i].category_name;
             div.appendChild(checkbox);
             var label= document.createElement('label');
             label.htmlFor=data.category_name[i].category_name;
             var span=document.createElement('span');
             label.appendChild(span);
             var span1=document.createElement('span');
             span1.className="check";
             label.appendChild(span1);
             var span2=document.createElement('span');
             span2.className="box";
             label.appendChild(span2);
             label.appendChild(document.createTextNode(data.category_name[i].category_name));
             div.appendChild(label);
             var get_div=document.getElementById('checkboxparent');
             get_div.appendChild(div);
           }
         return get_div;
       }
     });
   });
</script>

How to create dynamic checkboxes based on values in a database, using AJAX?

Sign up