rendering and binding form with checkbox data

Question

How can we create checkboxes and bind them with our form in play2.0 using scala.

If I have

    val placeForm = Form(
    mapping(
        "id" -> ignored(NotAssigned: Pk[Long]),
        "url_key" -> nonEmptyText,
        "title" -> optional(text),
        "page_id" -> optional(longNumber)
    )(models.Place.apply)(models.Place.unapply)
)

and I have created form like this.

    @form(routes.Page.save) {

    @form(routes.Page.save) {

    <fieldset>

    @inputText(pageForm("title"), '_label -> "Title")
    @inputText(pageForm("template"), '_label -> "Template") <label>Options:</label>
    <div class="input">
        <label>note <input type="checkbox" name="options[]" value="0">
        </label> <label>About US <input type="checkbox" name="options[]"
        value="0">
        </label> <label>Facebook <input type="checkbox" name="options[]"
        value="0">
        </label> <label>Twitter <input type="checkbox" name="options[]"
        value="0">
        </label> <label>Hotmail <input type="checkbox" name="options[]"
        value="0">
        </label> <label>Something <input type="checkbox" name="options[]"
        value="0">
        </label>
    </div>


    </fieldset>

Now I want dont want simple html to create these checkboxes and bind these checkbox values into form
Can anyone help me with this

Answer 1

The structure of your val placeForm must match the form that you render in your template.

For example :

val placeForm = Form(
    mapping(
        "id" -> ignored(NotAssigned: Pk[Long]),
        "title" -> optional(text),
        "template" -> optional(text),
        "checkbox1" -> text
        "checkbox2" -> text
    ) // ... here construction and deconstruction functions
)

Your template can lookes like :

@form(routes.Page.save) {

    <fieldset>

    @inputText(pageForm("title"), '_label -> "Title")
    @inputText(pageForm("template"), '_label -> "Template") 

<label>Options:</label>

<div class="input">
        <label> 1 <input type="checkbox" name="checkbox1" value="1"> </label>
        <label> 2 <input type="checkbox" name="checkbox2" value="2"> </label>
    </div>

    </fieldset>
}

Now it's important to understand for wich purposes are these checkboxes. If you want to bind there values to your case class Place and your form structure match completely your case class, you can use apply and unaplly method, if no ... you must utilise your custom functions...

((title, template, checkbox1, checkbox2)=> Place(title, template, checkbox1, checkbox2))  //construct function

((place : Place) => Some((place.title, place.template, place.property_that_correspond_to_checkbox1_value,place.property_that_correspond_to_checkbox2_value)) // deconstruct function

Or you can use tuple instead of mapping for a form construction and then get your values simply as tuple values