blob: 50e87f7d86ceb1db2e8920ae14cacceb903bf748 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
+++
title = "Reset user input"
template = "demo.html"
+++
This example shows how to easily reset user inputs using [`hx-on`](@/attributes/hx-on.md),
allowing users to make multiple requests without having to manually delete their previous inputs.
The inline script will run on the [`afterRequest`](@/events.md#htmx:afterRequest) event and ensures
that the form will reset to its initial state as long as the response has a 20x status code:
```html
<form hx-post="/note"
hx-target="#notes"
hx-swap="afterbegin"
hx-on::after-request="if(event.detail.successful) this.reset()">
<div class="form-group">
<label>Add a note</label>
<input type="text" name="note-text" placeholder="blank canvas">
</div>
<button class="btn">Add</button>
</form>
<ul id="notes"><!-- Response will go here --></ul>
```
The `reset()` method is only available on `form` elements.
For other elements, the input value can explicitly selected and reset to a default to achieve the same result.
The following code is functionally equivalent:
```html
<div>
<label>Add a note</label>
<input id="note-input" type="text" name="note-text" placeholder="blank canvas">
</div>
<button class="btn primary"
hx-post="/note"
hx-target="#note"
hx-swap="afterbegin"
hx-include="#note-input"
hx-on::after-request="if(event.detail.successful)
document.getElementById('note-input').value = ''">
Add
</button>
<ul id="notes"><!-- Response will go here --></ul>
```
{{ demoenv() }}
<script>
//=========================================================================
// Fake Server Side Code
//=========================================================================
// routes
init("/demo", function(request) {
return formTemplate();
})
onPost("/note", function(request, params) {
var note = params['note-text'];
if (note) {
return `<li>${note}</li>`;
}
})
// templates
function formTemplate() {
return `
<form hx-post="/note" hx-target="#notes" hx-swap="afterbegin" hx-on::after-request="if(event.detail.successful) this.reset()">
<div class="form-group">
<label>Add a note</label>
<input type="text" name="note-text" placeholder="blank canvas">
</div>
<button class="btn primary">Add</button>
</form>
<ul id="notes"> </ul>`;
}
</script>
|
