Using JS to pass a value from one form element to another?

[Holoc]

Hi,

 

I have this issue where I have created a form (using Laravel), it looks like this in part:

				{{-- 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 (AppHttpModelsGalleryCategories::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 (AppHttpModelsGallerySubCategories::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>

The way I have the database setup is that a category has many sub categories. So first it will display a list of categories, something like:

 

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

 

Then the form will display the sub categories like this:

 

subcat1 ( ) subcat2 ( ) subcat3 ( )

 

But what I want to do is that when someone selects a category I want to capture that $category->id and then pass it immediately to the next form element that will then display the sub categories that relate to that category.

 

Easy enough if I was to break it all down and submit a couple of forms to pass the data back and forth however I wanted to be able to achieve this without the form being submitted.

 

It has been suggested that JS would be the best way to acomplish this, I am not sure. What do you think?

 

Thanks

[justsomeguy]

Javascript is how you would do that. I have no experience with Laravel so I can't tell you if there's any way to automate that process. The 2 common ways to do that would be to either send an ajax request with the selected parent and get a list of the subcategories to populate the other box, or just have the page print out a Javascript data structure containing all of the categories and their subcategories. When you select a parent it could run a function to find that parent in the data structure and populate the other dropdown with the subcategories. The second method wouldn't require an ajax request, but it would make the page larger to list all of the categories in a Javascript array or object.

[Holoc]

Thanks, will look into that. What I require is actually a lot simpler than what you are suggesting however. The data required has already been passed to the form from the controller, so all I actually need is the category_id to be passed to the next element in the form, once it's there the loop will pull all the required sub categories in.