add/remove input boxen in Formular

newbie88 · 02.03.2010, 13:07

Vorweg: Bin noch nen Anfänger und mein Problem hat nicht unbedingt was mit JavaScript zu tun.

Bin im Internet auf ein Script gestoßen welches mir Input Boxen in mein Formular einfügt.
Habe auch aschon raus gefunden wie ich diese wieder löschen kann.
Jetz mein Problem beim löschen löscht er nicht den letzten von unten, sondern den 2 von oben.
Was auch sinn ergbit weil, da er die neuen Felder ja von oben einfügt.
Nun in meinem Fall möchte ich aber das er das unterste löscht wie stelle ich das am besten an.

Hier der Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
	<head>
		<title>48Styles - Admin</title>
		<link rel="stylesheet" href="style.css">
		<script language="JavaScript" type="text/javascript">
	      var a=1;
        var b; 
			function addupload()
			{
	
        a++;
        if (a >= 10)
        {
        alert('Mehr als 9 Uplloads sind nicht erlaubt!')
        a--;
        }
        
        else
        {
				var row = document.getElementById("table").insertRow( document.getElementById("tr").rowIndex+1 );
				var cell = row.insertCell( 0 );
				cell.className = 'links';
				
				
				cell = row.insertCell( 1 );
				
				var input = document.createElement( 'input' );
				input.type = 'file';
				input.name = 'file'+a;
				input.size= '40';
				input.id = a;
				cell.appendChild( input );

				document.getElementById("i").value = "Anzahl Felder " + a;
				}
				}

			
function removeupload() {
if (a<=1)
{
alert("Es muss mindestens ein Feld bleiben")
}
else
{


var el = document.getElementById(a);
el.parentNode.removeChild(el);
a--;
document.getElementById("i").value = "Anzahl Felder " + a;
return false;


}
}

</script>
	</head>

	<body leftmargin="2" topmargin="5">
		<table cellspacing="0" cellpadding="0" width="480" border ="5">
			
			<tr>
      <td colspan ="2">
				<form name="form" action="index.php?link=pics&func=addpics" method="post" enctype="multipart/form-data">
					<table cellspacing="0" border="0" cellpadding="0" width="450" id="table">
						<tr id="tr"><td width="25%" class="links">
            							<input type="button" onclick="javascript:addupload();" value="+">
						            	<input type="button" onclick="javascript:removeupload();" value="-"><br>
						</td>
						<td width="50%" class="zeug">

							<input type="file" name="upload" size="40"/>
					
						</td></tr>
					
					
					
						<tr><td width="75%" class="links">
						</td>
						<td width="75%" class="rechts">
							<input type="submit" name="submit" class="input2" value="Hinzuf&uuml;gen" />
						</td></tr>
						<h2>Upload Popup /max 9 Anhänge</h2>
					<input id="i" type="text" value="Anzahl Felder 1" name="Anzahlvorhanden" readonly/>
					</table>
				</form>
			</td></tr>
		</table>
	</body>

Hatte schon einen Lösungsanstz aber der geht leider nicht so wie ich wollte

:

Code:

function removeupload() {
if (a<=1)
{
alert("Es muss mindestens ein Feld bleiben")
}
else
{

switch (a) {

  case "2":
    b=8;
    break;
  case "3":
    b=7;
    break;
  case "4":
    b=6;
    break;
  case "5":
    b=5;
    break;
  case "6":
    b=4;
    break;
  case "7":
    b=3;
    break;
  case "8":
    b=2;
    break;
  case "9":
    b=1;
    break;

}


var el = document.getElementById(b);
el.parentNode.removeChild(el);
a--;
document.getElementById("i").value = "Anzahl Felder " + a;
return false;


}
}

Firebug Fehlermeldung:

el is null
removeupload()test.html (Zeile 81)
function onclick(event) { javascript: removeupload(); }(Object { name="event"})2 (Zeile 3)
[Break on this error] el.parentNode.removeChild(el);
test.html (Zeile 81

JumperII · 02.03.2010, 17:10

Hallo,

warum baust Du denn JS nicht dahingehend um, dass die neuen felder statt oben unten hinzugefügt werden? Dann passt die Logik und du musst kein kompliziertes handling für die Verwaltung der IDs der Eingabefelder machen.

Gemeint ist ....
1. ich blase auf 10 felder auf {1,10,9,8,7,6,5,4,3,2}
2. ich nehme 5 weg ... bleiben {1,10,9,8,7}
3. ich gebe 3 wieder zu .... bleiben in Reihenfolge von oben nach unten {1,4,3,2,10,9,8,7}
...

ach ja ... und hier die Änderung ....

Code:

var row = document.getElementById("table").insertRow( document.getElementById("tr").rowIndex+a-1 );

Gruß,
Jumper, the II.

newbie88 · 03.03.2010, 09:05

Manchmal ist die Lösung sooooooo einfach.
Danke

Sry bin noch nicht so drin in der Programmierung^^

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
PHP: Formular Generator	Zergling-new	Tutorials	16	06.07.2010 03:14
Mehrseitiges verzweigtes Formular	RobbyNaish	PHP Tipps 2009	1	19.12.2009 01:51
[Erledigt] Formular ergebnisse direkt unter Formular ausgeben	www.donald.com^	PHP Tipps 2009	3	16.11.2009 17:20
PDF Formular ausfüllen mit PHP Formular	oomworld	PHP Tipps 2009	1	26.03.2009 19:09
Wie würdet ihr das Formular submitten?	pras	Datenbanken	5	05.03.2009 21:33
Problem mit Formular, Daten an datenbank senden	Aurec	PHP Tipps 2008	11	20.11.2008 18:17
2 Boxen nebeneinander, restliche Text unter den Boxen.	PsychoEagle	HTML, Usability und Barrierefreiheit	2	29.03.2007 11:57
Wert aus Textfeld in neues Formular übernehmen (kein Submit)	PsychoEagle	HTML, Usability und Barrierefreiheit	9	02.01.2007 14:51
getrennte layouts für input boxen	Promaetheus	HTML, Usability und Barrierefreiheit	7	30.11.2005 07:39
[Erledigt] Formular in Formular		HTML, Usability und Barrierefreiheit	4	19.10.2005 12:18
csv Import über file input in Formular	bexxta	PHP Tipps 2005-2	3	22.06.2005 09:23
[Erledigt] Im Formular user abfragen?		Datenbanken	3	06.01.2005 10:51
[Erledigt] Daten in einem Formular ausgeben und ändern		PHP Tipps 2004-2	7	07.12.2004 17:22
formular file input vorbelegen		HTML, Usability und Barrierefreiheit	3	02.08.2004 12:06
[Erledigt] Daten in neuem Formular anzeigen		PHP Tipps 2004	6	21.07.2004 10:44


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

02.03.2010, 17:10
JumperII Erfahrener Benutzer Registriert seit: 26.07.2006 Beiträge: 121	Hallo, warum baust Du denn JS nicht dahingehend um, dass die neuen felder statt oben unten hinzugefügt werden? Dann passt die Logik und du musst kein kompliziertes handling für die Verwaltung der IDs der Eingabefelder machen. Gemeint ist .... 1. ich blase auf 10 felder auf {1,10,9,8,7,6,5,4,3,2} 2. ich nehme 5 weg ... bleiben {1,10,9,8,7} 3. ich gebe 3 wieder zu .... bleiben in Reihenfolge von oben nach unten {1,4,3,2,10,9,8,7} ... ach ja ... und hier die Änderung .... Code: var row = document.getElementById("table").insertRow( document.getElementById("tr").rowIndex+a-1 ); Gruß, Jumper, the II.

03.03.2010, 09:05
newbie88 Benutzer Registriert seit: 19.02.2010 Beiträge: 57 PHP-Kenntnisse: Anfänger	Manchmal ist die Lösung sooooooo einfach. Danke Sry bin noch nicht so drin in der Programmierung^^