xxxxxxxxxx
1
2
<form id="form">
3
<div class="row">
4
<div class="col-12">
5
<label for="name">Name</label>
6
<input type="text" id="name" name="name" placeholder="Name">
7
</div>
8
<div class="col-12">
9
<label for="email">Email</label>
10
<input type="text" id="email" name="email" placeholder="Email">
11
</div>
12
<div class="col-12">
13
<label for="message">Message</label>
14
<textarea id="message" name="message" placeholder="Message"></textarea>
15
</div>
16
</div>
17
<button id="form-submit" class="submit-button" type="submit">
18
Submit
19
<div class="loader"></div>
20
</button>
21
</form>
22
<div id="message-success" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: fixed;top: 20px;right: 20px;">
23
<div class="toast-header">
24
<strong class="me-auto text-success">Success</strong>
25
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
26
</div>
27
<div class="toast-body">
28
Message sent
29
</div>
30
</div>
31
<div id="message-error" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: fixed;top: 20px;right: 20px;">
32
<div class="toast-header text-danger">
33
<strong class="me-auto">Error</strong>
34
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
35
</div>
36
<div class="toast-body">
37
Please try again later
38
<br>
39
<span id="basin-error"></span>
40
</div>
41
</div>
42
43
44
45
<div
46
class="toast fade mx-auto"
47
id="basic-error"
48
role="alert"
49
aria-live="assertive"
50
aria-atomic="true"
51
data-mdb-autohide="true"
52
data-mdb-delay="2000"
53
data-mdb-position="top-right"
54
data-mdb-append-to-body="true"
55
data-mdb-stacking="true"
56
data-mdb-width="350px"
57
data-mdb-color="danger"
58
>
59
<div class="toast-header text-white">
60
<strong class="me-auto">MDBootstrap</strong>
61
<small>11 mins ago</small>
62
<button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
63
</div>
64
<div class="toast-body text-white">Danger Basic Example</div>
65
</div>
66
67
68
<div
69
class="toast fade mx-auto"
70
id="basic-success"
71
role="alert"
72
aria-live="assertive"
73
aria-atomic="true"
74
data-mdb-autohide="true"
75
data-mdb-delay="2000"
76
data-mdb-position="top-right"
77
data-mdb-append-to-body="true"
78
data-mdb-stacking="true"
79
data-mdb-width="350px"
80
data-mdb-color="success"
81
>
82
<div class="toast-header text-white">
83
<strong class="me-auto">MDBootstrap</strong>
84
<small>11 mins ago</small>
85
<button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
86
</div>
87
<div class="toast-body text-white">Success Basic Example</div>
88
</div>
89
90
<button type="button" class="btn btn-success" id="basic-success-trigger">Success</button>
91
<button type="button" class="btn btn-danger" id="basic-error-trigger">Error</button>
92
1
1
xxxxxxxxxx
1
// This is how you should trigger certain Toasts
2
let errorInstance = mdb.Toast.getInstance(document.getElementById('basic-error'));
3
document.getElementById('basic-error-trigger').addEventListener('click', () => {
4
errorInstance.show();
5
});
6
7
let successInstance = mdb.Toast.getInstance(document.getElementById('basic-success'));
8
document.getElementById('basic-success-trigger').addEventListener('click', () => {
9
successInstance.show();
10
});
11
//
12
13
const form = document.getElementById('form')
14
form.onsubmit = function(e) {
15
e.preventDefault()
16
document.getElementById('form-submit')?.classList.add('loading')
17
if(! navigator.onLine) {
18
document.getElementById('basin-error').innerHTML = 'Connection error'
19
document.getElementById('message-success')?.classList.remove('show')
20
document.getElementById('message-error')?.classList.add('show')
21
return;
22
}
23
const formData = new FormData(form)
24
const request = new XMLHttpRequest()
25
request.open("POST", form.action, true)
26
request.onload = function() {
27
document.getElementById('form-submit')?.classList.remove('loading')
28
document.getElementById('basin-error').innerHTML = ''
29
if(request.status === 200) {
30
document.getElementById('message-error')?.classList.remove('show')
31
document.getElementById('message-success')?.classList.add('show')
32
form.reset()
33
} else {
34
document.getElementById('message-success')?.classList.remove('show')
35
document.getElementById('message-error')?.classList.add('show')
36
}
37
}
38
setTimeout(() => {
39
request.send(formData)
40
}, 500)
41
}
42
43
console.log(document.getElementById('basic-error-trigger'))
44
console.log(document.getElementById('basic-success-trigger'))
Console errors: 0