kostenloser Webspace werbefrei: lima-city

Per Javascript neue Textfelder einfügen, wenn alle voll sind

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   c143

   c143 hat kostenlosen Webspace.

   19:08, 3.1.2014

   Hallo,
   ich habe folgende input boxen:
   
   

   <div class="input_container" id="input_container">
   	<input id="1" class="option" type="text" placeholder="Option 1" />
   	<input id="2" class="option" type="text" placeholder="Option 2" />
   	<input id="3" class="option" type="text" placeholder="Option 3" />
   </div>

   
   
   Und eine Funktion um eine neue hinzuzufügen:
   
   

   function add_input(){
   	options = document.getElementsByClassName('option');
   	next_ph = options.length + 1;
   
   	var input = document.createElement('input');
   		input.setAttribute('id', next_ph);
   		input.setAttribute('class', 'option');
   		input.setAttribute('type', 'text');
   		input.setAttribute('placeholder', 'Option '+next_ph);
   	input_container.appendChild(input);
   }

   
   
   Das funktioniert auch gut, nur fehlt mir jetzt noch der Auslöser der Funktion. Ich hätte gerne, dass sobald etwas in der 3. Box steht, also alle ausgefüllt sind sofort durch die Funktion eine 4. kommt. Und sobald diese 4. dann auch ausgefüllt ist kommt die 5. usw. Theoretisch eine unendliche Anzahl von Boxen möglich.
   
   Ich habe es durch einen EvenListener versucht, aber der bleibt dann auf dem Stand der letzen Box und ich konnte nicht herausfinden, wie ich einen Listener immer auf die letze Box mache.
   
   Hat jemand eine Idee?
   
   Gruss
   
   Beitrag zuletzt geändert: 3.1.2014 19:08:47 von c143

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. willstdueswissen

   

   willstdueswissen hat kostenlosen Webspace.

   22:06, 3.1.2014

   Ich hätte ein Vorschlag mit onchange wenn z.B. etwas in dem ersten verändert wird also von leer in voll dann wird eine funktion aufgerufen natürlich müsste man überprüfen ob schon das zweite existiert damit nicht beim weiteren ändern ein drittes hinzugefügt.
   
   Was dann in etwa so aussieht
   

   <div class="input_container" id="input_container">
   	<input id="1" class="option" type="text" placeholder="Option 1" onchange='add_input(this);'/>
   </div>

   
   
   Und eine Funktion um eine neue hinzuzufügen:
   
   

   function add_input(this){
   if (!document.getElementById((this.id + 1))){
   	options = document.getElementsByClassName('option');
   	next_ph = options.length + 1;
   
   	var input = document.createElement('input');
   		input.setAttribute('id', next_ph);
   		input.setAttribute('class', 'option');
   		input.setAttribute('type', 'text');
   		input.setAttribute('placeholder', 'Option '+next_ph);
                   input.setAttribute('onchange', 'add_input(this)');
   	       input_container.appendChild(input);
   }
   }

   
   
   Beitrag zuletzt geändert: 3.1.2014 22:13:00 von willstdueswissen
4. Autor dieses Themas

   c143

   c143 hat kostenlosen Webspace.

   13:57, 4.1.2014

   willstdueswissen schrieb:
   Ich hätte ein Vorschlag mit onchange wenn z.B. etwas in dem ersten verändert wird also von leer in voll dann wird eine funktion aufgerufen natürlich müsste man überprüfen ob schon das zweite existiert damit nicht beim weiteren ändern ein drittes hinzugefügt.
   
   Was dann in etwa so aussieht
   

   <div class="input_container" id="input_container">
   	<input id="1" class="option" type="text" placeholder="Option 1" onchange='add_input(this);'/>
   </div>

   
   
   Und eine Funktion um eine neue hinzuzufügen:
   
   

   function add_input(this){
   if (!document.getElementById((this.id + 1))){
   	options = document.getElementsByClassName('option');
   	next_ph = options.length + 1;
   
   	var input = document.createElement('input');
   		input.setAttribute('id', next_ph);
   		input.setAttribute('class', 'option');
   		input.setAttribute('type', 'text');
   		input.setAttribute('placeholder', 'Option '+next_ph);
                   input.setAttribute('onchange', 'add_input(this)');
   	       input_container.appendChild(input);
   }
   }

   
   
   Das ist die alte Version von EvenListener. Aber ich habe jetzt eine Lösung gefunden. Ich lösche jetzt immer zuerst den alten und füge einen neuen hinzu, das funktioniert.

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?