{Forms] Getting one form element value and passing it to the next form element

If this subcategory form is on the same page as the category form, you're going to need to use some kind of client-side DOM manipulation e.g. Javascript / jquery etc.

If this is on a separate page, you could create your resource (Gallery) but have the subcategory nullable (blank). The next page would then use the created resource and pull in the reference to the category. If doing you are worried about a partially created gallery from showing to other users, you could add a published_at field, and not publish until the final form has been submitted.

Edit: If you need any help with jQuery, many here (including myself) would likely be willing to lend a hand.

@taijuten - Thanks, a bit more info would probably help.

I have done a complete mock of the form to show what I am doing. Note the comments I made to show what I want to do.

And here is an image for additional help

Imgur

So essentially then it currently returns all sub categories, what I want to do is for the user to select the category and then it will pass that category_id to the next form-group for the sub categories and only display the sub categories for the selected category.

The sub_category table has a gallery_categories_id which i can use to match with the selected gallery.

Hope that makes more sense.

            {!! Form::open(['url' => '/admin/gallery_images/store', 'files' => true]) !!}
            {!! Form::hidden('invisible', $temp_image) !!}

            <div class="col-md-12 text-center image-space">
                <img src="/images/gallery/Temp/{!! $temp_image !!}" alt="" class="img-responsive img-thumbnail">
            </div>

            <div>
                <h3><b>Step 2</b> - Select where to place this image</h3>
                <hr>
            </div>

            {{-- Choose a category from the radios provided, this is where I need to get the $category->id and 
                 pass it to the next element for the sub category selection --}}

            <div class="form-group">
                <p><b>Choose a category:</b></p>

                @foreach (App\Http\Models\GalleryCategories::all() as $category)
                
                    {!! Form::label('category_id', $category->name) !!}
                    {!! Form::radio('category_id', $category->id, null, ['class' => 'form-field']) !!}

                @endforeach
            </div>

            {{-- Using the category id passed to this form-group I can then access only the sub categories
                 that have a gallery_categories_id = category --}}

            <div class="form-group">
                <p><b>Choose a sub category:</b></p>

                @foreach (App\Http\Models\GallerySubCategories::all() as $sub_category)
                
                    {!! Form::label('sub_category_id', $sub_category->name) !!}
                    {!! Form::radio('sub_category_id', $sub_category->id, null, ['class' => 'form-field']) !!}

                @endforeach
            </div>

            <div>
                <h3><b>Step 3</b> - Image information</h3>
                <hr>
            </div>

            <div class="form-group">
                {!! Form::label('image_title', 'Title of this image:') !!}
                {!! Form::text('image_name', null, ['class' => 'form-control']) !!}
            </div>

            <div class="form-group">
                {!! Form::label('image_description', 'Description for this image:') !!}
                {!! Form::textarea('image_description', null, ['class' => 'form-control']) !!}
            </div>

            <div class="form-group">
                {!! Form::label('image_tags', 'Enter tags, separate each with a comma:') !!}
                {!! Form::text('image_tags', null, ['class' => 'form-control']) !!}
            </div>

            {!! Form::submit('Upload to gallery', ['class' => 'btn btn-primary pull-right']) !!}

            {!! Form::close() !!}

        @endif
    </div>

If you have jQuery, I'd do something similar to this:

In the html for each subcategory, add an attribute of data-category, and put the category that subcategory belongs to within that attribute.

e.g.

<input type="radio" name="subcategory" value="Hitler" data-category="people">

You can do this with form builder as well, I believe.

Then, assuming your category inputs have the name="category", jQuery along these lines would achieve what you wanted.

$(document).ready(function() {
    $('input[name="category"]').change(function() {
        cat = $(this).val();
        $('input[name="subcategory"]').hide();
        $('input[data-category="'+cat+'"]').show();
    });
});

This is very simplistic, and may need tweaking to be more optimised if you have an extreme amount of categories / subcategories.

Also, this is only "hiding" the irrelevant subcategories, so you'll still need to validate on the back end that the selected subcategory is valid for the category.