MVC form values post to route

Question

I'm not sure if what I am try to do is possible but here goes.

I have a form with two drop down lists - category and subcategory. When a category is selected an AJAX call is made to get the list of subcategories. For demo purpose I've selected a category of 'Fruit' which shows all of the subcategories for this group.

<select id="category" name="category">
    <option value="Fruit">Fruit</option>
    <option value="Vegetables">Vegetables</option
    <option value="Dairy">Dairy</option>
</select>

<!--AJAX call is made to get sub categories depending on what is selected in category-->
<select id="subcategory" name="subcategory">
    <option value="Apples">Apples</option>      
    <option value="Pears">Pears</option>
    <option value="Bananas">Bananas</option>
</select>

Now if I selected Fruit and then Apples and submitted this form, I'd like it to post to a particular controller /{category}/{subcategory} e.g. /Fruit/Apples and this is dynamic depending on what is selected from the drop downs. So if I selected Fruit and then Pears it would post to /Fruit/Pears

Is this possible and if so how do I do this?

Thanks in advance.

Answer 1

You could modify the form action you are posting to when the user chooses a subcategory:

$(function() {
    $('#subcategory').change(function() {
        $('#someForm').attr(
            'action', 
            '/' + $('#category').val() + '/' + $(this).val()
        );
    });
});