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 %}