How to hide a text field in play framework

Question

How to hide a text field in play framework? For example how to hide this field:

@inputText(userProfileForm("name"), '_label -> "Name")

Answer 1

The inputText helper takes a varargs of (Symbol, Any), which represent the html attributes. If you are using html5 you can just add the hidden attribute:

@inputText(userProfileForm("name"), '_label -> "Name", 'hidden -> "hidden")

normally the hidden attribute has no value, but I couldn't find any information about how to do this with the helpers. In Chrome at least it works like this as well.

edit:

btw, you can also just use html instead of the helper:

<input attribute=value hidden />

Answer 2

This should work in all browsers:

@inputText(
    userProfileForm("name"),
    '_label -> "Name",
    'style -> "display: none"
)

Note that this only hides the field, not the label etc.

If you want to hide the label aswell, you can't do this with the default helpers. You can however specify the input field yourself:

<input type="hidden" name="name" value="@userProfileForm.data.get("name")" />

The name should be name of the field in your form (coincidentally name aswell in this case).
I haven't tested the value but it should work, maybe you'll need to strip the " around name.

If you do this, the hidden data will be sent, along with the other data in the form to the server.

Edit:
If the hidden value is empty, that means you didn't bind it to the form when calling the view. You can bind the name to the form like this in Java (I don't know Scala, but it's explained in the Play Scala documentation):

Map<String, String> data = new HashMap<>();
data.put("name","get the username here");

return ok(index.render(userProfileForm.bind(data));

Another option (which is cleaner in my opinion) is to simply pass the username as an argument to the view. The controller becomes:

return ok(index.render(userProfileForm, "username goes here"));

And in the view you can then simply do:

@(userProfileForm : Form[UserProfileForm])(name : String)

@helper.form(...){
    <input type="hidden" name="name" value="@name" />
    //...
}

Answer 3

I know that this is an old question, but i had a similar issue, i wanted to hide an inputText and still, handle it using the helpers. The best and cleanest way to do it is to write your own helper adding a custom value to tell when to hide the element itself. I came to a solution like this

my own field constructor

@(elements: helper.FieldElements)
@if(elements.args.contains('hideIt)){
    @elements.input
}else{
<div class="@if(elements.hasErrors) {error}">
    <div class="input">
        @elements.input
        <span class="errors">@elements.errors.mkString(", ")</span>
        <span class="help">@elements.infos.mkString(", ")</span> 
    </div>
</div>
}

that i used in the view file like this:

@inputText(form("fieldName"),
'hidden -> "true",
'hideIt -> true
)

now you are done :)

Answer 4

While it worked, I didn't like the hashmap version provided by @Aerus, preferring to use the statically typed forms when possible, so I came up with an alternative.

final UserProfileForm initial = new UserProfileForm("get the username here");
return ok(index.render(Form.form(UserProfileForm.class).fill(initial));

Then, in the profile, you can do as follows:

<input type="hidden" name="name" value="@userProfileForm("name").value" />