php - Multiple Select bokse med Javascript og PHP - Udvikleren.dk

Tags: php

Bruger #5297 @ 16.07.05 10:54

Hejsa

Jeg har et stort problem med med en multiple select boks, hvor der også bliver brugt Javascript. Javascript koden gør, at der er 2 multiple select bokse, hvor man kan tilføje og fjerne flere nationer.

Mit problem er så, at jeg gerne vil kunne bruge PHP til at fange de forskellige valgmuligheder, som brugeren har valgt.

Jeg ved, hvis du skal trække et array ud fra en almindelig multiple select boks, så skal man skrive:

Kode

<select multiple name="select1[]" size='8' style="width:200px">

Hvis man ikke gør det, så overskriver den bare de forskellige valgmuligheder efterhånden, som den gennemgår de valgte muligheder, hvilket betyder det kun er den sidste værdi, man har valgt, som bliver sendt videre.

Mit problem er bare, at hvis jeg gør det så kan jeg ikke få javascript koden til at virke, så man kan tilføje og fjerne forskellige muligheder i de 2 multiple select bokse..

Javascript koden.

Kode

<script type="text/javascript">
<!-- Start 

function deleteOption(object,index) {
    object.options[index] = null;
}

function addOption(object,text,value) {
    var defaultSelected = true;
    var selected = true;
    var optionName = new Option(text, value, defaultSelected, selected)
    object.options[object.length] = optionName;
}

function copySelected(fromObject,toObject) {
    for (var i=0, l=fromObject.options.length;i<l;i++) {
        if (fromObject.options[i].selected)
            addOption(toObject,fromObject.options[i].text,fromObject.options[i].value);
    }
    for (var i=fromObject.options.length-1;i>-1;i--) {
        if (fromObject.options[i].selected)
            deleteOption(fromObject,i);
    }
}

function SelectAll(fromObject) {
    for (var i=0, l=fromObject.options.length;i<l;i++) {
        fromObject.options[i].text,fromObject.options[i].selected = true;
    }
}

// Slut -->
</script>

Koden til selve formen.

Kode

<td>
	<form method="post" action="trial.php?pushmenuid=<?= stripslashes($submitknap['menuid']); ?>&pushsubmenuid=<?= stripslashes($submitknap['submenuid']); ?>">
	<table>
	<tr>
	<td valign="top">
	<fieldset>
	<legend>Personal information</legend>
	<div class="divregistrering">
	<label for="userid">Userid:</label><input name="userid" type="text" 
	id="userid" value="<? echo $userid; ?>" />
	<label for="firstname">First Name:</label><input name="firstname" type="text" 
	id="firstname" value="<? echo $firstname; ?>" />
	<label for="lastname">Last Name:</label><input name="lastname" type="text" 
	id="lastname" value="<? echo $lastname; ?>" />

<table>
<tr>
<td><label for="nationid">Nation:</label><br>
<select multiple name="select1" size='8' style="width:200px">
</select>
</td>

<td> 
<input type='button' style="width:70px;" value='< Tilføj'
  onClick="copySelected(this.form.select2,this.form.select1)">
<br>
<input type='button' style="width:70px;" value='Fjern  >'
  onClick="copySelected(this.form.select1,this.form.select2)">
</td>

<td>Tilgængelige Nationer<br>
<select multiple name="select2" size='8' style="width:200px">
	<option value='' selected></option>		
	<?
	while($data = mysql_fetch_array($foresp)) {
	echo" <option value='$data[0]'>$data[1]</option> ";}
	?>
</select>
</td>
</tr>
</table>
<p>
	</div>
	</fieldset>
	<div class="login"><input type="button" value="Tilføj Skuespiller" 
	onClick="SelectAll(this.form.elements.select1);submit()"></div>
</td>
</tr>
</table>
</form>
</td>

Til sidt vil jeg også gerne lige høre, hvordan jeg fanger det array, som bliver lavet i denne fil med PHP/MySQL, så jeg kan få indsat dataene i tabellen?

Jeg håber virkelig der er nogle der kan hjælpe, da jeg har brugt meget tid selv på at finde en løsning, men uden held.

Mvh

Sol

6 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #5620 @ 16.07.05 13:05

1.500

Kode

<input type='button' style="width:70px;" value='< Tilføj'
  onClick="copySelected(this.form.elements['select2[]'],this.form.elements['select1[]'])">
<br>
<input type='button' style="width:70px;" value='Fjern  >'
  onClick="copySelected(this.form.elements['select1[]'],this.form.elements['select2[]'])">

-----------------------------------------------------------------------------

Min side ->www.the-hive.dk/~donp/

Bruger #3143 @ 16.07.05 14:22

1.965

Giv selectsne et id og hent dem via document.getElementById

Bruger #5297 @ 16.07.05 19:06

Kode

<input type='button' style="width:70px;" value='< Tilføj'
  onClick="copySelected(this.form.elements['select2[]'],this.form.elements['select1[]'])">

<input type='button' style="width:70px;" value='Fjern  >'
  onClick="copySelected(this.form.elements['select1[]'],this.form.elements['select2[]'])">

-----------------------------------------------------------------------------

Min side ->www.the-hive.dk/~donp/

Hvis jeg indsætter denne kode i stedet for den der eksisterer, så kommer der er javascript fejl:

Error 'options' is null or not an object.

Fejlen henviser til denne linje i javascriptkoden:

Kode

    object.options[object.length] = optionName;

Som er en del af denne kode i javascriptet:

Kode

function addOption(object,text,value) {
    var defaultSelected = true;
    var selected = true;
    var optionName = new Option(text, value, defaultSelected, selected)
    object.options[object.length] = optionName;
}

Jeg skal lige gøre opmærksom på jeg ikke har ret meget forstand på javascript. Så jeg håber i vil være søde, at skære det lidt ud i pap.

Mvh

Sol

Bruger #5297 @ 16.07.05 19:07

Giv selectsne et id og hent dem via document.getElementById

Vil du være sød at give et eksempel?

Mvh

Sol

Bruger #5620 @ 17.07.05 11:33

1.500

Glemte at sige at du indlysende nok skal rette navnene på din selects til select1[] og select2[]

eller hvis de vil gøre sådan som den anden poster forslår så kan du give dine select id'er

<select id="s1">
<select id="s2">

som kan findes med document.getElementById('s1') og document.getElementById('s2')
-----------------------------------------------------------------------------

Min side ->www.the-hive.dk/~donp/

Bruger #5297 @ 17.07.05 12:49

Glemte at sige at du indlysende nok skal rette navnene på din selects til select1[] og select2[]

eller hvis de vil gøre sådan som den anden poster forslår så kan du give dine select id'er

<select id="s1">
<select id="s2">

som kan findes med document.getElementById('s1') og document.getElementById('s2')
-----------------------------------------------------------------------------

Min side ->www.the-hive.dk/~donp/

Jeg vil bare lige skrive koden igen, som jeg har fået den til at virke, hvis andre en dag for brug for det.

Javascript koden, som placeres imellem <head>-tagget:

Kode

<script type="text/javascript">
<!-- Start 

function deleteOption(object,index) {
    object.options[index] = null;
}

function addOption(object,text,value) {
    var defaultSelected = true;
    var selected = true;
    var optionName = new Option(text, value, defaultSelected, selected)
    object.options[object.length] = optionName;
}

function copySelected(fromObject,toObject) {
    for (var i=0, l=fromObject.options.length;i<l;i++) {
        if (fromObject.options[i].selected)
            addOption(toObject,fromObject.options[i].text,fromObject.options[i].value);
    }
    for (var i=fromObject.options.length-1;i>-1;i--) {
        if (fromObject.options[i].selected)
            deleteOption(fromObject,i);
    }
}

function SelectAll(fromObject) {
    for (var i=0, l=fromObject.options.length;i<l;i++) {
        fromObject.options[i].text,fromObject.options[i].selected = true;
    }
}

// Slut -->
</script>

Og multiple select boksen, som placeres i <body>-tagget:

Kode

<td>
	<form method="post" action="trial.php?pushmenuid=<?= stripslashes($submitknap['menuid']); ?>&pushsubmenuid=<?= stripslashes($submitknap['submenuid']); ?>">
	<table>
	<tr>
	<td valign="top">
	<fieldset>
	<legend>Personal information</legend>
	<div class="divregistrering">
	<label for="userid">Userid:</label><input name="userid" type="text" 
	id="userid" value="<? echo $userid; ?>" />
	<label for="firstname">First Name:</label><input name="firstname" type="text" 
	id="firstname" value="<? echo $firstname; ?>" />
	<label for="lastname">Last Name:</label><input name="lastname" type="text" 
	id="lastname" value="<? echo $lastname; ?>" />

<table>
<tr>
<td><label for="nationid">Nation:</label><br>
<select multiple name="select1[]" size='8' style="width:200px">
</select>
</td>

<td> 
<input type='button' style="width:70px;" value='< Tilføj'
  onClick="copySelected(this.form.elements['select2[]'],this.form.elements['select1[]'])">

<input type='button' style="width:70px;" value='Fjern  >'
  onClick="copySelected(this.form.elements['select1[]'],this.form.elements['select2[]'])">
</td>

<td>Tilgængelige Nationer<br>
<select multiple name="select2[]" size='8' style="width:200px">
	<option value='' selected></option>		
	<?
	while($data = mysql_fetch_array($foresp)) {
	echo" <option value='$data[0]'>$data[1]</option> ";}
	?>
</select>
</td>
</tr>
</table>
<p>
	</div>
	</fieldset>
	<div class="login"><input type="button" value="Tilføj Skuespiller" 
	onClick="SelectAll(this.form.elements['select1[]']);submit()"></div>
</td>
</tr>
</table>
</form>
</td>

Og til slut den kode, som bruges til at fange det array, som er blevet lavet af ovenstående kode:

Kode

$all = $_REQUEST['select1']; 
$stoerrelse = sizeof($all); 
for ($i = 0; $i < $stoerrelse; $i++) { 
$tekst = "$all[$i] "; 


$sql1 = mysql_query("INSERT INTO test (userid, nationid) values 
('$userid' , '$tekst')"); 

};

Jeg vil til slut lige takke mange gange for hjælpen..

Mvh

Sol

Multiple Select bokse med Javascript og PHP

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler