• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] jQuery: Textboxen dynamisch hinzufügen

C

chpo7234

New member
Hallo Leute,

mein Plan ist folgender:
wenn jemand einen Text in die Textbox eingibt, denn soll eine weitere Textbox an gehangen werden. Wenn allerdings schon eine weitere Textbox an gehangen wurde, denn soll nichts passieren.

Beispiel:
Eingabe in Textbox1. Textbox2 schon vorhanden? Ja => Nichts tun. Nein => Textbox2 erstellen
Eingabe in Textbox2. Textbox3 schon vorhanden? Ja => Nichts tun. Nein => Textbox3 erstellen

Meine bisher (falsche) Funktion dafür sieht so aus:
HTML: 
<html>
  <head>
    <link href="CSS/style.css" type="text/css" rel="stylesheet" />
    <script src="scripts/jquery-latest.js" type="text/javascript"></script>
    <script language="javascript">
      function addTbox(tboxId){
        $(document).ready(function() {
          if (typeof tbNumber == 'undefined') { tbNumber=0;}
 
          if (!document.getElementById('tboxParents' + tbNumber + 1)) {
            tbNumber++;
            var tboxId = 'tboxParents' + tbNumber;
            var newTbox = "<input type='text' id='" + tboxId + " onkeypress=addTbox('" + tboxId + "')>";
            $("#tboxes").append(newTbox);
 
          }
        });
      }
    </script>
  </head>
  
  <body>
    <form>
        <div id="tboxes">
          <input type="text" id="tboxParents0" onkeypress="addTbox('tboxParents0')">
        </div>
    </form>
  </body>
</html>

Dieser Code macht nun folgendes: er fügt bei JEDER Eingabe in Textbox0 weitere Textboxen hinzu. Bei Eingaben in die anderen Textboxen passiert nichts. Das Problem liegt an der Laufvariable "tbNumber" und der if-Abfrage. "tbNumber" erhöht sich stetig und somit ist die Bedingung immer erfüllt.

Hat an dieser Stelle jemand einen Tipp oder eine Code-Erweiterung für mich?

Lieben Gruß
 
Generell sind globale Variablen keine gute Idee. Wenn du das unbedingt über einen Counter realisieren willst/musst (der Ansatz von tsseh ist viel eleganter, robuster und erweiterbarer), solltest du ihn in einem Scope kapseln.
chpo7234 schrieb:
er fügt bei JEDER Eingabe in Textbox0 weitere Textboxen hinzu
Zum Vergrößern anklicken....
Ein Problem liegt in 'tboxParents' + tbNumber + 1. Lass dir das mal per alert() oder console.log() ausgeben... (Hinweis: Klammer können helfen.)
Und dann prüfst du in der Funktion ja gar nicht, aus welchem Element die Funktion heraus aufgerufen wurde. Den einzigen Parameter, den du übergibst, verwendest du noch nicht einmal...
chpo7234 schrieb:
Bei Eingaben in die anderen Textboxen passiert nichts.
Zum Vergrößern anklicken....
Das liegt daran, dass dein HTML invalide ist und deswegen der Eventlistener ignoriert wird. (Hinweis: Anführungszeichen)
chpo7234 schrieb:
Hat an dieser Stelle jemand einen Tipp oder eine Code-Erweiterung für mich?
Zum Vergrößern anklicken....
Code: 
<!DOCTYPE html>
<html>
  <head>
    <title>Append inputs</title>
    <link href="CSS/style.css" type="text/css" rel="stylesheet" >
    <script src="scripts/jquery-latest.js"></script>
  </head>
  
  <body>
    <form>
        <div id="tboxes">
          <input type="text" oninput="addTbox(0)">
        </div>
    </form>
    <script>
	var addTbox = function(){
		var tbNumber = 0;
		var boxes = jQuery("#tboxes");
		return function(lastNumber){
			if (lastNumber === tbNumber){
				tbNumber += 1;
				var newTbox = "<input type='text' oninput='addTbox(" + tbNumber + ")'>";
				boxes.append(newTbox);
			}
		}
	}();
    </script>
  </body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben