Formular je nach Browsersprache laden

Dieses Skript ermittelt die Browsersprache des Benutzers und zeigt dann das passende Formular (per Ajax) dazu an. Alternativ kann man auf ein Flaggen-Symbol klicken, um die Sprache per Hand zu ändern.

Quelltext:  index.htm  AusblendenKopierenLinkZeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Formular je nach Browsersprache laden</title>

    <style>
      body {
        background-color: white;
      }
      
      div#ausgabe {
        height: 250px;
      }

      div#titel {
        font-size: 1.4em;
        margin: 15px 0;
        text-align: center;
      }

      div#titeltext {
        font-size: 1em;
        margin-bottom: 15px;
        text-align: center;
      }

      form#form {
        background-color: rgb(239, 239, 239);
        border-radius: 10px;
        padding: 5px 0 5px 20px;
        width: 85%;
      }

      label {
        display: inline-block;
        width: 75px;
      }

      nav#sprache {
        text-align: right;
        word-spacing: 5px;
      }

      nav#sprache span {
        color: royalblue;
        cursor: pointer;

        &:hover {
          text-decoration: underline solid royalblue 1px;
        }
      }

      span#de::before {
        content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAQCAIAAABocZPBAAAAK0lEQVR42mNhoDZgGTWROiYuoLqJ8aMxQx0T7alu4gSqm/if6ib+G4FxDQCrvgQMDtUvhwAAAABJRU5ErkJggg==");
        vertical-align: Middle;
      }
      span#en::before {
        content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAQCAIAAACKrYi4AAABrklEQVR42q2TT0sCURTFnx+jQAiCkpBKkMAwnCToC0htBMVSE3WRKZajFNk/EoaWtY2KMAkkhYpWfoIWbVsJpSlBNWGEenqvGbLIarIOZ/HecO+Pw7t3yH0dCeGMkFxT1wHwIRDC7HPT61eVy7P794sr2NqkHQQHSVpaFGvCxllr0NXwzlWAh14HjoPZTE3Q1QHjILJHtKH8hLXEqXLoYmj3JhrHiAnn53gnIsxul/xBaLsxaMBhirYVHqpvqRk02gQqp9NpMWSU0r03kYqEyN71pA/tbTAYJESpLMaXMgwanpGhU056XXBvFcPz6OtBYh2iiGYitK6pJRA7BAIy1OmUvtcvLuo+3+eAjaTsyajngghOs36eRyTCDn6/7N4+GarRIBZDLoefROQGJVarv0n3MakSHH3ofB6KxWbK7HXBNQG7HTYbHA54PPB64XbBamVEZQEbSb8aFJuJIKAlySu1tHqcv31moHQaZg76/tro6G8DNpIuxDN02xnu9ATDHIwD1ctL/E2vm5g9AmeiP1XFMtZyuo/Tp7hOdSWZEu8e8U8iFct4Qd0Fleof/QJLOk8VIGmh+QAAAABJRU5ErkJggg==");
        vertical-align: Middle;
      }
      span#fr::before {
        content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAIAAACDRijCAAAAMElEQVR42mNQYkhDQ/IMKdrcOU8evPmPCT58+M/P/5+BARMxjBo0atCoQaMGUWYQAIbHPp/vBfLQAAAAAElFTkSuQmCC");
        vertical-align: Middle;
      }
    </style>


    <script>
      window.addEventListener("DOMContentLoaded", () => {
        // Sprachbuttons fur die Navigation
        document.querySelectorAll("#de, #en, #fr").forEach((element) => {
          document.getElementById(element.id).addEventListener("click", (e) => {
            ausgabe(e.target.id);
          });
        });

        // Browsersprache
        var lang = window.navigator.languages
          ? window.navigator.languages[0]
          : null;

        lang =
          lang ||
          window.navigator.language ||
          window.navigator.browserLanguage ||
          window.navigator.userLanguage;

        if (lang.indexOf("-") !== -1) {
          lang = lang.split("-")[0];
        }

        if (lang.indexOf("_") !== -1) {
          lang = lang.split("_")[0];
        }

        const languages = ["de", "en", "fr"];
        if (!languages.includes(lang)) {
          lang = "de"; // Default-Wert
        }

        ausgabe(lang);
      });

      // Ausgabe
      const ausgabe = (lang) => {
        fetch(`form_sprache.php?lang=${lang}`, {
          method: "GET",
        })
          .then((antwort) => {
            return antwort.text();
          })
          .then((antwort) => {
            document.querySelector("#ausgabe").innerHTML = antwort;
          });
      };
    </script>

  </head>
  <body>
    <nav id="sprache">
      <span id="de" title="Deutsch"></span>
      <span id="en" title="English"></span>
      <span id="fr" title="Français"></span>
    </nav>
    <div id="ausgabe"></div>
  </body>
</html>

Quelltext:  form_sprache.php  AusblendenKopierenLinkZeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<?php
if (isset($_GET["lang"])):

    
// session_start();
    // $_SESSION["sprache"] = $_GET["lang"];

    
switch ($_GET["lang"]):

        
// Deutsch
        
case 'de':
            
$titel 'Schreiben Sie uns';
            
$titeltext 'Hier können Sie ein kostenloses Angebot anfordern.';
            
$name 'Name';
            
$telefon 'Telefon';
            
$absenden 'Absenden';
            break;

        
// English
        
case 'en':
            
$titel 'Write to us';
            
$titeltext 'You can request a free quote here.';
            
$name 'Name';
            
$telefon 'Telephone';
            
$absenden 'Submit';
            break;

        
// Français
        
case 'fr':
            
$titel 'Écrivez-nous';
            
$titeltext 'Vous pouvez demander un devis gratuit ici.';
            
$name 'Nom';
            
$telefon 'Téléphone';
            
$absenden 'Dépêche';
            break;

    endswitch;

    echo 

    <div id="titel">$titel '</div>
    <div id="titeltext">$titeltext '</div>

    <form id="form" action="" method="post">

    <p>
    <label for="name">$name ':</label>
    <input typ="text" value="" name="name" id="name" required>
    
    </p>

    <p>
    <label for="tel">$telefon ':</label>
    <input typ="tel" name="tel" id="tel" required>
    </p>

    <input type="hidden" name="sprache" value="' $_GET["lang"] . '">

    <p>
    <button type="submit">$absenden '</button>
    </p>

    </form>
    ';
    exit;
endif;

Siehe auch: Browser-Sprachumschaltung

Alternativ gäbe es noch die Möglichkeit, nur die Wörter im Formular per JavaScript (und eventuell JSON) austauschen zu lassen - Mit JSON Daten zwischen JavaScript und PHP austauschen.