<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <title>Buchbestellung</title> <style>a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;font-family:Arial,Helvetica,sans-serif}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}.container-wrapper{display:flex;max-width:92%;margin:0 auto}.container{width:100%;margin-top:2%;margin-bottom:2%;margin-left:auto;margin-right:auto;max-width:600px}img{max-width:250px}input[type=number],input[type=text]{padding:2px 3px;border:0;background:0 0;width:100%}input[type=submit]{float:right}table{width:100%}th{border:1px solid #ddd;background-color:#07ad87;color:#fff;padding:5px 3px;text-align:left}.email-wrapper{text-align:right}#firstName,#lastName,#userEmail,td{border:1px solid #8a8a8a;margin-top:5px}#firstName,#lastName,#userEmail{font-size:14px;padding:3px;width:50%;min-width:300px}tr:nth-child(even){background-color:#f2f2f2}#errorMsg{display:none;color:#d40808;font-weight:400}#successMsg{display:none;color:#07ad87;font-weight:400}#orderDescription{width:99%;overflow:auto}#submitButton{float:right;background-color:#07ad87;color:#fff;padding:5px 10px;border:0;font-size:16px}#submitButton:hover{background-color:#45c46d;cursor:pointer;margin:0}#submitButton:disabled,input[type=submit][disabled=disabled]{background-color:#98b5a1}.contactData{margin-top:40px}.img-wrapper{text-align:left}.img-wrapper img{width:{};}</style> </head> <body> <div class="container-wrapper"> <div class="container"> <form id="orderForm"> <div class="container"> </div> <div class="container"> <p> </p><p style="color:undefined;font-family:undefined;line-height:undefined;font-size:undefined">Vielen Dank für Ihr Interesse.<br><br>Über das folgende Formular können Sie die genannten Titel bei uns per E-Mail anfragen. Wir melden uns bei Ihnen per E-Mail zurück.<br><br>Viele Grüße<br>Ihre Buchhandlung Schmetz am Dom</p> <p></p> </div> <div class="container"> <p id="errorMsg"></p> <p id="successMsg"></p> </div> <div class="container contactData"> <h5>Vorname: <input type="text" id="firstName"> </h5> <h5>Nachname: <input type="text" id="lastName"> </h5> <h5>Ihre E-Mail Adresse: <input type="text" id="userEmail"> </h5> </div> <div class="container"> <table> <tr> <th>Menge</th> <th>Titel</th> <th>Autor</th> <th>EAN</th> <th>Verlag</th> <th>Preis (€)</th> </tr> <tr> <td> <input type="number" name="quantity"> </td> <td> <input type="text" name="title"> </td> <td> <input type="text" name="author"> </td> <td> <input type="text" name="ean"> </td> <td> <input type="text" name="publisher"> </td> <td> <input type="text" name="price" disabled="disabled"> </td> </tr> <tr> <td> <input type="number" name="quantity"> </td> <td> <input type="text" name="title"> </td> <td> <input type="text" name="author"> </td> <td> <input type="text" name="ean"> </td> <td> <input type="text" name="publisher"> </td> <td> <input type="text" name="price"> </td> </tr> <tr> <td> <input type="number" name="quantity"> </td> <td> <input type="text" name="title"> </td> <td> <input type="text" name="author"> </td> <td> <input type="text" name="ean"> </td> <td> <input type="text" name="publisher"> </td> <td> <input type="text" name="price"> </td> </tr> <tr> <td> <input type="number" name="quantity"> </td> <td> <input type="text" name="title"> </td> <td> <input type="text" name="author"> </td> <td> <input type="text" name="ean"> </td> <td> <input type="text" name="publisher"> </td> <td> <input type="text" name="price"> </td> </tr> <tr> <td> <input type="number" name="quantity"> </td> <td> <input type="text" name="title"> </td> <td> <input type="text" name="author"> </td> <td> <input type="text" name="ean"> </td> <td> <input type="text" name="publisher"> </td> <td> <input type="text" name="price"> </td> </tr> <tr> <td> <input type="number" name="quantity"> </td> <td> <input type="text" name="title"> </td> <td> <input type="text" name="author"> </td> <td> <input type="text" name="ean"> </td> <td> <input type="text" name="publisher"> </td> <td> <input type="text" name="price"> </td> </tr> <tr> <td> <input type="number" name="quantity"> </td> <td> <input type="text" name="title"> </td> <td> <input type="text" name="author"> </td> <td> <input type="text" name="ean"> </td> <td> <input type="text" name="publisher"> </td> <td> <input type="text" name="price"> </td> </tr> <tr> <td> <input type="number" name="quantity"> </td> <td> <input type="text" name="title"> </td> <td> <input type="text" name="author"> </td> <td> <input type="text" name="ean"> </td> <td> <input type="text" name="publisher"> </td> <td> <input type="text" name="price"> </td> </tr> <tr> <td> <input type="number" name="quantity"> </td> <td> <input type="text" name="title"> </td> <td> <input type="text" name="author"> </td> <td> <input type="text" name="ean"> </td> <td> <input type="text" name="publisher"> </td> <td> <input type="text" name="price"> </td> </tr> <tr> <td> <input type="number" name="quantity"> </td> <td> <input type="text" name="title"> </td> <td> <input type="text" name="author"> </td> <td> <input type="text" name="ean"> </td> <td> <input type="text" name="publisher"> </td> <td> <input type="text" name="price"> </td> </tr> </table> </div> <div class="container"> <h5>Bemerkung:</h5> <textarea name="description" cols="100" rows="10" id="orderDescription"></textarea> </div> <div class="container"> <input type="submit" value="Absenden" id="submitButton"> </div> </form> </div> </div> <script type="text/javascript"> (function (clientId, successText, endpoint) {
var form = document.getElementById('orderForm')
form.addEventListener("submit", submitForm, false)
var formElements = document.querySelectorAll('input')
var arr = [];
function submitForm(e) {
e.preventDefault()
var email = document.getElementById('userEmail').value
var description = document.getElementById('orderDescription').value
var firstName = document.getElementById('firstName').value
var lastName = document.getElementById('lastName').value
if (!/(.+)@(.+){2,}\.(.+){2,}/.test(email)) {
showErrorMsg('Bitte geben Sie eine gültige E-Mail Adresse ein.')
return
}
arr = []
var tr = form.querySelectorAll('tr')
for (var trIndex = 0; trIndex < tr.length; trIndex++) {
var obj = {};
var tds = tr[trIndex].querySelectorAll('input')
if (tds.length > 0) {
for (var tdIndex = 0; tdIndex < tds.length; tdIndex++) {
if (tds[tdIndex].value) {
obj[tds[tdIndex].name] = tds[tdIndex].value
}
}
}
if (obj.hasOwnProperty('ean') || obj.hasOwnProperty('title')) {
arr.push(obj)
}
}
if (arr.length === 0) {
showErrorMsg('Bitte geben Sie mindestens ein Buch an, um die Bestellung auszuführen.')
return
}
const from = {
email,
firstName,
lastName
}
placeOrder(arr, from, description)
}
function placeOrder(arr, from, description) {
var data = {
clientId: clientId,
books: arr,
from,
description: description
}
var xhr = new XMLHttpRequest()
xhr.onload = function (e, req) {
if (xhr.status >= 200 && xhr.status < 300) {
showSuccessMsg(successText)
return true
}
var msg
if (e.target.responseText) {
msg = JSON.parse(e.target.responseText)
} else {
msg = 'Unknown error'
}
showErrorMsg(msg)
}
xhr.open('PUT', endpoint)
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.send(JSON.stringify(data))
}
function showErrorMsg(msg) {
var errorEl = document.getElementById('errorMsg')
errorEl.style.display = 'block'
hideSuccessMsg()
errorEl.innerHTML = msg
}
function hideErrorMsg() {
var el = document.getElementById('errorMsg')
el.style.display = 'none'
el.innerHTML = ''
}
function showSuccessMsg(msg) {
var el = document.getElementById('successMsg')
el.style.display = 'block'
hideErrorMsg()
el.innerHTML = msg
var submitButton = document.getElementById('submitButton')
submitButton.disabled = true
}
function hideSuccessMsg() {
var el = document.getElementById('successMsg')
el.style.display = 'none'
el.innerHTML = ''
}
function startPostingMessages() {
var rIframe = {}
rIframe.requestAnimFrame = (function () {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60)
}
)
})()
rIframe.windowHeight = 0
rIframe.htmlElement = document.getElementsByTagName('html')[0]
rIframe.resizeFrame = function () {
var windowHeight = document.body
? Math.max(document.body.offsetHeight, rIframe.htmlElement.offsetHeight)
: rIframe.htmlElement.offsetHeight
if (rIframe.windowHeight === windowHeight) {
rIframe.requestAnimFrame.call(window, rIframe.resizeFrame)
return false
}
rIframe.windowHeight = windowHeight
try {
window.frameElement.style.height = windowHeight + 'px'
} catch (e) {
window.parent.postMessage('orderForm:' + registrationFormId + ':resize:' + windowHeight, '*')
}
rIframe.requestAnimFrame.call(window, rIframe.resizeFrame)
}
rIframe.requestAnimFrame.call(window, rIframe.resizeFrame)
}
})(759, "<p>Vielen Dank für Ihre Anfrage. <br />Wir melden uns bei Ihnen per E-Mail zurück.</p>", "https://api.kulturkurier.de/literaturkurier/order/") </script> </body> </html>