creating new div through javascript

Question

In the form have a one div tag in which some fields have,now i can create more fields from this one div tag,from the plus symbol with javascript and i can remove also div fields through minus symbol... in the main or first DIV tag all categories are displayed but when i create another DIV through plus symbol so all categories are not display.. please anyone tell me how i can solve this problem...

js code

<script src="{{ asset('js/jquery.min.js') }}"></script>
    <script type="text/javascript">
       $(document).ready(function(){
        var addButton = $('#addButton');
        var wrapper = $('#wrapper');
        var x = "{{$detail_count + 1}}";
            $(addButton).click(function(){
                x++;
                $(wrapper).append(
                    '<div class="form-group row">'+
                        '<label class="col-sm-1 col-form-label" style="text-align-last: right;">Category : </label>'+
                            '<div class="col-sm-2">'+
                                 '<select class="form-control" name="cat_id" id="category '+x+'">'+
                                    '<option value="" disabled selected>Select Category</option>'+
                                     'foreach($category as $key){'+
                                        '<option value="{{ $key->id }}">{{ $key->cat_nm }}</option>'+
                                   ' }' +

                              '</select>'+
                            '</div>'+

                        '<label class="col-sm-1 col-form-label" style="text-align-last: right;">SubCategory : </label>'+
                        '<div class="col-sm-2">'+
                            '<select class="form-control" id="subcategory '+x+'" name="sub_cat_id">'+
                                '<option value="" disabled selected>Subcategory from category</option>'+
                            '</select>'+
                        '</div>'+

                        '<label class="col-sm-1 col-form-label" style="text-align-last: right;">Product Price:</label>'+
                            '<div class="col-sm-2">'+
                               '<select class="form-control" id="productprice '+x+'" name="pro_price">  '+
                               '<option>Price from subcategory</option>'+
                               '</select>'+
                            '</div>'+
                        '<label class="col-sm-1 col-form-label" style="text-align-last: right;">Total : </label>'+
                        '<div class="col-sm-1">'+
                            '<input type="text" class="form-control" name="total[]" cat_id="total '+x+'">'+
                        '</div>'+
                        '<div class="col-sm-1">'+
                            '<a href="javascript:void(0)" id="remove" class="btn btn-danger btn-fill" title="Delete"><i class="fa fa-minus"></i></a>'+
                        '</div>'+
                    '</div>'
                );
            });

            $(wrapper).on('click','#remove',function(){
                if(confirm("Do you want to delete this row?")){
                    $(this).parent().parent().remove();
                }
            });
       });
    </script>

HTML Code

 <div class="col-md-12 field-wrapper" id="wrapper">
                                              <div class="form-group row">
                                                <label class="col-sm-1 col-form-label" style="text-align-last: right;">Category : </label>
                                                    <div class="col-sm-2">
                                                         <select class="form-control" name="cat_id" id="category">
                                                            <option value="" disabled selected>Select Category</option>
                                                             @foreach($category as $key)
                                                                <option value="{{ $key->id }}">{{ $key->cat_nm }}</option>
                                                            @endforeach
                                                      </select>
                                                    </div>

                                                <label class="col-sm-1 col-form-label" style="text-align-last: right;">SubCategory : </label>
                                                <div class="col-sm-2">
                                                    <select class="form-control" id="subcategory" name="sub_cat_id">
                                                        <option value="" disabled selected>Subcategory from category</option>
                                                    </select>
                                                </div>

                                                <label class="col-sm-1 col-form-label" style="text-align-last: right;">Product Price:</label>
                                                    <div class="col-sm-2">
                                                       <select class="form-control" id="productprice" name="pro_price">  
                                                       <option>Price from subcategory</option>                                                  
                                                       </select>
                                                    </div>
                                                <label class="col-sm-1 col-form-label" style="text-align-last: right;">Total : </label>
                                                <div class="col-sm-1">
                                                    <input type="text" class="form-control" name="total[]">
                                                </div>
                                                <div class="col-sm-1">
                                                    <a href="javascript:void(0)" id="addButton" class="btn btn-primary btn-fill" title="Add Row"><i class="fa fa-plus"></i></a>
                                                </div>
                                            </div>
                                        </div>

First DIV

Another DIVs

Swati · Accepted Answer · 2020-04-05 12:16:51Z

1

This is is happening because your foreach loop is inside your append() and it is not appending the all option only last value is getting appended that you can see in your output.Now, to solve this put this foreach loop outside your append something like this (I don't know much about laravel so there may be syntax error ) :

var select=""
foreach($category as $key){ 
//appending option in select variable
select+='<option value="{{ $key->id }}">{{ $key->cat_nm }}</option>'; 
}

Then passed this value i.e: select in append something like below :

$(wrapper).append(
    '<div class="form-group row">' +
    '<label class="col-sm-1 col-form-label" style="text-align-last: right;">Category : </label>' +
    '<div class="col-sm-2">' +
    '<select class="form-control" name="cat_id" id="category ' + x + '">' +
    '<option value="" disabled selected>Select Category</option>' +
    select + //<--pass here 
'</select>' + '</div>');

answered Apr 5, 2020 at 12:16

Swati

28.5k4 gold badges26 silver badges45 bronze badges

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

7 Comments

Ayana Memon Over a year ago

i am trying as u say me..it is ohkk :) :)

Ayana Memon Over a year ago

as u say me ..for loop is working now how i can add in the append this for loop @Swati ??

Swati Over a year ago

You don't need to append for loop only appends the select variable inside your append code as shown in above .

Swati Over a year ago

what does work ? did you got any error ? check your browser console is there any error?

Swati Over a year ago

does select have required value or not.. alert(select); and check what does it gives.

|

Collectives™ on Stack Overflow

creating new div through javascript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related