CODEWITHSUNDEEP
javascalafieldplayframework-2.0hidden
virtualeyes
virtualeyes

Reputation: 11237

Play 2.0 generate hidden field without div wrapper

Am generating a hidden fields like so:

@helper.input(_form("userID"), '_label-> None) { (id, name, value, args) =>
  <input type="hidden" name="@name" id="@id" value="@value" @toHtmlArgs(args)>
}

Which works fine except for the fact that the div wrapper block element is created, which creates visual empty space in the form, not looking good -- how to make hidden input elements display without div wrapper?

I know I can jQuery hide the parent div wrapper, but I'd like to not generate it in the first place.

Upvotes: 4

Views: 3528

Answers (5)

Zeru Giran
Zeru Giran

Reputation: 61

Yo can add this to the view:

@inputHidden(field: Field) = {
    <input name="@(field.name)" type="hidden" value="@field.value">
}

Or you can create a new file called "app/views/helper/inputHidden.scala.html"

In both cases, it is used like this:

@inputHidden(myForm("userID"))

Upvotes: 0

Cristian Vrabie
Cristian Vrabie

Reputation: 4068

Using the raw html as previous answers suggest works well in some cases but don't forget that the hidden input might require validation (for example, if it's being populated with JavaScript in reply to some user interaction, like some date pickers do). If you have validation errors on that field the submission will fail but there won't be any visual queue as to why.

You can write extra html to show the error for the hidden field but I would actually stick with @helper.input and hide the input with css, if the error class is not present. You don't need javascript to do it.

Upvotes: 1

teemoo
teemoo

Reputation: 881

Although the question has already been answered, I'd like to give a complete example because this would have helped me alot.

You may define your own hidden input helper in a file called "app/views/helper/inputHidden.scala.html" that would look like:

@**
* Generate a hidden HTML input.
*
* Example:
* {{{
*   @inputHidden(field = myForm("name"), args = 'data-ref -> 0)
* }}}
*
* @param field The form field.
* @param args Set of extra attributes.
* @param handler The field constructor.
*@
@(field: play.api.data.Field, args: (Symbol,Any)*)(implicit handler: FieldConstructor, lang: play.api.i18n.Lang)

@id = @{ args.toMap.get('id).map(_.toString).getOrElse(field.id) }
@inputType = @{ args.toMap.get('type).map(_.toString).getOrElse("hidden") }
@htmlArgs = @{ args.filter(arg => !arg._1.name.startsWith("_") && arg._1 != 'id).toMap.filter(_._1 != 'type) }

<input type="@inputType" id="@id" name="@field.name" value="@field.value" @toHtmlArgs(htmlArgs)>

This allows you to reuse the code in all your views and to give additional parameters like data-ref="..." to your hidden field.

Upvotes: 4

Steven Luu
Steven Luu

Reputation: 1077

You don't need to use a @helper.input in this case. Try this:

@defining(_form("userID")) { uidField =>
  <input type="hidden" name="@uidField.name" id="@uidField.id" value="@uidField.value">
}

Upvotes: 14

virtualeyes
virtualeyes

Reputation: 11237

Ok, can do this as well:

<input type="hidden" name="foo" value="@{_form("foo").value.map(x=>x).getOrElse("")}">

Upvotes: 1

Related Questions