HTML-Formular Test mit JavaScript

Für den Test von verschiedenen HTML-Formular Aus- bzw. Eingaben, habe ich unter Verwendung einiger Code-Schnipsel aus dem Netz ein Testscript für die Übergabe mit der GET-Methode entwickelt. Dieser muss direkt in der entsprechenden Seite eingebettet werden und schreibt die aus der URL gewonnen Ergebnisse in das HTML-Dokument.

Ein Funktionsbeispiel des Codes kommt unter chartmann.com/html-form-test/ zur Verwendung. Erweitert man die URL um einige Parameter, so werden diese auf der Seite angezeigt: chartmann.com/html-form-test/?parm1=test&parm2=7&parm2=0

Unter anderem kommt dient die Seite als Test für den Timepicker mit HTML und CSS zum Einsatz.

Nutzung bestimmter Sonderzeichen in WordPress

Um den Code auch ohne weiteres innerhalb einer WordPress-Seite bzw. Post nutzen zu können, muss an manchen Stellen auf Unicode-Character zurückgegriffen werden. Diese würden sonst von WordPress zu HTML-Entities transformiert. Insbesondere &, +  und < bzw. > müssen zwingend als Steuerzeichen eingefügt werden.

  • & = Unicode U+0026
  • + = Unicode U+002B
  • < = Unicode U+003C
  • > = Unicode U+003E

JavaScript:

// Funktion zum nummerischen Sortieren von Arrays
function numsort(a, b) {
  return a - b;
}
// Objekt zur paarweisen Speicherung
var query_string = {};
// Suche der aufgerufenen URL (ab ?)
var query = window.location.search.substring(1);
// Falls query vorhanden
if(query != "") {
  // Suche-String jeweils bei "&" (Unicdoe U+0026) teilen
  var parms = query.split("\u0026");
  // Für jeden Parameter
  for (var i=0;i<parms.length;i++) {
    // Parameter bei "=" (Unicode U+003D) teilen (Name und Wert)
    var pair = parms[i].split("\u003D");
    // Falls erster Eintrag mit Parametername
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = pair[1];
    // Falls zweiter Eintrag mit Parametername
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;
    // Falls dritter und weiterer Eintrag mit Parametername
    } else {
      query_string[pair[0]].push(pair[1]);
    }
  }
  // HTML-Element <ul>
  document.write("\u003Cul\u003E");
  // Für jede Eigenschaft im Objekt query_string
  for (var key in query_string) {
    if (query_string.hasOwnProperty(key)) {
      // Erstelle Listeneintrag <li> mit Parametern und deren Wert(en)
      document.write("\u003Cli\u003E" + key + " = " + ((typeof query_string[key] === "string" || query_string[key].length < 1) ? query_string[key].replace(/\u002B/g," ") : query_string[key].sort(numsort)) + "\u003C/li\u003E");
    }
  }
  // HTML-Element </ul>
  document.write("\u003C/ul\u003E");
}
// Falls keine Suche in URL gefunden
else {
  document.write("\u003Cp\u003EKeine URL-Parameter gefunden.\u003C/p\u003E");
}

Verweise

 

Schreibe einen Kommentar

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