将表单值传递给下一个表单元素而不提交表单

Question

我在创建表单时遇到了这个问题（使用 Laravel），部分看起来像这样：

{{-- 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>

我设置数据库的方式是一个类别有许多子类别。所以首先它会显示一个类别列表，例如：

cat1 ( ) cat2 ( ) cat3 ( ) ...

然后表单会像这样显示子类别：

subcat1 ( ) subcat2 ( ) subcat3 ( )

但我想做的是，当有人选择一个类别时，我想捕获该 $category->id，然后立即将其传递给下一个表单元素，该元素将显示与该类别相关的子类别。

如果我要把它全部分解并提交几个表单来来回传递数据，这很容易，但是我希望能够在不提交表单的情况下实现这一点。

似乎 JS/Ajax 是实现这一目标的最佳方式，我不确定。你怎么看？我还没有这方面的经验，但我猜这可能是一个相当简单的过程。

谢谢

Answer 1

您可能想要的是使用 jQuery 并在包含类别的单选按钮上使用 .change() 事件。然后获取它的值并通过 AJAX 将类别 ID 发送到服务器，并通过 JSON 返回它们的子类别。使用此 JSON，您只需循环其内容，并构建包含新信息的新单选按钮。看起来很简单的任务，根本不需要为此提交表单。