POST contact form via javascript

This commit is contained in:
Sanjay B 2021-10-28 16:40:26 +05:30
parent bffa0b69b1
commit 2362fd74d8
3 changed files with 55 additions and 13 deletions

View file

@ -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})

View file

@ -1,11 +1,57 @@
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 {
caret.innerHTML = '' 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 = thanksMsg
}) })

View file

@ -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>