1 year ago

Appended data not picked up in $request

Posted 1 year ago by Mike_SA


I am using laravel 5.8

I am working on a post create form where the user is able to add categories not listed. The new categories are then appended to the existing categories with the option checked.

When I submit the post, the request records the non appended categories but leaves out the checked new categories.


Post Categories

                        <div class="form-group" id="categories_list">
                            <label for="group" class="control-label col-md-3">Categories</label>

                        <!--    {!! Form::select('category_id[]',App\Category::orderBy('slug','asc')->pluck('name','id', 'slug'),null,['class' => 'form-control category_id', 'multiple'=>'multiple']) !!} -->

                            <ul class="categories">
                                @foreach($categories as $category)
                                        <div class="form-group">
                                            <label for="categories"
                                                   class="control-label">{{ $category->name }}</label>

                                            {{ Form::checkbox('category_id[]', $category->id, false, ['class' => 'my-class']) }}


                            <div class="form-group">
                                <label for="add_category" class="control-label">Add Categories</label>

                                <div class="new-category-input">
                                    {!! Form::text('add_category', null, ['class' => 'add_category form-control', 'id'=>'add_category_test']) !!}
                                <a href="#" id="add-new-btn-category" class="btn btn-primary">
                                    <i class="fas fa-dice-d20"></i> Create categories
                                </a><!-- look at mike-contact-manager for ajax  -->


            $("#add-new-btn-category").click(function () {
                var newGroup = $("#add_category");
                var inputGroup = newGroup.closest('.categories_list');
                const categorySelect = $(".categories");
                    url: "{{ route('categories.storetest') }}",
                    method: 'post',
                    data: {
                        name: $("#add_category_test").val(),
                        _token: $("input[name=_token]").val(),
                    success: function (category) {
                        // check if id is valid

                        var len = category.length;
                        if(len != 0) {
                            for (var i = 0; i < len; i++) {
                                var id = category[i].id;
                                var name = category[i].name;

                                categorySelect.append('<li><div class="form-group"><label for="categories" class="control-label">' + name + ' </label><input class="my-class" name="category_id[]" type="checkbox" value="' + id + '" checked></div></li>');

                            alert('Categories added successfully!');
                    error: function (xhr) {
                        var errors = xhr.responseJSON;
                        var error = errors.name[0];
                        if (error) {

                            // clear message if there is one

                            // Add new error message
                            newGroup.addClass('has-error').after('<p class="text-danger">' + error + '</p>');



The issue arises when I submit the post and return $request->all().

Hopefully someone can point me in the right direction. I dont work with javascript and ajax to often :)

The appending side and saving the categories to the category table is working perfectly, just not being returned in the Request with all the other pre saved categories.

Thanks in advance

Please sign in or create an account to participate in this conversation.