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.
Here is a simple registration form that adds a submit button. We handle the click to just show the generated JSON.
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.
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.
Here is an example of a form with a submit and reset button.
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
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
This form offers an Add Item button that lets you add a new field dynamically.