Ergebnis 1 bis 9 von 9
  1. #1
    js-fan ist offline Jungspund
    registriert
    16-09-2009
    Beiträge
    14

    Question Formularerkennung

    Hallo jswelt-Gemeinde!

    Mein erster Beitrag beginnt direkt mit einer Frage
    Wie dem Titel zu entnehmen ist, möchte ich fragen, ob in Javascript eine Formularerkennung möglich ist. In anderen Worten: Gibt es eine Möglichkeit, dass Javascript Felder wie <input type="text"> oder <input type="button"> erkennt und ein <form> bzw. </form> darüber bzw. darunter stellt?

    Ich möchte nämlich, dass Benutzer Textfelder, Checkboxen, Buttons, etc. erzeugen können (in einer Textarea). Am Ende (konkret: Beim Klick auf den Button -Abschließen-) soll Javascript alle Formularfelder erkennen und zwischen <form> setzen.

    Ich dachte, es wäre möglich das mit Indexof() zu realisieren und nach type="text" oder type="button" zu suchen. Dabei tauchen aber zwei Probleme auf:

    1) Wie gebe ich per Javascript den Befehl, den Cursor vor das erste <input type="text"> (bzw. input type="button") zu stellen und ein <form> zu schreiben

    2) Wie erkennt Javascript das erste Formularfeld und das letzte Formularfeld? Mit lastindexof() lässt sich ja die letzte Position eines Zeichens ermitteln. Nur: Wie kann ich auch hier den Cursor hinter das > des letzten input-Tags bringen?


    Ich hoffe, meine Fragestellung ist nicht zu unverständlich formuliert. Vielleicht kann mir wer ja einen Hinweis geben oder ein Beispielscript posten!

    Bin auf alle Fälle für Anregungen dankbar!

    Gruß, jsfan

  2. #2
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: Formularerkennung

    am besten machst du sowas mit RegExp (Reguläre Ausdrücke).
    Code:
    var str = "abcdefgh<input type='text' />asjdh<input type='button' />";
    while(match) {
      var match = str.match(/(<input.*>)/);
      if(match) {
        str = str.replace(new RegExp(match),"<form>"+match+"</form>"); 
      }
    }
    nicht getestet

  3. #3
    js-fan ist offline Jungspund
    registriert
    16-09-2009
    Beiträge
    14

    AW: Formularerkennung

    Danke, Junkee[], für deine Hilfe! Allerdings gibt es ein Problem:

    Code:
    <script>
    
    function mache() {
    
    var str = "abcdefgh<input type='text' />asjdh<input type='button' />";
    while(match) {
      var match = str.match(/(<input.*>)/);
      if(match) {
       document.formular.textarea.value += str.replace(new RegExp(match),"<form>"+match+"</form>"); 
      }
    }
    
    }
    
    </script>
    
    <form name="formular">
        <input type="button" value="Generieren" onclick="mache();"><br>
        <textarea name="textarea"></textarea>
     </form>
    Dieses Script müsste also beim Klick auf den Button folgendes in der Textarea ausgeben: <form>abcdefgh<input type='text' />asjdh<input type='button' /></form> - oder?

    Das tut es aber nicht, es tut gar nichts. Mir fällt aber auch nicht auf, warum es keine Ausgabe gibt, Syntax- oder anderer Fehler liegt laut Fehlerkonsole auch nicht vor...

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Formularerkennung

    1. <script type="text/javascript">
    2. match ist am Anfang der Schleife noch nicht definiert - er kommt also nie in die Schleife rein -> entweder vorher belegen oder do{...}while(...);
    3. wenn match belegt ist wird es immer den selben Wert annehmen => Endlosschleife - du suchst wahrscheinlich
    Code:
    var re = /<input.*>/g;
    ...
    var match = re.exec(str);
    4. die Ersetzung funktioniert so nicht: lass das "new RegExp" weg - du hast ja schon den genauen Code.

  5. #5
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: Formularerkennung

    ...solangsam produziere ich nurnoch hirnrissigen code... sry!

  6. #6
    js-fan ist offline Jungspund
    registriert
    16-09-2009
    Beiträge
    14

    AW: Formularerkennung

    Hallo kkapsner und Danke für deine Hilfe! Ich blicke immer noch nicht ganz durch und versuche das Ganze einmal kurz als Text zusammen zu fassen:

    1) Die Variable str beinhaltet den zu durchsuchenden Text.

    2) Mit der Variable re definierst du, wonach gesucht wird (g heißt, der String wird so lange durchsucht, bis die Angabe nicht mehr gefunden wird, oder?).

    3) Mit var match = re.exec(str) wird die Suche in der Variable str eingeleitet und in match gespeichert. In match müsste jetzt "<input type='text'/>asjdh<input type='button'/>" stehen.

    4) Durch str.replace(re,"<form>"+match+"</form>"); wird die Variable str mit dem Inhalt von match ersetzt.

    Das Ganze sieht dann so aus und funktioniert auch:

    Code:
    <script type="text/javascript">
    
    function mache() {
    
    var str = "abcdefgh<input type='text'/>asjdh<input type='button'/>";
    var re = /<input.*>/g;
    var match = re.exec(str);
    
    document.formular.textarea.value = str.replace(re,"<form>"+match+"</form>"); 
    
      }
    
    </script>
    
    <form name="formular">
        <input type="button" value="Generieren" onclick="mache();"><br>
        <textarea name="textarea" cols="50" rows="10"></textarea>
     </form>
    Habe ich das so richtig verstanden?

    Gruß, js-fan

  7. #7
    js-fan ist offline Jungspund
    registriert
    16-09-2009
    Beiträge
    14

    AW: Formularerkennung

    Bin gerade auf eine Merkwürdigkeit drauf gekommen: Wenn ich einen Zeilenumbruch in die Variable einfüge...

    Code:
    var str = "abcdefgh<input type='text'/>asjdh\n<input type='button'/>";
    ... dann bekomme ich das als Ergebnis:

    Code:
    abcdefgh<form><input type='text'/></form>asjdh
    <form><input type='text'/></form>
    Warum stört ihn der Umbruch? Lässt sich das "doppelte-<form>" umgehen?

    Gruß, js-fan

  8. #8
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Formularerkennung

    Das wäre meine Umarbeitung:
    Code:
    function mache() {
    	var str = "abcdefgh<input type='text' />\nasjdh<input type='button' />";
    	var re = /<input(?:.|\n)*>/g;
    	do{
    		var match = re.exec(str);
    		if(match) {
    			str = str.replace(match,"<form>"+match+"</form>"); 
    		}
    	}
    	while(match);
    	
    	document.formular.textarea.value = str;
    }
    Wobei sich mir die Frage aufdrängt: warum so umständlich? Was wäre so schlimm, wenn der ganze Text von <form> umschlossen werden würde, wenn ein <input> vorkommt?

  9. #9
    js-fan ist offline Jungspund
    registriert
    16-09-2009
    Beiträge
    14

    AW: Formularerkennung

    Also danke kkapsner, jetzt funktioniert es wirklich einwandfrei.

    Stimmt, es wäre natürlich möglich, einfach am Anfang und am Ende eines Strings in der input vorkommt ein <form> zu setzen aber wenn z.B. ein sehr langer Text vor dem ersten <input type=""> steht, sieht es meiner Meinung nach besser aus, wenn Javascript "intelligent" genug ist, nicht auch den Text ins form zu nehmen!

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •