Merge pull request 'POST contact form via javascript' (#35) from contact-js into main
Reviewed-on: 0x2620/aab21#35
This commit is contained in:
commit
381842d09c
5 changed files with 67 additions and 14 deletions
|
@ -1,13 +1,12 @@
|
|||
from django.conf import settings
|
||||
from django.core.mail import EmailMessage
|
||||
from django.shortcuts import render
|
||||
|
||||
from app.video.utils import render_to_json_response
|
||||
from . import forms
|
||||
from . import models
|
||||
|
||||
def index(request):
|
||||
context = {
|
||||
}
|
||||
success = True
|
||||
if request.method == 'POST':
|
||||
form = forms.ContactForm(request.POST)
|
||||
if form.is_valid():
|
||||
|
@ -17,7 +16,8 @@ def index(request):
|
|||
to = [settings.CONTACT_TO_EMAIL]
|
||||
msg = EmailMessage(subject, message, from_, to, reply_to=[form.cleaned_data['email']])
|
||||
msg.send(fail_silently=True)
|
||||
context['submitted'] = True
|
||||
else:
|
||||
context['form'] = form
|
||||
return render(request, 'contact.html', context)
|
||||
success = False
|
||||
else:
|
||||
success = False
|
||||
return render_to_json_response({'success': success})
|
||||
|
|
|
@ -103,8 +103,18 @@
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
@media screen and (min-width: 800px) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-checkbox:checked + .accordion-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: var(--spacing) 0;
|
||||
}
|
|
@ -48,6 +48,7 @@
|
|||
display: block;
|
||||
background-size: 400% 100%;
|
||||
animation: background_animation 60s ease-in-out infinite, text_animation 60s ease-in-out infinite;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -1,11 +1,57 @@
|
|||
document.querySelectorAll('.accordion-checkbox').forEach(cbox => {
|
||||
cbox.addEventListener('change', function() {
|
||||
const label = this.previousElementSibling
|
||||
const caret = label.querySelector('.text')
|
||||
const caret = label.querySelector('.text-about')
|
||||
if (cbox.checked) {
|
||||
caret.innerHTML = ''
|
||||
} else {
|
||||
caret.innerHTML = ''
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function getCookie(name) {
|
||||
var cookieValue = null;
|
||||
if (document.cookie && document.cookie !== '') {
|
||||
var cookies = document.cookie.split(';');
|
||||
for (var i = 0; i < cookies.length; i++) {
|
||||
var cookie = cookies[i].trim()
|
||||
// Does this cookie string begin with the name we want?
|
||||
if (cookie.substring(0, name.length + 1) === (name + '=')) {
|
||||
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!cookieValue && name === 'csrftoken') {
|
||||
var input = document.querySelector('input[name="csrfmiddlewaretoken"]')
|
||||
if (input) {
|
||||
cookieValue = input.value
|
||||
}
|
||||
}
|
||||
return cookieValue;
|
||||
}
|
||||
|
||||
document.getElementById('contact-form').addEventListener('submit', async function(event) {
|
||||
// console.log('foobar')
|
||||
event.preventDefault()
|
||||
let data = new FormData()
|
||||
data.append('email', document.getElementById('input-email').value)
|
||||
data.append('message', document.getElementById('input-msg').value)
|
||||
data.append('csrfmiddlewaretoken', getCookie('csrftoken'))
|
||||
document.getElementById('contact-container').innerHTML = '...'
|
||||
let success;
|
||||
try {
|
||||
const response = await fetch('/polis+contact/', {
|
||||
method: 'POST',
|
||||
body: data
|
||||
})
|
||||
let resData = await response.json()
|
||||
success = resData.success
|
||||
} catch (e) {
|
||||
console.log('error', e)
|
||||
success = false
|
||||
}
|
||||
const thanksMsg = success ? 'Thanks for your message 謝謝您的訊息' : 'Failed to send message. Try again later.'
|
||||
document.getElementById('contact-container').innerHTML = `<div class="alert">${thanksMsg}</div>`
|
||||
})
|
|
@ -130,11 +130,8 @@
|
|||
</label>
|
||||
<input type="checkbox" id="bio-contact" class="accordion-checkbox">
|
||||
<div class="accordion-content">
|
||||
<div class="contact">
|
||||
{% if submitted %}
|
||||
Thanks for your message
|
||||
{% else %}
|
||||
<form method="post">
|
||||
<div class="contact" id="contact-container">
|
||||
<form id="contact-form" method="post">
|
||||
<label for="input-email">Your Email</label>
|
||||
<input name="email" type="email" id="input-email" required>
|
||||
|
||||
|
@ -144,7 +141,6 @@
|
|||
<input type="submit" value="Send Message 傳送訊息">
|
||||
{% csrf_token %}
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
|
Loading…
Reference in a new issue