Forms

Alpaca lets you wrap a standard HTML form binding around your rendered fields to support both direct HTML submits
and Ajax, behind-the-scenes submits. You can pass form configuration into the Alpaca engine to control the POST
itself and also to bind buttons to the screen for the user to submit the form.

If you're interested in multi-step forms, take a look at the section on wizards which
describes how you can split fields across multiple pages in a form. You can then capture the data at the end
and submit it to your HTTP handler.

Simple Example

Here is a simple registration form that adds a submit button. We handle the click to just show the generated JSON.

{% raw %} {% endraw %}

POSTing to an echo handler

Here is an example where we post to an echo handler. Nothing too crazy. The POST happens in the browser and so the
browser is redirected to the POST handler's page.

{% raw %} {% endraw %}

AJAX POST

And here is another example where we do a background AJAX POST. This lets us stay on the same page while submitting
the POST data in the background. To do this, we register a manual click handler and programmatically fire off the
submit. Note that the ajaxSubmit method hands back a jQuery promise. We can use that to conditionally
make decisions on what to do next if we want to.

{% raw %} {% endraw %}

Form with Buttons

Here is an example of a form with a submit and reset button.

{% raw %} {% endraw %}

Forms with Custom Buttons

Here is a form that includes custom buttons. We declare one button inline within the config (to validate and view the
form's JSON). And we declare the other button as a "noop" (engineering term for no-operation). It's a button that
does nothing. However, in the postRender callback, we look it up and register a click handler.

In addition, for the "noop" button, we use the styles attribute to lay down some additional CSS classes
to specify exact styling of the button. If not specified, this will take on the value of the view's default style
for buttons (view.styles.buttons).

For giggles, we shimmy up the submit button and give it a DOM ID of mySubmit. We also
plug in a custom DOM attribute called data-test with value 123.

{% raw %} {% endraw %}

Form with Auto Focus on Invalid Field

Here is a form that takes focus back to an invalid field when submitted. Click on submit to have the form auto-focus
on the invalid age field.

{% raw %}
{% endraw %}

Form with Add Item button

This form offers an Add Item button that lets you add a new field dynamically.

{% raw %} {% endraw %}