Forms form[up-target] selector

Forms with an up-target attribute are submitted via AJAX instead of triggering a full page reload.

<form method="post" action="/users" up-target=".main">
  ...
</form>

The server response is searched for the selector given in up-target. The selector content is then replaced in the current page.

The programmatic variant of this is the up.submit() function.

Failed submission

When the server was unable to save the form due to invalid data, it will usually re-render an updated copy of the form with validation messages.

For Unpoly to be able to detect a failed form submission,, the form must be re-rendered with a non-200 HTTP status code. We recommend to use either 400 (bad request) or 422 (unprocessable entity).

In Ruby on Rails, you can pass a :status option to render for this:

class UsersController < ApplicationController

  def create
    user_params = params[:user].permit(:email, :password)
    @user = User.new(user_params)
    if @user.save?
      sign_in @user
    else
      render 'form', status: :bad_request
    end
  end

end

Note that you can also use the up-validate attribute to perform server-side validations while the user is completing fields.

Redirects

Unpoly requires an additional response headers to detect redirects, which are otherwise undetectable for an AJAX client.

After the form's action performs a redirect, the next response should echo the new request's URL as a response header X-Up-Location.

If you are using Unpoly via the unpoly-rails gem, these headers are set automatically for every request.

Giving feedback while the form is processing

The <form> element will be assigned a CSS class up-active while the submission is loading.

You can also implement a spinner by listening to the up:proxy:slow and up:proxy:recover events.