sheppy/flask-json-dream-website
1
0
Fork 0
mirror of https://github.com/FAUSheppy/flask-json-dream-website synced 2025-12-06 16:21:35 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix client side contact form onError

Browse Source
This commit is contained in:
Yannik Schmidt
2020-09-01 17:50:54 +02:00
parent 430e0f60aa
commit 1fee6b6475
3 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
static/contact.js
View File

@@ -1,4 +1,4 @@
function submitForm(){
function submitContactForm(){
/* show the waiting dialog */
dialog = document.getElementById("waiting-dialog")
@@ -7,23 +7,17 @@ function submitForm(){
/* submit the form */
xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php");
xhr.onload =
xhr.open("POST", "/contact-api");
xhr.onload = formSubmitFinished
formData = new FormData(document.getElementById("contact-form"));
xhr.send(formData);
mainContainer = document.getElementById("main-container")
mainContainer.style.opacity = 0.5
window.location.href = "/thanks"
// after x seconds forward to thx
}
function formSubmitFinished(event){
if(event.target.status != 200){
showErrorMessage(); // blocking
setMainBackgroundOpacity(0.5)
showErrorMessage(event.target); // blocking
setMainBackgroundOpacity(1)
}else{
window.location.href = "/thanks"
}
@@ -33,3 +27,8 @@ function setMainBackgroundOpacity(opacity){
mainContainer = document.getElementById("main-container")
mainContainer.style.opacity = opacity
}
function showErrorMessage(target){
console.log(target)
alert("Error: " + target.statusText)
}

10
templates/contact.html
View File

@@ -8,20 +8,22 @@
<!-- Bootstrap core CSS -->
{% include 'head.html' %}
<script src="/static/contact.js"></script>
</head>
<body>
{% include 'navbar.html' %}
{% include 'progress_window.html' %}
<div class="container" style="margin-top: 4vw;">
<div id="main-container" class="container" style="margin-top: 4vw;">
<section class="mb-4">
<h2 class="h1-responsive font-weight-bold text-center my-4">{{ conf['CONTACT_HEADLINE'] }}
</h2>
<p class="text-center w-responsive mx-auto mb-5"> </p>
<div class="row">
<div class="col-md-9 mb-md-0 mb-5">
<form id="contact-form" name="contact-form"
action="contact-api" method="POST" enctype='application/json'>
<form id="contact-form" name="contact-form">
<!-- action="contact-api" method="POST" enctype='application/json'> -->
<div class="row">
<div class="col-md-6">
<div class="md-form mb-0">
@@ -57,7 +59,7 @@
</div>
</form>
<div class="text-center text-md-left mt-2">
<a class="btn btn-primary" onclick="document.getElementById('contact-form').submit();">Send</a>
<a class="btn btn-primary" onclick="submitContactForm()">Send</a>
</div>
<div class="status"></div>
</div>

2
templates/progress_window.html
View File

@@ -1,5 +1,5 @@
<!-- Modal -->
<div class="modal fade" id="pleaseWaitDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal fade" id="waiting-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">