-
Notifications
You must be signed in to change notification settings - Fork 71
/
upvote_form.html
43 lines (41 loc) · 1.66 KB
/
upvote_form.html
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
<small>
<form id="upvote-form" action="/upvote/{{ post.pk }}/" method="post" style="display: inline">
<input hidden name="pk" value="{{ post.pk }}" style="display:none"/>
<input hidden name="title" style="display:none"/>
{% csrf_token %}
{% if upvoted %}
<button
disabled=true
style="padding:0; margin:0; border:0;background-color:inherit;color: salmon;"
title="Toasted"
>
{% else %}
<button
style="padding:0; margin:0; border:0;background-color:inherit;color: inherit;"
title="Toast this post"
>
{% endif %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
<polyline points="17 11 12 6 7 11"></polyline>
<polyline points="17 18 12 13 7 18"></polyline>
</svg>
<br>
<small class="upvote-count">{{ post.upvotes }}</small>
</button>
</form>
</small>
<script>
document.querySelector('#upvote-form').addEventListener('submit', (e) => {
e.preventDefault();
const form = e.target;
fetch(form.action, {
method: form.method,
body: new FormData(form),
});
const button = form.querySelector('button')
button.disabled = true
button.style.color = "salmon"
const upvoteCount = document.querySelector('.upvote-count')
upvoteCount.innerHTML = `${(parseInt(upvoteCount.innerHTML.split(" ")[0]) + 1)}`
});
</script>