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>

did you try my answer?

Farid Imranov
– Farid Imranov

2016-11-08 10:10:01 +00:00
Commented Nov 8, 2016 at 10:10 — Farid Imranov
– Farid Imranov, Commented Nov 8, 2016 at 10:10

Mr. Pyramid · Accepted Answer · 2016-11-08 08:53:56Z

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>

Tri · Accepted Answer · 2016-11-08 08:02:32Z

0

I think you make a mistake in for loop. Use operation '<' instead of '<=' if you process with an array.

Remember index of array start from 0 not 1

answered Nov 8, 2016 at 8:02

Tri

16112 bronze badges

Comments

Farid Imranov · Accepted Answer · 2016-11-08 08:21:30Z

You created div check-awesom in the loop. But you must declare it out of the loop. I used callback variable in function, so when your request success then function will call the function parameter with created div in his parameter

   $(document).ready(function () {
            function createChecboxes(requestEndCallback) {
                $.ajax({
                    type: 'post',
                    url: '/categories',
                    contentType: 'application/json',
                    data: '{"_token":"<?php echo csrf_token() ?>"}',
                    async: true, // do this for synchronous call to ajax 
                    success: function (data) {
                        var div = document.getElementById('check-awesome');
                        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));

                            div.appendChild(label);
                            div.appendChild(checkbox);
                        }
                        requestEndCallback(div)
                    }
                });
                return mydiv;
            }

            // call your function like this
            createChecboxes(function (createdDiv) {
                // use createdDiv in here
            })
        });

ps. As @Tri says, you also wrote <= instead of < in the for condition.

waiting for an ajax post is a bad idea... Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check xhr.spec.whatwg.org.

Kushal Jain · Accepted Answer · 2016-11-08 08:24:59Z

You can add checkbox like this.

var place = document.getElementById('check-awesome');
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.createElement('div');
   div.appendChild(label);
   div.appendChild(checkbox);
   place.appendChild(div);
}

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related