Laravel 7 -> dynamic "add fields" form -> foreach() -> null given

This my first post here, but by no mean my first time visiting. I'm a 100% self-taught amateur coder and I'm working on something that has stumped me for passed day or two...

I'm building a site using Laravel 7. One of the pages includes a dynamic form that allows the user to add addition for fields as needed.

I'm am generating the dynamic form fields and a tinymce editor as well as submitting the form using javascript.

The issue I'm running into is this:

Upon clicking the 'Submit' button the page does not transition or show any signs of having been submitted. The first portion of the form data is successfully submitted and added to the appropriate database table but the dynamic fields are not added to their table and an error is thrown in the browser console.

The believe the relevant issue is message "foreach() argument must be of type array|object, string given" as this seems to be where the code stops running and things go wrong.

This function applies to the dynamic image_id[] portion of the form.

The full error info is:

XHR POST https://www.mydomainname.com/create
[HTTP/1.1 500 Internal Server Error 479ms]

Request:
format  "galleries"
title   "This+is+the+title+of+the+content"
short   "This+is+the+short+description+for+the+content."
thumb   "https://www.mydomainname.com/storage/giraffe1.jpg"
category    "funny"
image_id    […]
0   "Image+1"
1   "Image+2"
2   "Image+3"

Response:
message "foreach() argument must be of type array|object, string given"
exception   "ErrorException"
file    "/home/user/site/app/Http/Controllers/ContentController.php"
line    149
trace   [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

This is my blade view, including the javascript:

@extends('layouts.app')
@section('title', 'Post New Content')
@section('content')

    <script src="https://cdn.tiny.cloud/1/arx09ivbx1ikchqgcvc6558h9sx2crokpd2c1152g667mh0c/tinymce/6/tinymce.min.js"></script>
    <script src="/vendor/laravel-filemanager/js/stand-alone-button.js"></script>
    <div class="container">
        <div class="row">
            <div class="col-md-8">

                @if (session('status'))
                    <div class="alert alert-success" role="alert">
                        
                    </div>
                @endif
                    <div class="alert alert-danger print-error-msg" style="display:none">
                        <ul></ul>
                    </div>
                    <div class="alert alert-success print-success-msg" style="display:none">
                        <ul></ul>
                    </div>

                <div class="card shadow">
                    <h2 class="card-header">
                        Post a New Gallery
                        <a class="btn btn-danger" style="float: right" href="" onclick="return confirm('Are you sure? All progress will be lost!')">Go Back</a>
                    </h2>
                    <div class="card-body">
                        <form name="add_name" id="add_name">
                            <input type="hidden" name="format" value="galleries" class="form-control" required>
                            <div class="form-group row mb-0">
                                <div class="col-md-12">
                                    <strong>Title:</strong>
                                    <input type="text" name="title" class="form-control" required>
                                </div>
                            </div>
                            <div class="form-group row mb-0">
                                <div class="col-md-12">
                                    <strong>Description:</strong>
                                    <input type="text" name="short" class="form-control" required>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-6">
                                        <strong>Thumbnail:</strong>
                                        <div class="input-group">
                                            <div class="col-md-10">
                                                <input type="text" id="thumb" class="form-control" name="thumb" aria-label="thumb" aria-describedby="button-image" required>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="input-group-append">
                                                    <button class="btn btn-primary" type="button" id="button-image">Browse</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Category: </strong>
                                        <select name="category" class="form-control" required>
                                            <option value="" disabled selected>Select content category...</option>
                                            @foreach($allCategories as $category)
                                                <option value=""></option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <br>

            <!-- Dynamic Fields -->                
            <div class="table-responsive">
                <table class="table table-bordered" id="dynamic_field">
                    <tr>
                        <td><input type="text" name="image_id[]" class="form-control name_list" /></td>
                        <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
                    </tr>
                </table>
                <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
            </div>
            <!-- End Dynamic Fields -->

        </form>
    </div>
</div>


                </div>
            </div>

<script type="text/javascript">

    $(document).ready(function(){
        var postURL = "<?php echo url('create'); ?>";
        var i=1;

        $('#add').click(function(){
            i++;
            $('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added">' +
                '<td><input type="text" name="image_id[]" class="form-control name_list" /></td>' +
                '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td>' +
                '</tr>');
        });

        $(document).on('click', '.btn_remove', function(){
            var button_id = $(this).attr("id");
            $('#row'+button_id+'').remove();
        });

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#submit').click(function(){
            $.ajax({
                url:postURL,
                method:"POST",
                data:$('#add_name').serialize(),
                type:'json',
                success:function(data)
                {
                    if(data.error){
                        printErrorMsg(data.error);
                    }else{
                        i=1;
                        $('.dynamic-added').remove();
                        $('#add_name')[0].reset();
                        $(".print-success-msg").find("ul").html('');
                        $(".print-success-msg").css('display','block');
                        $(".print-error-msg").css('display','none');
                        $(".print-success-msg").find("ul").append('<li>Record Inserted Successfully.</li>');
                    }
                }
            });
        });

        function printErrorMsg (msg) {
            $(".print-error-msg").find("ul").html('');
            $(".print-error-msg").css('display','block');
            $(".print-success-msg").css('display','none');
            $.each( msg, function( key, value ) {
                $(".print-error-msg").find("ul").append('<li>'+value+'</li>');
            });
        }
    });

</script>

            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    document.getElementById('button-image').addEventListener('click', (event) => {
                        event.preventDefault();
                        window.open('/file-manager/fm-button', 'fm', 'width=1400,height=800');
                    });
                });

                // set file link
                function fmSetLink($url) {
                    document.getElementById('thumb').value = $url;
                }
            </script>

    @endsection

And here is my controller:

public function createPost(Request $request)
    {


        $post = new Content();
        $post->title = $request->get('title');
        $post->short = $request->get('short');
        $post->long = $request->get('long');
        $post->thumb = $request->get('thumb');
        $post->format = $request->get('format');
        $post->category = $request->get('category');
        $post->author = Auth::user()->id;
        $post->save();

        $order = 0;

        foreach($request->input('image_id[]') as $key => $content) {

                $contentImg = new ContentImages();
                $contentImg->content_id = $post->id;
                $contentImg->image_id = $content->image_id;
                $contentImg->image_order = $order+1;
                $contentImg->save();
            }

            return response()->json(['success'=>'done']);
    }

And, finally, my routes:

Route::get("create","ContentController@create");
Route::post("create","ContentController@createPost");

Any guidence here would be GREATLY appreciated, as well as any recommendations on better ways to handle this scenario.

I'm a marginally talented amateur with this stuff but nowhere near expert and I'm always looking to learn.

Much thanks in advance!!

SMR

source https://stackoverflow.com/questions/73681561/laravel-7-dynamic-add-fields-form-foreach-null-given