Play Framework - multiple instances of a form

Question

I have a game template similar to this:

@(projects: List[Project], projectForm: Form[Project]) @import helper._ @main("Create projects") { <div class="accordion"> @for(project <- projects) { <h3>@project.name</h3> <div> @form(routes.Application.updateProject(project.getId), 'class -> "ajaxForm") { @* I'm not even sure why I need to specify the FQN of Map here *@ @defining(projectForm.bind(scala.collection.mutable.Map( "name" -> project.name, "description" -> project.description))) { form => @inputText(form("name")) @textarea(form("description")) <input type="submit" value="Update"/> } } </div> } </div> @form(routes.Application.createProject()) { <fieldset> <legend>Create a new project</legend> @inputText(projectForm("name")) @textarea(projectForm("description")) <input value="create" type="submit"/> </fieldset> } } 

Project is a model containing a long id and a String name and description .

My problem here is that here

 @inputText(form("name"), 'value -> project.name) @textarea(form("description")) 

The identifiers name and description respectively, always appear in inputText and textarea, respectively. I have a lot of them, so these identifiers are no longer unique. This still works on chrome, but I understand that identifiers must be unique in the document. Is there any built-in way in Play to solve this problem, or will I have to come up with my own solution? If this is the last, do you have any suggestions on how to approach this? Or am I doing something fundamentally wrong?

Answer 1

You can use the index of the project list and add it to id :

 @for((project, index) <- projects.zipWithIndex) { <h3>@project.name</h3> <div> @form(routes.Application.updateProject(project.getId), 'class -> "ajaxForm") { @defining(projectForm.bind(scala.collection.mutable.Map( "name" -> project.name, "description" -> project.description))) { form => @inputText(form("name"), 'id -> ("name" + index)) @textarea(form("description"), 'id -> ("description" + index)) <input type="submit" value="Update"/> } } </div> }