• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Formulare in Fließtext wiederholen

Metus

Neues Mitglied
Hallo!

Ich möchte folgendes machen:

Ich möchte den User auf einer Seite in ein Formularfeld etwas eingeben lassen (z.B. den Namen des Protagonisten einer Geschichte). Dieser eingegeben Name soll dann in der bereits geschriebenen Geschichte in vorher definierten Feldern (nämlich die, in welchen der NAme vorkommen soll) übernommen werden. Das ganze sollte im Fließtext geschehen und automatisch umgebrochen werden, so dass der im o.g. Beispiel genanne Name auch beispielsweise 50 Zeichen lang sein könnte, ohne dass ein Formularfeld im FließText die Hälfte schluckt.

Also in der Art:



Der Name des Protagonisten: [FormularfeldName]
Wie heißt die Prinzessin in deiner Geschichte: [FormularfeldPrinzessin]


Vor langer Zeit lebte eins ein König namens [FormularfeldName]. Seine Tochter [FormularfeldPrinzessin] konnte gut mit Word 2010 umgehen. Das beeindruckte [FormularfeldName] sehr

smile.gif

Ich habs schon in Word probiert, das hat nicht so recht geklappt.

Das Problem an der Geschichte: ich kann nur sehr sehr rudimentär html. Ich könnte es aber vielleicht mit Dreamweaver-ähnlichen Baukastensystemen schaffen, wenn ihr mir ein paar Hinweise gebt, welche Funktionen ich mir näher ansehen sollte. Die Funktionen die ich machen will, sind ja relativ klar umgrenzt.

Also noch mal in der Zusammenfassung welche Funktionen mir wichtig sind:

  • Formularfelder die den Input in einer Variable speichern
  • Definierte Bereiche, die die entsprechenden Variablen aus den Formularfeldern abrufen
  • Die Variablen werden in den Fließtext eingefügt und Zeilen automatisch umgebrochen
  • Im Idealfall ist das ganze am Ende per PDF Speicherbausteine und/oder auf einem Server speicherbar

Ich danke euch für eure Hilfe und Hinweise!
 
Werbung:
Etwas JS Magic ...
HTML:
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
</head>
<body ng-app>
  <div class="container">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Name des Protagonisten" ng-model="protagonist">
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Name der Prinzessin" ng-model="prinzessin">
    </div>
    <p>
      Vor langer Zeit lebte eins ein König namens {{protagonist}}. Seine Tochter {{prinzessin}} konnte gut
      mit Word 2010 umgehen. Das beeindruckte {{protagonist}} sehr.
    </p>
  </div>
</body>
</html>
 
Werbung:
Etwas JS Magic ...
HTML:
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
</head>
<body ng-app>
  <div class="container">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Name des Protagonisten" ng-model="protagonist">
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Name der Prinzessin" ng-model="prinzessin">
    </div>
    <p>
      Vor langer Zeit lebte eins ein König namens {{protagonist}}. Seine Tochter {{prinzessin}} konnte gut
      mit Word 2010 umgehen. Das beeindruckte {{protagonist}} sehr.
    </p>
  </div>
</body>
</html>


Super cool! Genau das suche ich und kann es dank meiner Basis Kentnisse erst mal für mich nutzen :)

Sehr toll! Vielen Dank!
 
Zurück
Oben