Wednesday | 24 APR 2024
[ previous ]
[ next ]

Submitting Forms without Page Change

Title:
Date: 2022-11-16
Tags:  

A very easy to use way of submitting forms without triggering a page change or refresh.

We can use the target attribute of the form and an iframe with the corresponding name. The target attribute tells where to load the response once the form is submitted, the default is "_self" which will cause the response to be loaded on the current page.

We can set the target to the name of a iframe, this can also be hidden, and then the response will be loaded in the iframe!

<iframe name="console"></iframe>
<form action="/some-endpoint" method="POST" target="console">
    <input type="text" name="name">
    <button type="submit">submit</button>
</form>

A working example: