✔ Formular Aus- und Abwählen

phoenixneo · 7. September 2011

Hi allerseits!

Ich habe vor kurzem einen Auftrag von meinem Chef gefasst. Das Ziel ist ein Formular zu erstellen.

Grundsätzlich stellt das kein Problem für mich dar, da ich mit PHP recht gut umgehen kann.

Das Problem liegt nun darin, dass ich ein spezielles Feature in dieses Formular einbauen soll. Dies ist nur mit JavaScript möglich und genau da bin ich absolut nicht versiert!

Ich habe auch nicht gewusst wie ein solches Feature heisst oder nach was ich da suchen muss.

Am besten kopiert ihr den Code in eine HTML Datei und seht selbst.

Die 4 Buttons funktionieren bereits. Diese habe ich irgendwie aus dem Netz zusammenkopiert. Wenn ihr also eine andere Lösung seht bin ist sehr offen.

Nun zu den Problemen:
1. Da mehrere Options ausgewählt werden können, muss der "name" der Select ja ein [] am Ende des Namens haben, damit die Daten im Array verwendet werden können.
Sobald ich jedoch diese Zeichen beim Name einfüge, also das es vorhandene[] heisst und ich das oben im JavaScript anpasse funktioniert gar nix mehr :-(
2. Wenn diese Buttons betätigt werden, sollte sich die Option am alphabetisch richtigen Ort auf der anderen Seite eingliedern (dies gilt auch für Options mit Zahlen).
Ich weiss nicht ob das überhaupt möglich ist...?

Hier ist der Code

HTML:

<html>
<head>
<title>Aus- und Abw&auml;hlen</title>
<script language="JavaScript" type="text/javascript">
<!--
var count1 = 0;
var count2 = 0;

function right(form, selectbox){
    var result = ""; 
    for (var i = 0; i < form.vorhandene.length; i++) { 
        if (form.vorhandene.options[i].selected) { 
			var elOptNew = document.createElement('option');
			elOptNew.text = form.vorhandene.options[i].text;
			elOptNew.value = form.vorhandene.options[i].text;
			var elSel = document.getElementById('selectX2');
			try {
				elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
			}
			catch(ex) {
				elSel.add(elOptNew); // IE only
			}
        } 
    } 
	
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
		{
			if(selectbox.options[i].selected)
		selectbox.remove(i);
		}
}
function allright(form, selectbox){
	var result = ""; 
    for (var i = 0; i < form.vorhandene.length; i++) {

			var elOptNew = document.createElement('option');
			elOptNew.text = form.vorhandene.options[i].text;
			elOptNew.value = form.vorhandene.options[i].text;
			var elSel = document.getElementById('selectX2');
			try {
				elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
			}
			catch(ex) {
				elSel.add(elOptNew); // IE only
			}

    } 
	
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
	selectbox.remove(i);
	}
}
function allleft(form, selectbox){
	var result = ""; 
    for (var i = 0; i < form.selektierte.length; i++) {

			var elOptNew = document.createElement('option');
			elOptNew.text = form.selektierte.options[i].text;
			elOptNew.value = form.selektierte.options[i].text;
			var elSel = document.getElementById('selectX');
			try {
				elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
			}
			catch(ex) {
				elSel.add(elOptNew); // IE only
			}

    } 
	
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
	selectbox.remove(i);
	}
}
function left(form, selectbox) { 
    var result = ""; 
    for (var i = 0; i < form.selektierte.length; i++) { 
        if (form.selektierte.options[i].selected) { 
			var elOptNew = document.createElement('option');
			elOptNew.text = form.selektierte.options[i].text;
			elOptNew.value = form.selektierte.options[i].text;
			var elSel = document.getElementById('selectX');
			try {
				elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
			}
			catch(ex) {
				elSel.add(elOptNew); // IE only
			}
        } 
    } 
	
var i;
for(i=selectbox.options.length-1;i>=0;i--)
	{
		if(selectbox.options[i].selected)
	selectbox.remove(i);
	}
} 

//-->
</script>

</head>
<body>
<form action="#" method="post">
<table>
<tr><th>Vorhandene</<th><th>Optionen</th><th>Ausgew&auml;hlte</th></tr>
<tr><td>
<select id="selectX" name="vorhandene" style="width:150px" size="8" multiple="multiple">
<option selected="selected" value="user1">Apfel</option>
<option value="Baum">Baum</option>
<option value="Fahrrad">Fahrrad</option>
<option value="Fahrrad3">Fahrrad3</option>
<option value="Himmel">Himmel</option>
<option value="Nase">Nase</option>
<option value="Party">Party</option>
<option value="Sommer">Sommer</option>
<option value="Tanja">Tanja</option>
</select>
</td><td>


<input type="button" onclick="right(this.form, selectX)" style="height: 25px; width: 100px" name="rechts" value="&gt;"><br />
<input type="button" onclick="allright(this.form, selectX)" style="height: 25px; width: 100px" name="alle_rechts" value="&gt;&gt;"><br />
<br />
<input type="button" onclick="allleft(this.form, selectX2)" style="height: 25px; width: 100px" name="alle_links" value="&lt;&lt;"><br />
<input type="button" onclick="left(this.form, selectX2)" style="height: 25px; width: 100px" name="links" value="&lt;" /><br />


</td><td>
<select id="selectX2" name="selektierte" style="width:150px" size="8" multiple="multiple">
<option selected="selected" value="user4">Auto</option>
<option value="Fahrrad2">Fahrrad2</option>
<option value="Hase">Hase</option>
<option value="Hamster">Hamster</option>
</select>

</td></tr>
</table>
<br />
<input type="submit" name="speichern" value="   Speichern   ">
</form>
</body>
</html>

Helft mir bitteeeeeeee

LG Tanja

javaDeveloper2011 · 7. September 2011

Hi phoenixneo,

Also so kann man selecs alphabetisch sortieren:

Javascript:

function sortlist() {
    var list = document.getElementById('list');
    var values = new Array();
    // Werte in Array speichern
    for(var i=0; i<list.length; i++)  {
        values[i] = list.options[i].value;
    }
    // Array sortieren
    values.sort();
    // Select mit sortierten Werten füllen
    for(var i=0; i<list.length; i++)  {
        list.options[i].value = values[i];
        list.options[i].text = values[i];
    }
}

Gruß

phoenixneo · 7. September 2011

Hi javaDeveloper2011

Vielen Dank! Ich habe dein Script angepasst und eingefügt und siehe da...

Nun muss ich das Array noch haben. Die Names der select's mit den Array-Klammern [] ausstatten. Das Problem ist, dass mir JavaScript da ein Fehler gibt.

Als Beispiel nehme ich die Funktion "right". Ich habe den Namen im selectfeld angepasst (vorhandene[]) und die Funktion sollte logischerweise so aussehen.

HTML:

<script language="JavaScript" type="text/javascript">
function right(form, selectbox){
//AUSGEWÄHLTE WERTE IN DAS ANDERE SELECT SCHREIBEN
    var result = ""; 
    for (var i = 0; i < form.vorhandene[].length; i++) { 
        if (form.vorhandene[].options[i].selected) { 
			var elOptNew = document.createElement('option');
			elOptNew.text = form.vorhandene[].options[i].text;
			elOptNew.value = form.vorhandene[].options[i].text;
			var elSel = document.getElementById('selectX2');
			try {
				elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
			}
			catch(ex) {
				elSel.add(elOptNew); // IE only
			}
        } 
    } 
//AUSGEWÄHLTE WERTE IN DEM SELECT LÖSCHEN	
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
		{
			if(selectbox.options[i].selected)
		selectbox.remove(i);
		}
// SORTIEREN
		sortlist()

}
</script>

Das geht jedoch nicht.

Was mache ich falsch.

Am Ende sollte das Script mir mit dem speichern Knopf alle Options von selectX enthalten.

Hier nochmals der geänderte Code der funktioniert (ohne Array) mit der Alphabetfunktion.

HTML:

<html>
<head>
<title>Aus- und Abw&auml;hlen</title>
<script language="JavaScript" type="text/javascript">
<!--
var count1 = 0;
var count2 = 0;
function sortlist() { //FUNCTION ZUM SORTIEREN BEIDER SELECT'S 
    var list = document.getElementById('selectX');
    var values = new Array();
    // Werte in Array speichern
    for(var i=0; i<list.length; i++)  {
        values[i] = list.options[i].value;
    }
    // Array sortieren
    values.sort();
    // Select mit sortierten Werten füllen
    for(var i=0; i<list.length; i++)  {
        list.options[i].value = values[i];
        list.options[i].text = values[i];
    }
	var list = document.getElementById('selectX2');
    var values = new Array();
    // Werte in Array speichern
    for(var i=0; i<list.length; i++)  {
        values[i] = list.options[i].value;
    }
    // Array sortieren
    values.sort();
    // Select mit sortierten Werten füllen
    for(var i=0; i<list.length; i++)  {
        list.options[i].value = values[i];
        list.options[i].text = values[i];
    }
	
	
}
function right(form, selectbox){
//AUSGEWÄHLTE WERTE IN DAS ANDERE SELECT SCHREIBEN
    var result = ""; 
    for (var i = 0; i < form.vorhandene.length; i++) { 
        if (form.vorhandene.options[i].selected) { 
			var elOptNew = document.createElement('option');
			elOptNew.text = form.vorhandene.options[i].text;
			elOptNew.value = form.vorhandene.options[i].text;
			var elSel = document.getElementById('selectX2');
			try {
				elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
			}
			catch(ex) {
				elSel.add(elOptNew); // IE only
			}
        } 
    } 
//AUSGEWÄHLTE WERTE IN DEM SELECT LÖSCHEN	
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
		{
			if(selectbox.options[i].selected)
		selectbox.remove(i);
		}
// SORTIEREN
		sortlist()

}
function allright(form, selectbox){
//AUSGEWÄHLTE WERTE IN DAS ANDERE SELECT SCHREIBEN
	var result = ""; 
    for (var i = 0; i < form.vorhandene.length; i++) {

			var elOptNew = document.createElement('option');
			elOptNew.text = form.vorhandene.options[i].text;
			elOptNew.value = form.vorhandene.options[i].text;
			var elSel = document.getElementById('selectX2');
			try {
				elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
			}
			catch(ex) {
				elSel.add(elOptNew); // IE only
			}

    } 
//AUSGEWÄHLTE WERTE IN DEM SELECT LÖSCHEN		
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
	selectbox.remove(i);
	}
// SORTIEREN
	sortlist()
}
function allleft(form, selectbox){
//AUSGEWÄHLTE WERTE IN DAS ANDERE SELECT SCHREIBEN
	var result = ""; 
    for (var i = 0; i < form.selektierte.length; i++) {

			var elOptNew = document.createElement('option');
			elOptNew.text = form.selektierte.options[i].text;
			elOptNew.value = form.selektierte.options[i].text;
			var elSel = document.getElementById('selectX');
			try {
				elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
			}
			catch(ex) {
				elSel.add(elOptNew); // IE only
			}

    } 
//AUSGEWÄHLTE WERTE IN DEM SELECT LÖSCHEN		
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
	selectbox.remove(i);
	}
// SORTIEREN
	sortlist()
}
function left(form, selectbox) { 
//AUSGEWÄHLTE WERTE IN DAS ANDERE SELECT SCHREIBEN
    var result = ""; 
    for (var i = 0; i < form.selektierte.length; i++) { 
        if (form.selektierte.options[i].selected) { 
			var elOptNew = document.createElement('option');
			elOptNew.text = form.selektierte.options[i].text;
			elOptNew.value = form.selektierte.options[i].text;
			var elSel = document.getElementById('selectX');
			try {
				elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
			}
			catch(ex) {
				elSel.add(elOptNew); // IE only
			}
        } 
    } 
//AUSGEWÄHLTE WERTE IN DEM SELECT LÖSCHEN		
var i;
for(i=selectbox.options.length-1;i>=0;i--)
	{
		if(selectbox.options[i].selected)
	selectbox.remove(i);
	}
// SORTIEREN
	sortlist()
} 

//-->
</script>

</head>
<body>
<form action="#" method="post">
<table>
<tr><th>Vorhandene</<th><th>Optionen</th><th>Ausgew&auml;hlte</th></tr>
<tr><td>
<select id="selectX" name="vorhandene" style="width:150px" size="8" multiple="multiple">
<option selected="selected" value="Apfel">Apfel</option>
<option value="Baum">Baum</option>
<option value="Fahrrad">Fahrrad</option>
<option value="Fahrrad3">Fahrrad3</option>
<option value="Himmel">Himmel</option>
<option value="Nase">Nase</option>
<option value="Party">Party</option>
<option value="Sommer">Sommer</option>
<option value="Tanja">Tanja</option>
</select>
</td><td>


<input type="button" onclick="right(this.form, selectX)" style="height: 25px; width: 100px" name="rechts" value="&gt;"><br />
<input type="button" onclick="allright(this.form, selectX)" style="height: 25px; width: 100px" name="alle_rechts" value="&gt;&gt;"><br />
<br />
<input type="button" onclick="allleft(this.form, selectX2)" style="height: 25px; width: 100px" name="alle_links" value="&lt;&lt;"><br />
<input type="button" onclick="left(this.form, selectX2)" style="height: 25px; width: 100px" name="links" value="&lt;" /><br />


</td><td>
<select id="selectX2" name="selektierte" style="width:150px" size="8" multiple="multiple">
<option selected="selected" value="Auto">Auto</option>
<option value="Fahrrad2">Fahrrad2</option>
<option value="Hase">Hase</option>
<option value="Hamster">Hamster</option>
</select>

</td></tr>
</table>
<br />
<input type="submit" name="speichern" value="   Speichern   ">
</form>
</body>
</html>

javaDeveloper2011 · 7. September 2011

Hi Tanja,

also [] ohne Index-Zahl dazwischen ist schonmal grundsätzlich falsch.
So weit ich das beurteilen kann, wandern die options immer an die richtige stelle.

Damit beim Klick auf "Speichern" was passiert muss im <form>-Tag ein onsubmit-Attribut notiert sein.

Gruß

phoenixneo · 7. September 2011

Hi javaDeveloper2011

Ich hatte gedacht das es am Ende etwa so wie im Link beschrieben funktionieren könnte. Allerdings bin ich offen für anderes.

http://onlinetools.org/tricks/using_multiple_select.php

Was würdest du denn diesem onsubmit-Attribut mit geben? Kann ich auf diese Weise am Ende auch mit dem $_POST-Array arbeiten?

LG Tanja

javaDeveloper2011 · 7. September 2011

Hi,

ok, habe verstanden.
action="#", bedeutet, dass beim Submit die Seite selbst neu gelden wird, sie muss also ein PHP-Script sein/enthalten in diesem stehen dann in $_POST['selektierte'] die im rechten Array stehenden werte zur Verfügung.
Du kannst natürlich auch ein anderes dokument angeben: action="dankeFuersAusfuellen.php"

HTML:

onsubmit="selektiereAlle();"

und

Javascript:

function selektiereAlle() {
    var selectRechts = document.getElementById('selectX2');
    for(var i=0; i<selectRechts.length; i++)   selectRechts.options[i].selected = true;
}

So sollten auch alle werte in der $_POST-Variablen liegen.

Gruß

phoenixneo · 7. September 2011

Hallo

Habe das in den Code eingefügt.
Die Datei heisst jetzt test.php. Das mit dem Markieren ist eine gute Idee. Das Problem ist, dass es jetzt beim Ausgeben nur die letzte Option von selektierte ausgibt.

Wenn ich jedoch das gleiche Script nehme und beim name="selektierte[]" hinschreibe nimmt es alle dank deinem Markierungsscript.
Aber da sich der name verändert hat weiss JavaScript nicht mehr wie es bei den Button mit den neuen Namen umgehen muss.

test.php

HTML:

<html>
<head>
<title>Aus- und Abw&auml;hlen</title>
<script language="JavaScript" type="text/javascript">
<!--
var count1 = 0;
var count2 = 0;

function selektiereAlle() {
    var selectRechts = document.getElementById('selectX2');
    for(var i=0; i<selectRechts.length; i++)   selectRechts.options[i].selected = true;
}


function sortlist() {
    var list = document.getElementById('selectX');
    var values = new Array();
    // Werte in Array speichern
    for(var i=0; i<list.length; i++)  {
        values[i] = list.options[i].value;
    }
    // Array sortieren
    values.sort();
    // Select mit sortierten Werten füllen
    for(var i=0; i<list.length; i++)  {
        list.options[i].value = values[i];
        list.options[i].text = values[i];
    }
	var list = document.getElementById('selectX2');
    var values = new Array();
    // Werte in Array speichern
    for(var i=0; i<list.length; i++)  {
        values[i] = list.options[i].value;
    }
    // Array sortieren
    values.sort();
    // Select mit sortierten Werten füllen
    for(var i=0; i<list.length; i++)  {
        list.options[i].value = values[i];
        list.options[i].text = values[i];
    }
	
	
}
function right(form, selectbox){
    var result = ""; 
    for (var i = 0; i < form.vorhandene.length; i++) { 
        if (form.vorhandene.options[i].selected) { 
			var elOptNew = document.createElement('option');
			elOptNew.text = form.vorhandene.options[i].text;
			elOptNew.value = form.vorhandene.options[i].text;
			var elSel = document.getElementById('selectX2');
			try {
				elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
			}
			catch(ex) {
				elSel.add(elOptNew); // IE only
			}
        } 
    } 
	
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
		{
			if(selectbox.options[i].selected)
		selectbox.remove(i);
		}
		
		sortlist()

}
function allright(form, selectbox){
	var result = ""; 
    for (var i = 0; i < form.vorhandene.length; i++) {

			var elOptNew = document.createElement('option');
			elOptNew.text = form.vorhandene.options[i].text;
			elOptNew.value = form.vorhandene.options[i].text;
			var elSel = document.getElementById('selectX2');
			try {
				elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
			}
			catch(ex) {
				elSel.add(elOptNew); // IE only
			}

    } 
	
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
	selectbox.remove(i);
	}
	sortlist()
}
function allleft(form, selectbox){
	var result = ""; 
    for (var i = 0; i < form.selektierte.length; i++) {

			var elOptNew = document.createElement('option');
			elOptNew.text = form.selektierte.options[i].text;
			elOptNew.value = form.selektierte.options[i].text;
			var elSel = document.getElementById('selectX');
			try {
				elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
			}
			catch(ex) {
				elSel.add(elOptNew); // IE only
			}

    } 
	
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
	selectbox.remove(i);
	}
	sortlist()
}
function left(form, selectbox) { 
    var result = ""; 
    for (var i = 0; i < form.selektierte.length; i++) { 
        if (form.selektierte.options[i].selected) { 
			var elOptNew = document.createElement('option');
			elOptNew.text = form.selektierte.options[i].text;
			elOptNew.value = form.selektierte.options[i].text;
			var elSel = document.getElementById('selectX');
			try {
				elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
			}
			catch(ex) {
				elSel.add(elOptNew); // IE only
			}
        } 
    } 
	
var i;
for(i=selectbox.options.length-1;i>=0;i--)
	{
		if(selectbox.options[i].selected)
	selectbox.remove(i);
	}
	sortlist()
} 

//-->
</script>

</head>
<body>
<?php
if(isset($_POST['speichern'])){
	print_r($_POST['selektierte']);
}

?>

<form action="test.php" onsubmit="selektiereAlle();" method="post">
<table>
<tr><th>Vorhandene</<th><th>Optionen</th><th>Ausgew&auml;hlte</th></tr>
<tr><td>
<select id="selectX" name="vorhandene" style="width:150px" size="8" multiple="multiple">
<option selected="selected" value="Apfel">Apfel</option>
<option value="Baum">Baum</option>
<option value="Fahrrad">Fahrrad</option>
<option value="Fahrrad3">Fahrrad3</option>
<option value="Himmel">Himmel</option>
<option value="Nase">Nase</option>
<option value="Party">Party</option>
<option value="Sommer">Sommer</option>
<option value="Tanja">Tanja</option>
</select>
</td><td>


<input type="button" onclick="right(this.form, selectX)" style="height: 25px; width: 100px" name="rechts" value="&gt;"><br />
<input type="button" onclick="allright(this.form, selectX)" style="height: 25px; width: 100px" name="alle_rechts" value="&gt;&gt;"><br />
<br />
<input type="button" onclick="allleft(this.form, selectX2)" style="height: 25px; width: 100px" name="alle_links" value="&lt;&lt;"><br />
<input type="button" onclick="left(this.form, selectX2)" style="height: 25px; width: 100px" name="links" value="&lt;" /><br />


</td><td>
<select id="selectX2" name="selektierte" style="width:150px" size="8" multiple="multiple">
<option selected="selected" value="Auto">Auto</option>
<option value="Fahrrad2">Fahrrad2</option>
<option value="Hase">Hase</option>
<option value="Hamster">Hamster</option>
</select>

</td></tr>
</table>
<br />
<input type="submit" name="speichern" value="   Speichern   ">
</form>
</body>
</html>

javaDeveloper2011 · 7. September 2011

Sprich die selects doch im JS mit der ID an.

phoenixneo · 7. September 2011

Das habe ich versucht... aber das scheint bereits zu schwer zu sein

... für mich

Aber wenn das machbar ist, und ich die names so bennenen kann wäre natürlich super

Gruss Tanj

javaDeveloper2011 · 7. September 2011

Tausch doch einfach immer

Javascript:

form.selektierte

durch

Javascript:

document.getElementById('selectX2')

aus.

✔ Formular Aus- und Abwählen

phoenixneo

Grünschnabel

javaDeveloper2011

Erfahrenes Mitglied

phoenixneo

Grünschnabel

javaDeveloper2011

Erfahrenes Mitglied

phoenixneo

Grünschnabel

javaDeveloper2011

Erfahrenes Mitglied

phoenixneo

Grünschnabel

javaDeveloper2011

Erfahrenes Mitglied

phoenixneo

Grünschnabel

javaDeveloper2011

Erfahrenes Mitglied

Neue Beiträge