{"id":9467,"date":"2016-07-29T09:33:18","date_gmt":"2016-07-29T07:33:18","guid":{"rendered":"https:\/\/compassion.ch\/?page_id=9467\/"},"modified":"2019-10-16T13:39:02","modified_gmt":"2019-10-16T11:39:02","slug":"spendenformular","status":"publish","type":"page","link":"https:\/\/compassion.ch\/de\/spendenformular\/","title":{"rendered":"Spendenformular"},"content":{"rendered":"<div id=\"pl-9467\"  class=\"panel-layout\" ><div class=\"section background-blue section_abgerissen_unten remove_margin_bottom\" ><div class=\"row section_row\"><div id=\"pg-9467-0\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-9467-0-0\"  class=\"panel-grid-cell\" ><div id=\"panel-9467-0-0-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<h2 style=\"text-align: center;\">Jetzt Spenden<\/h2>\n<p class=\"subtitle\" style=\"text-align: center;\">Mit deiner Spende unterst\u00fctzt du die Arbeit von Compassion und hilfst dabei, das Leben von Kindern aus \u00e4rmsten Verh\u00e4ltnissen zu verbessern. Deine Spende ist in der Schweiz steuerabzugsberechtigt. Vielen Dank f\u00fcr deinen Beitrag!<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><div class=\"section background-beige section_abgerissen_unten\" ><div class=\"row section_row\"><div id=\"pg-9467-1\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-9467-1-0\"  class=\"panel-grid-cell\" ><div id=\"panel-9467-1-0-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"1\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t\n<script type=\"text\/javascript\">\n        \/\/ script for different donation buttons\n\n\n<\/script>\n<form id=\"donation_form\" method=\"POST\" action=\"?step=redirect\" class=\"\">\n    <div class=\"row\" style=\"display:none;\">\n        <div class=\"small-12 medium-4 columns\">\n            <label class=\"text-left middle\">M\u00e9thode de versement<\/label>\n        <\/div>\n        <div class=\"small-12 medium-8 columns\">\n            <div style=\"margin-bottom: 16px;\">\n                <label style=\"display:inline-block; margin-right:8px;\">\n                    <input id=\"payment_method_online\" name=\"payment_method\" type=\"radio\" value=\"online\" checked>\n                    En ligne                <\/label>\n                <label style=\"display:inline-block\">\n                    <input name=\"payment_method\" type=\"radio\" value=\"slip\">\n                    Par bulletin                <\/label>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <param id=\"type_flag\" value=\"frontend\"\/>\n\n<div class=\"row\">\n    <div class=\"small-12 medium-4 columns\">\n        <label class=\"text-left middle\">Betrag deiner Spende in CHF<\/label>\n    <\/div>\n    <div class=\"small-12 medium-8 columns\">\n        <input id=\"wert\" type=\"number\" step=\"0.01\" required class=\"input-field\" name=\"wert\" value=\"\">\n    <\/div>\n<\/div>\n<div class=\"row\">\n    <div class=\"small-12 medium-4 columns\">\n        <!-- <label class=\"text-left middle\">Choix du don<\/label> -->\n    <\/div>\n    <div class=\"small-12 medium-8 columns\">\n        <div style=\"margin-bottom: 16px;\">\n            <label style=\"display:inline-block; margin-right:8px;\">\n                <input type=\"radio\" name=\"choix_don_unique_mensuel\" value=\"monthly\" id=\"don_mensuel\" >\n                Monatlich            <\/label>\n            <label style=\"display:inline-block\">\n                <input type=\"radio\" name=\"choix_don_unique_mensuel\" value=\"\" id=\"don_unique\" checked >\n                Einmalige Spende            <\/label>\n        <\/div>\n    <\/div>\n<\/div>\n<div class=\"row\">\n    <div class=\"small-12 medium-4 columns\">\n        <label class=\"text-left middle\">Spendenzweck<\/label>\n    <\/div>\n    <div class=\"small-12 medium-8 columns\">\n        <div class=\"select-wrapper\">\n            <select name=\"fonds\" id=\"fonds\" class=\"input-field\">\n                <option value=\"humanitaire\" >Aktuelle Nothilfe<\/option>\n                <option value=\"noel\" >Weihnachtsgeschenk<\/option>\n                <option value=\"wash\" >Sauberes Wasser und Toiletten<\/option>\n                <option value=\"csp\" >Babys und M\u00fcttern helfen<\/option>\n                <option value=\"sansparrain\" >Kinder, die ihren Paten verloren haben<\/option>\n                <option value=\"medical\" >Medizinische Hilfe<\/option>\n                <option value=\"bible\" >Bibelfonds<\/option>\n            <\/select>\n        <\/div>\n    <\/div>\n<\/div>\n\n    <div class=\"row\">\n        <div class=\"small-12 medium-12 columns marg-top-10 \">\n            <h5 class=\"text-uppercase\">Meine pers\u00f6nlichen Daten<\/h5>\n        <\/div>\n    <\/div>\n    <div class=\"row\">\n        <div class=\"small-12 medium-4 columns\">\n            <label class=\"text-left middle\">\n                Vorname, Nachname            <\/label>\n        <\/div>\n        <div class=\"small-12 medium-8 columns\">\n            <input name=\"pname\" type=\"text\" required class=\"input-field\" value=\"\">\n        <\/div>\n    <\/div>\n    <div class=\"row\">\n        <div class=\"small-12 medium-4 columns\">\n            <label class=\"text-left middle\">\n                Unternehmen            <\/label>\n        <\/div>\n        <div class=\"small-12 medium-8 columns\">\n            <input name=\"cname\" type=\"text\" class=\"input-field\" value=\"\">\n        <\/div>\n    <\/div>\n    <div class=\"row\">\n        <div class=\"small-12 medium-4 columns\">\n            <label class=\"text-left middle\">\n                Strasse\/Hausnr.            <\/label>\n        <\/div>\n        <div class=\"small-12 medium-8 columns\">\n            <input name=\"street\" type=\"text\" required class=\"input-field\" value=\"\">\n        <\/div>\n    <\/div>\n    <div class=\"row\">\n        <div class=\"small-12 medium-4 columns\">\n            <label class=\"text-left middle\">\n                PLZ\/Ort            <\/label>\n        <\/div>\n        <div class=\"small-6 medium-2 columns\">\n            <input name=\"zipcode\" type=\"text\" required class=\"input-field\"  value=\"\">\n        <\/div>\n        <div class=\"small-6 medium-6 columns\">\n            <input name=\"city\" type=\"text\" required class=\"input-field\" value=\"\">\n        <\/div>\n    <\/div>\n    <div class=\"row\">\n        <div class=\"small-12 medium-4 columns\">\n            <label class=\"text-left middle\">\n                Land            <\/label>\n        <\/div>\n        <div class=\"mall-12 medium-8 columns\">\n            <select name=\"country\" required class=\"input-field\" >\n                                    <!-- https:\/\/www.html-code-generator.com\/html\/drop-down\/country-names -->\n<option value=\"AX\">Aland Islands<\/option>\n<option value=\"AL\">Albanien<\/option>\n<option value=\"AD\">Andorra<\/option>\n<option value=\"AT\">\u00d6sterreich<\/option>\n<option value=\"BY\">Weissrussland<\/option>\n<option value=\"BE\">Belgien<\/option>\n<option value=\"BA\">Bosnien und Herzegowina<\/option>\n<option value=\"BG\">Bulgarien<\/option>\n<option value=\"HR\">Kroatien<\/option>\n<option value=\"CZ\">Tschechien<\/option>\n<option value=\"DK\">D\u00e4nemark<\/option>\n<option value=\"EE\">Estland<\/option>\n<option value=\"FO\">F\u00e4r\u00f6er Inseln<\/option>\n<option value=\"FI\">Finnland<\/option>\n<option value=\"FR\">Frankreich<\/option>\n<option value=\"DE\">Deutschland<\/option>\n<option value=\"GI\">Gibraltar<\/option>\n<option value=\"GR\">Griechenland<\/option>\n<option value=\"GG\">Guernsey<\/option>\n<option value=\"VA\">Heiliger Stuhl (Staat der Vatikanstadt)<\/option>\n<option value=\"HU\">Ungarn<\/option>\n<option value=\"IS\">Island<\/option>\n<option value=\"IE\">Irland<\/option>\n<option value=\"IM\">Isle of Man<\/option>\n<option value=\"IT\">Italien<\/option>\n<option value=\"JE\">Jersey<\/option>\n<option value=\"XK\">Kosovo<\/option>\n<option value=\"LV\">Lettland<\/option>\n<option value=\"LI\">Liechtenstein<\/option>\n<option value=\"LT\">Litauen<\/option>\n<option value=\"LU\">Luxemburg<\/option>\n<option value=\"MK\">Mazedonien, die ehemalige jugoslawische Republik<\/option>\n<option value=\"MT\">Malta<\/option>\n<option value=\"MD\">Moldawien, Republik<\/option>\n<option value=\"MC\">Monaco<\/option>\n<option value=\"ME\">Montenegro<\/option>\n<option value=\"NL\">Niederlande<\/option>\n<option value=\"NO\">Norwegen<\/option>\n<option value=\"PL\">Polen<\/option>\n<option value=\"PT\">Portugal<\/option>\n<option value=\"RO\">Rum\u00e4nien<\/option>\n<option value=\"SM\">San Marino<\/option>\n<option value=\"RS\">Serbien<\/option>\n<option value=\"CS\">Serbien und Montenegro<\/option>\n<option value=\"SK\">Slowakei<\/option>\n<option value=\"SI\">Slowenien<\/option>\n<option value=\"ES\">Spanien<\/option>\n<option value=\"SJ\">Spitzbergen und Jan Mayen<\/option>\n<option value=\"SE\">Schweden<\/option>\n<option selected=\"selected\" value=\"CH\">Schweiz<\/option>\n<option value=\"UA\">Ukraine<\/option>\n<option value=\"GB\">Vereinigtes K\u00f6nigreich<\/option>                \n\n            <\/select>\n        <\/div>\n    <\/div>\n    <div class=\"row online\">\n        <div class=\"small-12 medium-4 columns\">\n            <label class=\"text-left middle\">\n                E-Mail-Adresse            <\/label>\n        <\/div>\n        <div class=\"small-12 medium-8 columns\">\n                        <input name=\"email\" type=\"email\" required pattern=\"^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9+_.-]+\\.[a-zA-Z]{2,}$\" class=\"input-field\" value=\"\">\n        <\/div>\n    <\/div>\n\n    <div class=\"row\">\n        <div class=\"small-12 medium-4 columns\"><\/div>\n        <div class=\"small-12 medium-8 columns\">\n            <input class=\"condgene\" type=\"checkbox\" required \/> <span class=\"marg-left-10\"> Ja, ich habe die <a target=\"_blank\" href=\"https:\/\/compassion.ch\/de\/datenschutz\/\">Datenschutzbestimmungen gelesen.<\/a> <\/span>\n        <\/div>\n    <\/div>\n    <div class=\"row text-center form-action marg-top-10\"><br\/><br\/>\n            <input type=\"submit\" class=\"button button-blue button-small click_donate\" value=\"Jetzt spenden\"\/>\n    <\/div>\n    <div class=\"row text-center marg-top-10\">\n        <p>\n            Deine Spende an Compassion ist in der Schweiz <a target=\"_blank\" href=\"https:\/\/compassion.ch\/de\/spenden-und-steuern\/\">steuerabzugsberechtigt.<\/a>        <\/p>\n    <\/div>\n<\/form>\n\n<div class=\"row\">\n    <div id=\"qr_bill\" class=\"text-center\" hidden>\n        <div id=\"qr_bill_svg\"><\/div>\n        <button id=\"qr_bill_print\" type=\"button\" class=\"button button-blue button-small click_donate\">Imprimer<\/button>\n        <p>\n            <i>\n                Vous pouvez \u00e9galement scanner le code QR directement sur votre \u00e9cran            <\/i>\n        <\/p>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\n    \/\/ Set the reason for the donnation.\nif(window.location.hash) {\n    let hashParams = window.location.hash.substr(1).split(\"&\"); \/\/ substr(1) to remove the `#`\n    for(let i = 0; i < hashParams.length; i++) {\n        let p = hashParams[i].split(\"=\");\n        document.getElementById(p[0]).value = decodeURIComponent(p[1]);\n    }\n}\n\nlet type_flag = document.getElementById(\"type_flag\").value;\nlet language = \"de\";\nlet available_languages = [\"en\", \"fr\", \"de\", \"it\"];\nlet donation_form = document.getElementById(\"donation_form\");\nlet submit_button = document.getElementById(\"submit_button\");\nlet text_submit_button_online = \"Jetzt spenden\";\nlet text_submit_button_slip = \"G\u00e9n\u00e9rer le bulletin\";\n\nlet qr_bill = document.getElementById(\"qr_bill\");\nlet qr_bill_svg = document.getElementById(\"qr_bill_svg\");\nlet qr_bill_print = document.getElementById(\"qr_bill_print\");\nlet qr_bill_url = \"https:\/\/compassion.ch\/wp-content\/plugins\/cf7-pf_oli_klay\/templates\/qr_bill.php\";\n\nlet payment_method = document.getElementsByName(\"payment_method\")[1];\nlet payment_parent = payment_method.parentElement\nlet email = document.getElementsByName(\"email\")[0];\n\n\/\/ donation amount buttons on BF donation form\njQuery(document).ready(function($){\n    \/\/ if no button selected, default value\n      \/\/   $('.buttondonationvalue').val(440);\n    \/\/ else\n        $(\"button\").click(function(){\n        var value = $(this).val();\n        var input = $('#wert');\n        input.val(value);\n    });\n});\n\/\/ Get all the buttons into a node list\nlet buttons = document.querySelectorAll(\".buttondonation\");\n\/\/ Set an event handler on the document so that when\n\/\/ any element is clicked, the event will bubble up to it\ndocument.addEventListener(\"click\", function(evt){\n    \/\/ Check to see if it was a button that was clicked\n    if(evt.target.classList.contains(\"buttondonation\")){\n        \/\/ Loop over all the buttons & remove the active class\n        buttons.forEach(function(button){\n            button.classList.remove(\"active\");\n        });\n        \/\/ Make the clicked button have the active class\n        evt.target.classList.add(\"active\");\n    }\n});\n\/\/ end donation amount buttons on BF donation form\n\njQuery('#payment_method_online').on('ifChanged', function () {\n    if (jQuery(this).prop('checked')) {\n        set_form_online()\n    } else {\n        set_form_slip()\n    }\n});\n\nfunction set_form_online() {\n    jQuery('.online').show()\n    jQuery('input[name=\"email\"]').attr('required', true);\n    submit_button.innerHTML = text_submit_button_online;\n}\n\nfunction set_form_slip() {\n    jQuery('.online').hide()\n    jQuery('input[name=\"email\"]').attr('required', false);\n    submit_button.innerHTML = text_submit_button_slip;\n}\n\nset_form_online()\n\n\nwindow.addEventListener(\"DOMContentLoaded\", (event) => {\n    const observer = new MutationObserver((e)=> {\n        let is_slip = payment_method.checked;\n        if(is_slip)\n            set_form_slip();\n        else\n            set_form_online();\n    });\n    observer.observe(payment_parent, {attributes:true,subtree: true});\n});\n\nqr_bill_print.addEventListener(\"click\", (e) => {\n    let el = document.createElement(\"div\");\n    el.innerHTML = qr_bill_svg.innerHTML;\n    el.style.border = \"1px dashed black\";\n    let content = \"<html><body>\" + el.outerHTML + \"<\/body><\/html>\";\n\n    let print_window = window.open(\"\");\n    print_window.document.write(content);\n    print_window.document.close();\n    print_window.focus();\n    print_window.print();\n    print_window.close();\n});\n\n\nasync function fetch_payment_slip() {\n    let additional_informations = \"\";\n    let amount = 0;\n\n    if(type_flag == \"csp\" && jQuery('input[name=\"wert\"]').attr('required') != 'required')\n    {\n        amount = parseFloat(donation_form.fonds.selectedOptions[0].dataset.v);\n        additional_informations += donation_form.fonds.selectedOptions[0].innerText;\n    }\n    else\n    {\n        amount = parseFloat(donation_form.wert.value);\n    }\n\n    if(type_flag == \"frontend\" || type_flag == \"cadeau\")\n    {\n        additional_informations += donation_form.fonds.selectedOptions[0].innerText;\n    }\n    if(type_flag == \"cadeau\")\n    {\n        additional_informations += \" \" + donation_form.refenfant.value;\n    }\n\n\n    data = {\n        \"debtor\": {\n            \"name\": donation_form.pname.value,\n            \"street\": donation_form.street.value,\n            \"no\": \"\",\n            \"zip\": donation_form.zipcode.value,\n            \"city\": donation_form.city.value,\n            \"country\": donation_form.country.value,\n        },\n        \"amount\": amount,\n        \"additional_informations\": additional_informations,\n        \"language\": available_languages.includes(language) ? language : \"en\",\n    };\n\n    options = {\n        method: \"POST\",\n        mode: \"cors\",\n        cache: \"no-cache\",\n        credentials: \"same-origin\",\n        headers: {\n            \"Content-Type\": \"application\/json\"\n        },\n        redirect: \"follow\",\n        referrerPolicy: \"no-referrer\",\n        body: JSON.stringify(data)\n    };\n\n    const response = await fetch(qr_bill_url, options)\n    .then(response => response.text())\n    .then(function(data){\n        qr_bill.hidden = false;\n        qr_bill_svg.innerHTML = data;\n        let svg = qr_bill_svg.children[0];\n        svg.style.width = \"90%\";\n        svg.style.height = \"auto\";\n        qr_bill_svg.scrollIntoView({ behavior: \"smooth\", block: \"center\", inline: \"center\"});\n    });\n}\n\nsubmit_button.addEventListener(\"click\", (e) => {\n\n    if(!donation_form.checkValidity()) {\n        donation_form.reportValidity();\n        return;\n    }\n\n    if(donation_form.payment_method.value == \"online\") {\n        donation_form.submit();\n    }\n    else if (donation_form.payment_method.value == \"slip\") {\n        fetch_payment_slip();\n    }\n\n});\n\n\/\/ donation_form.pname.setCustomValidity(\"Name erforderlich\");\n\/\/ donation_form.street.setCustomValidity(\"Strasse erforderlich\");\n\/\/ donation_form.zipcode.setCustomValidity(\"PLZ erforderlich\");\n\/\/ donation_form.city.setCustomValidity(\"Stadt erforderlich\");\n\/\/ donation_form.country.setCustomValidity(\" L\u00e4nd erforderlich\");\n\/\/ donation_form.email.setCustomValidity(\"E-Mail-Adresse erforderlich\");\n<\/script>\n\n<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><div class=\"section section_full_width\" ><div id=\"pg-9467-2\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-9467-2-0\"  class=\"panel-grid-cell\" ><div id=\"panel-9467-2-0-0\" class=\"so-panel widget widget_image-slider panel-first-child panel-last-child\" data-index=\"2\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-image-slider so-widget-image-slider-image-slider-style-d75171398898-9467\"\n\t\t\t\n\t\t>\n<div class=\"slick-slider slick-carousel \" data-slickSlides=\"1\" data-slickScroll=\"1\" data-slickArrows=\"true\" data-slickDots=\"true\">\n\n  \n  <div class=\"slide\">\n    <div class=\"slide-image position-top\" style=\"background-image: url(https:\/\/compassion.ch\/wp-content\/uploads\/2016\/07\/KTHIES-81.jpg);\"><\/div>\n    <div class=\"slide-content-wrapper\">\n      <div class=\"slide-content\">\n              <\/div>\n    <\/div>\n  <\/div>\n\n  \n<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Jetzt Spenden Mit deiner Spende unterst\u00fctzt du die Arbeit von Compassion und hilfst dabei, das Leben von Kindern aus \u00e4rmsten Verh\u00e4ltnissen zu verbessern. Deine Spende ist in der Schweiz steuerabzugsberechtigt. Vielen Dank f\u00fcr deinen Beitrag!<\/p>\n","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"footnotes":""},"class_list":["post-9467","page","type-page","status-publish","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/compassion.ch\/de\/wp-json\/wp\/v2\/pages\/9467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/compassion.ch\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/compassion.ch\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/compassion.ch\/de\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/compassion.ch\/de\/wp-json\/wp\/v2\/comments?post=9467"}],"version-history":[{"count":0,"href":"https:\/\/compassion.ch\/de\/wp-json\/wp\/v2\/pages\/9467\/revisions"}],"wp:attachment":[{"href":"https:\/\/compassion.ch\/de\/wp-json\/wp\/v2\/media?parent=9467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}