Loading page part by submit

Loading / replacing a page part as the result of submitting a form.

Submitting a form results in issuing a request to the server. When an inline target is given, the request is done using Ajax and the response is injected in the target element:

<h1>Lorem Ipsum</h1>
<div>
  <form action="/Samples/LoremIpsum" method="get" target="<DIV">
    <button type="submit">Submit</button>
  </form>
</div>

In this example, the target attribute uses a relative CSS selector to mark the closest parent DIV element as the inline target of the form submit requests.

When it comes to submitting forms, the target can be specified by different ways:

  • using a formtarget attribute on the submit button
  • using a target attribute or target class on any element parent of the submit button (such as here, the FORM element).

In Single-Page mode, if no target is explicitely set, the default inline target is implied.

 

Working demo
Loading demo...

 

Requirements

This example requires following Sircl library files to be loaded:

or:

Or their non-minified counterparts.

See the Get Started section about how to set up your project to use the Sircl library.