sheppy/flask-json-dream-website
1
0
Fork 0
mirror of https://github.com/FAUSheppy/flask-json-dream-website synced 2025-12-08 16:58:32 +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 */ /* show the waiting dialog */
dialog = document.getElementById("waiting-dialog") dialog = document.getElementById("waiting-dialog")
@@ -7,23 +7,17 @@ function submitForm(){
/* submit the form */ /* submit the form */
xhr = new XMLHttpRequest(); xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); xhr.open("POST", "/contact-api");
xhr.onload = xhr.onload = formSubmitFinished
formData = new FormData(document.getElementById("contact-form")); formData = new FormData(document.getElementById("contact-form"));
xhr.send(formData); 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){ function formSubmitFinished(event){
if(event.target.status != 200){ if(event.target.status != 200){
showErrorMessage(); // blocking showErrorMessage(event.target); // blocking
setMainBackgroundOpacity(0.5) setMainBackgroundOpacity(1)
}else{ }else{
window.location.href = "/thanks" window.location.href = "/thanks"
} }
@@ -33,3 +27,8 @@ function setMainBackgroundOpacity(opacity){
mainContainer = document.getElementById("main-container") mainContainer = document.getElementById("main-container")
mainContainer.style.opacity = opacity 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 --> <!-- Bootstrap core CSS -->
{% include 'head.html' %} {% include 'head.html' %}
<script src="/static/contact.js"></script>
</head> </head>
<body> <body>
{% include 'navbar.html' %} {% include 'navbar.html' %}
{% include 'progress_window.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"> <section class="mb-4">
<h2 class="h1-responsive font-weight-bold text-center my-4">{{ conf['CONTACT_HEADLINE'] }} <h2 class="h1-responsive font-weight-bold text-center my-4">{{ conf['CONTACT_HEADLINE'] }}
</h2> </h2>
<p class="text-center w-responsive mx-auto mb-5"> </p> <p class="text-center w-responsive mx-auto mb-5"> </p>
<div class="row"> <div class="row">
<div class="col-md-9 mb-md-0 mb-5"> <div class="col-md-9 mb-md-0 mb-5">
<form id="contact-form" name="contact-form" <form id="contact-form" name="contact-form">
action="contact-api" method="POST" enctype='application/json'> <!-- action="contact-api" method="POST" enctype='application/json'> -->
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="md-form mb-0"> <div class="md-form mb-0">
@@ -57,7 +59,7 @@
</div> </div>
</form> </form>
<div class="text-center text-md-left mt-2"> <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>
<div class="status"></div> <div class="status"></div>
</div> </div>

2
templates/progress_window.html
View File

@@ -1,5 +1,5 @@
<!-- Modal --> <!-- 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-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">