POST contact form via javascript
This commit is contained in:
parent
bffa0b69b1
commit
2362fd74d8
3 changed files with 55 additions and 13 deletions
|
@ -1,13 +1,12 @@
|
||||||
from django.conf import settings
|
from django.conf import settings
|
||||||
from django.core.mail import EmailMessage
|
from django.core.mail import EmailMessage
|
||||||
from django.shortcuts import render
|
from django.shortcuts import render
|
||||||
|
from app.video.utils import render_to_json_response
|
||||||
from . import forms
|
from . import forms
|
||||||
from . import models
|
from . import models
|
||||||
|
|
||||||
def index(request):
|
def index(request):
|
||||||
context = {
|
success = True
|
||||||
}
|
|
||||||
if request.method == 'POST':
|
if request.method == 'POST':
|
||||||
form = forms.ContactForm(request.POST)
|
form = forms.ContactForm(request.POST)
|
||||||
if form.is_valid():
|
if form.is_valid():
|
||||||
|
@ -17,7 +16,8 @@ def index(request):
|
||||||
to = [settings.CONTACT_TO_EMAIL]
|
to = [settings.CONTACT_TO_EMAIL]
|
||||||
msg = EmailMessage(subject, message, from_, to, reply_to=[form.cleaned_data['email']])
|
msg = EmailMessage(subject, message, from_, to, reply_to=[form.cleaned_data['email']])
|
||||||
msg.send(fail_silently=True)
|
msg.send(fail_silently=True)
|
||||||
context['submitted'] = True
|
|
||||||
else:
|
else:
|
||||||
context['form'] = form
|
success = False
|
||||||
return render(request, 'contact.html', context)
|
else:
|
||||||
|
success = False
|
||||||
|
return render_to_json_response({'success': success})
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
document.querySelectorAll('.accordion-checkbox').forEach(cbox => {
|
document.querySelectorAll('.accordion-checkbox').forEach(cbox => {
|
||||||
cbox.addEventListener('change', function() {
|
cbox.addEventListener('change', function() {
|
||||||
const label = this.previousElementSibling
|
const label = this.previousElementSibling
|
||||||
const caret = label.querySelector('.text')
|
const caret = label.querySelector('.text-about')
|
||||||
if (cbox.checked) {
|
if (cbox.checked) {
|
||||||
caret.innerHTML = ''
|
caret.innerHTML = ''
|
||||||
} else {
|
} else {
|
||||||
|
@ -9,3 +9,49 @@ document.querySelectorAll('.accordion-checkbox').forEach(cbox => {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
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 = thanksMsg
|
||||||
|
})
|
|
@ -130,11 +130,8 @@
|
||||||
</label>
|
</label>
|
||||||
<input type="checkbox" id="bio-contact" class="accordion-checkbox">
|
<input type="checkbox" id="bio-contact" class="accordion-checkbox">
|
||||||
<div class="accordion-content">
|
<div class="accordion-content">
|
||||||
<div class="contact">
|
<div class="contact" id="contact-container">
|
||||||
{% if submitted %}
|
<form id="contact-form" method="post">
|
||||||
Thanks for your message
|
|
||||||
{% else %}
|
|
||||||
<form method="post">
|
|
||||||
<label for="input-email">Your Email</label>
|
<label for="input-email">Your Email</label>
|
||||||
<input name="email" type="email" id="input-email" required>
|
<input name="email" type="email" id="input-email" required>
|
||||||
|
|
||||||
|
@ -144,7 +141,6 @@
|
||||||
<input type="submit" value="Send Message 傳送訊息">
|
<input type="submit" value="Send Message 傳送訊息">
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
</form>
|
</form>
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
Loading…
Reference in a new issue