#{extends '../../main.html'/}#
#{set title:'Html Reference'/}#
#{set tab:'management'/}#

#{renderTagArgs '../docHome.html'/}#

<h1 id="html">Checkbox</h1>

<p>Checkboxes are a little strange in html.  Before we show you the webpieces example, let's go over 
html and what the browser will send to the webserver.  Here is the code for a standard text input, 
a checked checkbox, and an unchecked checkbox in html:</p>

<pre>
<code>*[  First Name: <input type="text" name="firstName" value=""/>

  Is Webpieces Cool: <input type="checkbox" name="webpiecesCool" value="true" checked>

  Need More: <input type="checkbox" name="needMore" value="someValue2"/>]*</code>
</pre>

<p>If the user posts the above, the browser will send only firstName=&isWebpiecesCool=someValue1 to the
webserver.  Your POST controller method may take a parameter of</p>

<ol>
  <li>boolean isWebpiecesCool OR</li>
  <li>Boolean isWebpiecesCool OR</li>
  <li>String isWebpiecesCool</li>
</ol>

<p>If it is a boolean, then the isWebpiecesCool parameter will only be set to true if the value from
your input checkbox element has value="true".  If the isWebpiecesCool parameter is a String, webpieces
will pass through the string value of the checkbox setting the parameter to the String value</p>

<p>Of course, for whether a checkbox is checked or not, we store it in flash and a special field on the
*[#{field}#]* tag *[#{field.checked}#]* will lookup the value in flash and if it doesn't exist will 
fallback to the original value of the entity</p>

#{form action:@[POST_CHECKBOX]@, class:'form-horizontal'}#

  #{field 'fun', label: 'Is Fun:'}#
    <input type="checkbox" name="${field.name}$" value="true" ${field.checked}$>
  #{/field}#
  
  <input type="submit" name="submit" value="&{'Save', 'link.save'}&" class="btn btn-primary" />

#{/form}#

<p>The webpieces html code above is:</p>

<pre>
<code>*[#{form action:@[POST_CHECKBOX]@, class:'form-horizontal'}#

  #{field 'fun', label: 'Is Fun:'}#
    <input type="checkbox" name="${field.name}$" value="true" ${field.checked}$>
  #{/field}#
  
  <input type="submit" name="submit" value="&{'Save', 'link.save'}&" class="btn btn-primary" />

#{/form}#]*</code>
</pre>

<p>The webpieces routes for the above is:</p>

<pre>
<code>*[scopedBldr.addRoute(BOTH, HttpMethod.GET , "/examples/checkbox", "ExamplesController.checkbox", ExampleRouteId.CHECKBOX);
scopedBldr.addRoute(BOTH, HttpMethod.POST, "/examples/postCheckbox", "ExamplesController.postCheckbox", ExampleRouteId.POST_CHECKBOX);
scopedBldr.addRoute(BOTH, HttpMethod.GET , "/examples/checkboxResult", "ExamplesController.checkboxResult", ExampleRouteId.CHECKBOX_RESULT);]*</code>
</pre>

<p>The Controller GET and POST methods for this page is:</p>

<pre>
<code>*[	public Render checkbox() {
		return Actions.renderThis(
				"menu", menuCreator.getMenu(),
				"fun", true,
				"another", "checked");
	}
	
	public Redirect postCheckbox(String fun) {
		//We could put the firstName in the url such as /examples/inputResult/{firstName} 
		//or we could save to database
		//or we can put it in flash and for this example, we put it in flash
		Current.flash().put("isFun", fun);
		Current.flash().keep();
		return Actions.redirect(ExampleRouteId.CHECKBOX_RESULT);
	}]*</code>
</pre>