Delivering content based on selects

I am slightly confused because I am not sure if I need models for this as I am not posting anything to a database. I have a simple index page

Route::get('/', 'IndexController@index');

Nothing special here. But on this index page I have four panels which take the following form

<a href="#" data-toggle="modal" data-target="#reportOneModal">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Report One</h3>
        </div>
        <div class="panel-body"><img src="/images/image1.png"></div>
    </div>
</a>

When one of the panels is clicked, it brings up a modal with some select inputs. This is to filter out the report I need to display. Each panel has different options for the select inputs.

What I essentially need to do is post the selected inputs to my controller so I can figure out which image to display. A modal looks like this

<div class="modal fade" id="reportOneModal" role="dialog" aria-labelledby="reportOneModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                {!! Form::open(array('route' => array('report'))) !!}
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                {!! Form::label('productType', 'Report Type', array('class' => 'col-sm-5 control-label blue')) !!}
                                <div class="col-sm-7">
                                    <select class="selectpicker" name="reportType" id="reportType">
                                        <option value=""></option>
                                        <option value="Value">Value</option>
                                        <option value="Value">Salary</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="yearRow">
                        <div class="col-md-12">
                            <div class="form-group">
                                {!! Form::label('reportYear', 'Year', array('class' => 'col-sm-5 control-label blue')) !!}
                                <div class="col-sm-7">
                                    <select class="selectpicker" name="reportYear" id="reportYear">
                                        <option value=""></option>
                                        <option value="2016">2015</option>
                                        <option value="2016">2016</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    {!! Form::submit('View Report', ['class' => 'btn btn-primary loadBtn']) !!}
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>

So you can see that the form for the modal is posting to report, I will call a different function for each panel. This route looks like this

Route::post('report', array('as' => 'report', 'uses' => 'IndexController@getReport'));

And the controller function is as follows

public function getReport()
{
    $reportType =  Input::get('reportType');
    $reportYear =  Input::get('reportYear');

    $filePath = 'report-images/' . $reportType . '/' . $reportYear . '/';
    $image = $reportType . '_' . $reportYear;
    $fullPath = $filePath . $image . '.png';

    if(!empty($fullPath)) {
        return view('report.report', compact('fullPath'));
    }
}

The problem I am having refers to one report I am trying to display. I can display the image fine, but there are many different variants to this image. So on this reports view I have added

<select class="selectpicker" name="bmId" id="bmId">
    <option value="variant1">variant1</option>
    <option value="variant2">variant2</option>
    <option value="variant3">variant3</option>
</select>

When one of these variants are selected, I need to somehow recall the route report.getReport2. I presume I could do this with ajax, at the moment I am trying

$("#bmId").change(function() {
    $.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
    }});
});

The problem is, I do not want to call a url, I want to call the route and pass it this new variant value.

How would I go about doing something like this?

Thanks

via Chebli Mohamed