play framework - submission of a form and displayi

Question

I have the following UI:

<form class="form-horizontal" role="form">
            <div class="form-group">
                <label class="col-sm-1 control-label"> <b><font size="4">Brand:</font></b>
                </label>
                <div class="col-sm-4">
                    <select class="form-control">
                        <option value="one">-</option>
                        <option value="two">BrandOne</option>
                        <option value="three">BrandTwo</option>
                        <option value="four">BrandThree</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-1 control-label"> <b><font size="4">Price:</font></b>
                </label>
                <div class="col-sm-4">
                    <select class="form-control">
                        <option value="one">-</option>
                        <option value="two">1000 - 10000</option>
                        <option value="three">10000 - 50000</option>
                        <option value="four">50000 - 100000</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-1 control-label"> <b><font size="4">Miles:</font></b>
                </label>
                <div class="col-sm-4">
                    <select class="form-control">
                        <option value="one">-</option>
                        <option value="two">0 - 1000</option>
                        <option value="three">1000 - 20000</option>
                        <option value="four">20000 - 100000</option>
                    </select>
                </div>
            </div>
        </form>
        <button type="button" id="searchBtn" class="btn btn-default">Search</button>

I want to do the following: After pressing the search-button, the choosen values of the three forms (Brand, Price, Miles) should be submitted. After some processing I want to return a List of Strings, iterating through the list and display the values in the result-list (see below).

I have two questions: 1. How can I submit the three choosen values? 2. How can I return the List, iterate through it and store the strings in the result-list?

<div class="well">
 <ul class="list-group" id="resultList">
  <!-- result should be here -->
 </ul>
</div>

Thanks for any help!

Answer 1

All you POST params received can be obtained in the controller in this way:

Map<String,String[]> params = request().body().asFormUrlEncoded();

To debug what you actually receive I use such action:

public static Result outputPostParams(){
    Map<String,String[]> params = request().body().asFormUrlEncoded();
    StringBuilder sb = new StringBuilder();
    for(String s: params.keySet()){
        sb.append(s).append("\n");
        for(String subs:params.get(s)){
            sb.append("- ").append(subs).append("\n");
        }
    }
    return ok(sb.toString());
}

In order to make it work don't forget to define a route in routes file:

POST /brands controllers.Application.outputPostParams()

And to add the route to form action:

<form method="POST" action="@routes.Application.outputPostParams()" class="form-horizontal" role="form">