Text rechts neben einem Input-Feld einer Form einblenden

Einblenden eines Elements rechts von einem Input Element (Form)

Eine Scriptcase-Form enthält meist mehrere Input-Felder in denen Daten eingegeben werden.

Hier zeige ich wie man mit einer JavaScript-Funktion rechts daneben einen beliebigen HTML-Text anzeigen kann.

Die normale Form zeigt z.B. drei Eingabefelder an:

Bisherige Eingabefelder in der Form

Das Ziel dieses Beispiels ist es rechts neben dem Creditlimit den Text Creditlimit is low einzublenden, wenn in dem Feld ein Wert kleiner als 100 eingegeben wird.

Dazu fügen wir unter Programming > JavaScriptMethods > New Method einen neuen JS Code ein:

Die Funktion nennen wir dabei add_after_id  und geben ihr die Parameter: add_after_element_id  und add_html

Das sieht dann in Scriptcase  in etwa wie folgt aus:

js_code

 

Zum Einblenden des Textes verwenden wir einen Ajax Event creditlimit_onChange:

 

ajax_event

Beachten Sie, dass der Parameter id_sc_field_creditlimit  der ID des Feldes creditlimit entspricht.
Diese kann man z.B. mit dem Analyse-Tool des Chrome-Browsers ermitteln.

Wird dann ein Creditlimit von 90 eingegeben, so erscheint die Warnung:

input_with_message

Tipp:

Mit derselben Technik kann man diesen Text natürlich auch wieder ausblenden, oder

  • Buttons dynamisch neben dem Input-Feld einblenden
  • Grafiken konditionell anzeigen
  • Links einblenden
  • eben halt beliebigen HTML-Inhalt anzeigen.

Fragen oder Anregungen dazu

Schreiben Sie mir unter email@GunterEibl.de

 

Veröffentlicht in Scriptcase Sniplets Getagged mit: , , ,