Alle <select> Elemente übergeben

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

Autor dieses Themas
ultimate-bravery

ultimate-bravery hat kostenlosen Webspace.
23:18, 11.12.2013
Hallo zusammen.
Ich bin mir nicht sicher, ob das Thema hier hin oder ins PHP Forum gehört. Also hier mein Vorhaben:

Ich habe zwei tag/listen">Listen. Die erste ist am Anfang gefüllt und die zweite ist leer. Dann kann man die Elemente der ersten Liste in die zweite Liste verschieben. Dazu benutze ich den Code von dieser Seite:

http://mabraham.de/jquery-select-options-zwischen-selectboxes-verschieben/

Danach würde ich gerne die Elemente, die in der zweiten Liste stehen, z.B. in einer Datenbank speichern. Da weiß ich nicht weiter. Wenn alle Elemente in der zweiten Liste selectiert wären, könnte man die ja mit PHP übergeben. Aber kann man die Elemente auch mit PHP übergeben, wenn sie nicht selectiert sind? Oder brauch man dafür Javascript oder Ajax oder sowas?

Ich würde mich über Hilfe freuen. Und falls sowas nur mit Javascript oder Ajax etc lösbar ist, würde ich mich auch über Programmcode freuen, da ich mich damit kaum auskenne.

Liebe Grüße

EDIT:

Ich habe mir selbst was mit Javascript zusammen gebastelt:
```
function saveOptions(){
	var i = document.meinFormular.meineListe.length;
	var url = "eintragen.php?";
	for(var j = 0; j<i; j++){
		url += j + "=" + document.meinFormular.meineListe.options[j].value + "&";	
	}
	window.location.href = url;
}
```
So wird jede <option> an die url als Get Variable dran gehangen. Und in eintragen.php soll dann mit einer for-Schleife immer überprüft werden, ob eine Get Variable existiert und falls ja soll der Wert dann in eine Datenbank geschrieben werden. So hab ich das vor, muss es allerdings noch umsetzen, was ich dann morgen machen werde. Falls ihr Verbesserungsvorschläge oder ganz andere Ideen habt, könnt ihr das gerne noch hier schreiben :)

Beitrag zuletzt geändert: 12.12.2013 0:52:14 von ultimate-bravery
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

7:22, 12.12.2013

muss es denn GET sein ?

Du kannst auch einfach in der zweiten Liste einen

name="select_pub[]"

einfügen
und alle (auch vorgegebene) Elemente mit Attribut selected="selected" versehen
und das Formular per POST und Sende-Button abschicken,
dann bekommst Du die ausgewählten Elemente als Array

EDIT: und dann brauchst Du auch keine JS submit Funktion wie saveOptions()

Beispiel:

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script type="text/javascript">
function moveSelectedItems(source, destination){
	var selected = $(source+' option:selected').remove();
	var sorted = $.makeArray($(destination+' option').add(selected)).sort(function(a,b){
		return $(a).text() > $(b).text() ? 1:-1;
	});
	$(destination).empty().append(sorted);
}

$(document).ready(function(){
	$('#t1add').click(function(){
		moveSelectedItems('#t1available', '#t1published');
	});
	$('#t1remove').click(function(){
		moveSelectedItems('#t1published', '#t1available');
	});
	$('#t1addAll').click(function(){
		$('#t1available option').attr('selected', 'true');
		moveSelectedItems('#t1available', '#t1published');
	});
	$('#t1removeAll').click(function(){
		$('#t1published option').attr('selected', 'true');
		moveSelectedItems('#t1published', '#t1available');
	});
});
</script>

</head>

<body bgcolor="#FFFFFF" text="#000000">

<br>
<br>
<br>

<?php 
// ----------------------------------------------------- 

if (!empty($_POST['select_pub'])) { 

$posted_data = $_POST['select_pub']; 

print "<pre style=\"margin:12px 4px; padding:6px; text-align:left; background:#DEDEDE; color:#000066;\">\n";
print_r($posted_data);  
print "</pre>\n"; 

print "<br>\n";
print "<br>\n";

}


// ----------------------------------------------------- 
?>

<form name="form1" method="POST" action="">
<div style="float:left">
	<label for="t1available" style="display:block">Available projects</label>
	<select id="t1available" size=10 style="height:200px;width:200px" multiple>
	<option value="Project 1">Project 1</option>
	<option value="Project 2">Project 2</option>
	<option value="Project 4">Project 4</option>
	</select>
</div>
<div style="float:left;padding:0 10px 0 10px">
	<br />
	<input id="t1add" style="width:50px" type="button" value=">" /><br />
	<input id="t1addAll" style="width:50px" type="button" value=">>" /><br />
	<input id="t1removeAll" style="width:50px" type="button" value="<<" /><br />
	<input id="t1remove" style="width:50px" type="button" value="<" /><br />
</div>
<div style="float:left">
	<label for="t1published" style="display:block">Published projects</label>
	<select id="t1published" name="select_pub[]" size=10 style="height:200px;width:200px" multiple>
	<option value="Project 3" selected="selected">Project 3</option>
	</select>
</div>

<p style="clear:both; margin:16px; padding:4px;"> OK ... <input type="submit" name="Abschicken" value="Abschicken"> </p>

</form>


<br>
<br>
<br>

</body>
</html>

beachte NEU ist

name="select_pub[]"

und bei option

selected="selected"

in der zweiten Auswahl-Liste,
und NEU ist auch der "submit" Button (Abschicken) und

method="POST"

im <form> Tag

wichtig sind dei eckigen Klammern bei name="select_pub[]"
damit nach Absenden in der _POST Variable ein Array ankommt
welches die gewählten Elemente enthält ... siehe im Beispiel

Beitrag zuletzt geändert: 12.12.2013 7:32:14 von webrank

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

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city