Ergebnis 1 bis 3 von 3
  1. #1
    kuehlmeister ist offline Grünschnabel
    registriert
    14-11-2006
    Beiträge
    2

    Input Boxen automatisch erstellen

    Moin,

    ich hab ein kleines Problem. Ich möchte auf meiner Seite mit einem Link (+) und (-) Input Boxen erstellen oder entfernen. Der soll pro Klick auf das + oder - jeweils 2 Boxen und 1 Select Feld erstellen oder löschen.

    ich krieg das soweit hin dass der mir eine box erstellt, nur kann ich der keine Attribute oder irgendwas zuweisen, das ich nachher in $_POST Variable (soll mit php ausgewertet werden) die elemente drin hab.

    Code:
    <form name='testform' id='testform' method='post' action=''>
    <input type='submit' name='submit' value='submit'>
    <script type='text/javascript'>
    
    	var newInputBox = document.createElement("input");
    	document.getElementById("testform").appendChild(newInputBox);
    	document.getElementsByTagName("input").createAttribute("text");
    	
    </script>
    was muss ich denn noch machen?? hab ne totale blockade im hirn

  2. #2
    pit-r Guest

    AW: Input Boxen automatisch erstellen

    Moin!
    Zitat Zitat von kuehlmeister
    nur kann ich der keine Attribute oder irgendwas zuweisen
    newInputBox.name='blah';
    newInputBox.id='blah';
    newInputBox.style.width='150px';
    newInputBox.readOnly=true;
    ...

    Du solltest aber Deinen Code in eine Funktion packen, die Du bei Bedarf aufrufst. So, wie Du es in Deinem Schnipsel hast wird das nix mit der Dynamik...

    Ahoi - Pit

  3. #3
    kuehlmeister ist offline Grünschnabel
    registriert
    14-11-2006
    Beiträge
    2

    AW: Input Boxen automatisch erstellen

    Zitat Zitat von pit-r Beitrag anzeigen
    Moin!newInputBox.name='blah';
    newInputBox.id='blah';
    newInputBox.style.width='150px';
    newInputBox.readOnly=true;
    ...

    Du solltest aber Deinen Code in eine Funktion packen, die Du bei Bedarf aufrufst. So, wie Du es in Deinem Schnipsel hast wird das nix mit der Dynamik...

    Ahoi - Pit
    jo danke hat geklappt, hab s zwar n bischen anders gemacht aber funzt

    Code:
    <script type='text/javascript'>
    
    		var newSpalte = document.createElement("td");
    			newSpalte.setAttribute("id","spalte1"+[0]);
    		document.getElementById("tabelle").appendChild(newSpalte);
    
    		var newInputBoxZaehler = document.createElement("input");
    			newInputBoxZaehler.setAttribute("type","text");
    			newInputBoxZaehler.setAttribute("id","zaehler"+[0]);
    			newInputBoxZaehler.setAttribute("name","zaehler"+[0]);
    			newInputBoxZaehler.setAttribute("value","");	
    		document.getElementById("spalte1"+[0]).appendChild(newInputBoxZaehler);
    		document.getElementById("spalte1"+[0]).appendChild(document.createElement("hr"));
    
    		
    		var newInputBoxNenner = document.createElement("input");
    			newInputBoxNenner.setAttribute("type","text");
    			newInputBoxNenner.setAttribute("id","nenner"+[0]);
    			newInputBoxNenner.setAttribute("name","nenner"+[0]);
    			newInputBoxNenner.setAttribute("value","");
    		document.getElementById("spalte1"+[0]).appendChild(newInputBoxNenner);
    
    		var newSpalte = document.createElement("td");
    			newSpalte.setAttribute("id","spalte2"+[0]);
    		document.getElementById("tabelle").appendChild(newSpalte);
    		
    		var newOperatorSelect = document.createElement("select");
    			newOperatorSelect.setAttribute("name","operator"+[0]);
    			newOperatorSelect.setAttribute("id","operator"+[0]);		
    		var newOperatorSelectEintrag1 = document.createElement("option");
    			newOperatorSelectEintrag1.setAttribute("value","addiere");
    			newOperatorSelectEintrag1.setAttribute("label","addiere");
    		var newOperatorSelectEintrag2 = document.createElement("option");
    			newOperatorSelectEintrag2.setAttribute("value","subtrahiere");
    			newOperatorSelectEintrag2.setAttribute("label","subtrahiere");			
    		var newOperatorSelectEintrag3 = document.createElement("option");
    			newOperatorSelectEintrag3.setAttribute("value","multipliziere");
    			newOperatorSelectEintrag3.setAttribute("label","multipliziere");
    		var newOperatorSelectEintrag4 = document.createElement("option");
    			newOperatorSelectEintrag4.setAttribute("value","dividiere");
    			newOperatorSelectEintrag4.setAttribute("label","dividiere");
    						
    		document.getElementById("spalte2"+[0]).appendChild(newOperatorSelect);
    		document.getElementById("operator"+[0]).appendChild(newOperatorSelectEintrag1);
    		document.getElementById("operator"+[0]).appendChild(newOperatorSelectEintrag2);
    		document.getElementById("operator"+[0]).appendChild(newOperatorSelectEintrag3);
    		document.getElementById("operator"+[0]).appendChild(newOperatorSelectEintrag4);
    		
    		var newSpalte = document.createElement("td");
    			newSpalte.setAttribute("id","spalte3"+[0]);
    		document.getElementById("tabelle").appendChild(newSpalte);
    
    		var newInputBoxZaehler = document.createElement("input");
    			newInputBoxZaehler.setAttribute("type","text");
    			newInputBoxZaehler.setAttribute("id","zaehler"+[1]);
    			newInputBoxZaehler.setAttribute("name","zaehler"+[1]);
    			newInputBoxZaehler.setAttribute("value","");	
    		document.getElementById("spalte3"+[0]).appendChild(newInputBoxZaehler);
    		document.getElementById("spalte3"+[0]).appendChild(document.createElement("hr"));
    
    		var newInputBoxNenner = document.createElement("input");
    			newInputBoxNenner.setAttribute("type","text");
    			newInputBoxNenner.setAttribute("id","nenner"+[1]);
    			newInputBoxNenner.setAttribute("name","nenner"+[1]);
    			newInputBoxNenner.setAttribute("value","");
    		document.getElementById("spalte3"+[0]).appendChild(newInputBoxNenner);
    		
    var k = 1;
    		
    function addInput()
    {
    	k = k + 1;
    	buildTextBox();
    }
    
    function subInput()
    {
    	removeTextBox();
    	k = k - 1;
    }
    
    function buildTextBox()
    {
    	var newSpalte = document.createElement("td");
    		newSpalte.setAttribute("id","spalte"+[k]);
    	document.getElementById("tabelle").appendChild(newSpalte);
    	
    	var newOperatorSelect = document.createElement("select");
    	var newOperatorSelect = document.createElement("select");
    		newOperatorSelect.setAttribute("name","operator"+[k]);
    		newOperatorSelect.setAttribute("id","operator"+[k]);		
    	var newOperatorSelectEintrag1 = document.createElement("option");
    		newOperatorSelectEintrag1.setAttribute("value","addiere");
    		newOperatorSelectEintrag1.setAttribute("label","addiere");
    		newOperatorSelectEintrag1.setAttribute("text","addiere");
    	var newOperatorSelectEintrag2 = document.createElement("option");
    		newOperatorSelectEintrag2.setAttribute("value","subtrahiere");
    		newOperatorSelectEintrag2.setAttribute("label","subtrahiere");			
    	var newOperatorSelectEintrag3 = document.createElement("option");
    		newOperatorSelectEintrag3.setAttribute("value","multipliziere");
    		newOperatorSelectEintrag3.setAttribute("label","multipliziere");
    	var newOperatorSelectEintrag4 = document.createElement("option");
    		newOperatorSelectEintrag4.setAttribute("value","dividiere");
    		newOperatorSelectEintrag4.setAttribute("label","dividiere");
    	
    	document.getElementById("spalte"+[k]).appendChild(newOperatorSelect);
    	document.getElementById("operator"+[k]).appendChild(newOperatorSelectEintrag1);
    	document.getElementById("operator"+[k]).appendChild(newOperatorSelectEintrag2);
    	document.getElementById("operator"+[k]).appendChild(newOperatorSelectEintrag3);
    	document.getElementById("operator"+[k]).appendChild(newOperatorSelectEintrag4);	
    	
    	var newSpalte = document.createElement("td");
    		newSpalte.setAttribute("id","spalte1"+[k]);
    	document.getElementById("tabelle").appendChild(newSpalte);
    	
    	var newInputBoxZaehler = document.createElement("input");
    		newInputBoxZaehler.setAttribute("type","text");
    		newInputBoxZaehler.setAttribute("id","zaehler"+[k]);
    		newInputBoxZaehler.setAttribute("name","zaehler"+[k]);
    		newInputBoxZaehler.setAttribute("value","");	
    	document.getElementById("spalte1"+[k]).appendChild(newInputBoxZaehler);
    	document.getElementById("spalte1"+[k]).appendChild(document.createElement("hr"));
    
    	var newInputBoxNenner = document.createElement("input");
    		newInputBoxNenner.setAttribute("type","text");
    		newInputBoxNenner.setAttribute("id","nenner"+[k]);
    		newInputBoxNenner.setAttribute("name","nenner"+[k]);
    		newInputBoxNenner.setAttribute("value","");
    	document.getElementById("spalte1"+[k]).appendChild(newInputBoxNenner);
    	
    }
    
    function removeTextBox()
    {
    	document.getElementById("tabelle").removeChild("spalte1"+[k]);
    }
    
    	var submitButton = document.createElement("input");
    		submitButton.setAttribute("value","submit");
    		submitButton.setAttribute("type","submit");
    		submitButton.setAttribute("name","submit");
    		submitButton.setAttribute("id","submit");
    		
    	document.getElementById("testform").appendChild(submitButton);
    
    
    </script>
    nur das removen der elemente und die Texte in der option liste stimmen noch nicht. Die absendewerte sind soweit in Ordnung, aber die Auswahlliste ist leer


Ähnliche Themen

  1. Link automatisch im Text erstellen
    Von Borsti26 im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 26-10-2005, 00:25
  2. Automatisch Pfad erstellen
    Von BruceWilli im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 02-08-2005, 12:04
  3. Input Field erzeugen
    Von Tolwin im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 19-10-2004, 16:44
  4. input dings..
    Von fUriNaX- im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 11-07-2003, 02:23
  5. automatisch screenshots erstellen
    Von mo im Forum Serverseitige Programmierung
    Antworten: 2
    Letzter Beitrag: 18-04-2002, 14:15

Lesezeichen

Berechtigungen

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