Formular mit 1 Klick mit Demo Inhalte ausfüllen

von | Aug 4, 2020 | Allgemein, Technik | 0 Kommentare

Schlagwörter: Javascript

Es gibt glaub keine “Programmiersprache” – äxgüsi wenn ich das jetzt so (falsch) bezeichne – die so verhasst ist wie Javascript – ok ausser ASP. Aber Javascript ist trotzdem eine der nützlichsten und Sprachen die es gibt. Immerhin gibts darum so dinge wie Popup-Fenster, Formular Verifizierung usw.

Ich habe heute einen Code für euch, der sehr praktisch ist und den ich gerade wieder eingesetzt habe.

Ich habe ein Tool programmiert, das mehrere Formulare drin eingebaut hat, die viele Felder haben – zum Teil mehr als 20 Felder in 1 Formular. Nun gibts viele User, die beim Ausfüllen des Formular, deswegen komplett überfordert sind und in eine Art “Schockstarre” verfallen und nicht mehr weiter wissen. Aus diesem Grund wollte ich einen Button einbauen, mit dem man ne Art Demo machen kann. Klickt einer auf diesen Link, füllt sich das Formular komplett automatisch aus und verwendet werden Demoinhalte. So kann der User nämlich selbst herausfinden, was wo versteckt ist und was die Felder einzeln bedeuten.

Und hier ist der Code dafür. Zuerst braucht man ein HTML Formular und den vorbereiteten Link.

HTML Formular

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<a href="#" onClick="autoFill(); return true;" >Click to Autofill</a>
<form>
  <p>
    <label>Text Input: </label>
    <input type="text" id="input1">
  </p>
  <p>
    <label>Dropdown Input: </label>
    <select id="input2">
      <option value="Dropdown1">First Option</option>
      <option value="Dropdown2">Second Option</option>
      <option value="Dropdown3">Third Option</option>
    </select>
  </p>
  <p>
    <label>Radio Input: </label>
       <input type="radio" name="input3" value="Radio1">First Radio
       <input type="radio" name="input3" value="Radio2">Second Radio
       <input type="radio" name="input3" value="Radio3">Third Radio
  </p>
</form>

Nun müsst ihr einfach schauen, dass ihr jedem Feld und eurem Javascript Befehl jeweils die korrekte ID zuweist und dann könnt ihr es abspeichern.

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
  function autoFill() {
    document.getElementById('input1').value = "My Text Input";
    document.getElementById('input2').value = "Dropdown2";
 
    var radioElements = document.getElementsByName("input3");
 
    for (var i=0; i<radioElements.length; i++) {
      if (radioElements[i].getAttribute('value') == 'Radio3') {
        radioElements[i].checked = true;
      }
    }
  }
</script>

Es sieht komplizierter aus als es eigentlich ist – aber es ist voll genial und sehr praktisch.

Ich für meinen Teil habe diesen Code hier veröffentlicht, damit ich Ihn NIE WIEDER VERGESSE…. und das solltet ihr auch nicht 🙂

0 Kommentare

Einen Kommentar abschicken

Du kannst auf Fediverse-Profile verlinken, indem du fl:@benutzername in deinem Kommentar eingibst.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert