kostenloser Webspace werbefrei: lima-city


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

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    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

    Kostenloser Webspace von willstdueswissen

    willstdueswissen hat kostenlosen Webspace.

    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.

    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?

Über lima-city

Login zum Webhosting ohne Werbung!