[JS] multiple selection

[Verwijderd]

Er is al een eerdere post geweest hierover, maar we zijn met z'n tweeen bezig en we komen er echt niet uit. Dus...

Ik heb wel een andere manier gevonden om de selectionlists te "maken", maar het lukt niet om deze selections naar het volgende scherm te posten met POST of iets dergelijks.

(Er zit ook een stukje PHP in om filledBox te vullen)

Hieronder mijn code:

code:

<script language="JavaScript">
<!--
function move (from, to) {
    var fbox = new Array();
    var tbox = new Array();
    var lookup = new Array();

    for (i=0; i<to.length; i++) {
        if (to.options[i].value == -1) continue;
        lookup[to.options[i].text] = to.options[i].value;
        tbox[i] = to.options[i].text;
    }
    for (i=0; i<from.length; i++) {
        if (from.options[i].value == -1) continue;
        lookup[from.options[i].text] = from.options[i].value;
        if (from.options[i].selected)
            tbox[tbox.length] = from.options[i].text;
        else
            fbox[fbox.length] = from.options[i].text;
    }

    fbox.sort();
    tbox.sort();
    from.length = 0;
    to.length = 0;

    if (fbox.length == 0)
        from[0] = new Option('', -1);
    for (i=0; i<fbox.length; i++)
        from[i] = new Option(fbox[i], lookup[fbox[i]]);
    for (i=0; i<tbox.length; i++)
        to[i] = new Option(tbox[i], lookup[tbox[i]]);
}

function select_all (s) {
    for (i=0; i<s.length; i++)
        s.options[i].selected = 1;
}

//-->
</script>


<form action="test.php?dagplanningnr=3" method="post" name="test" >
  <div align="center">
    <p>
      <select multiple size="5" name="filledBox" style="width: 175">
        <?
include ("c:/stevesup/Connections/connection.php");
$sql="SELECT functienr, functienaam FROM functie order by functienaam";
$resultaat = mysql_query($sql) or die (mysql_error());
While ($row = mysql_fetch_array($resultaat, MYSQL_NUM)) { ?>
        <option value="<? echo $row[0]; ?>"><? echo $row[1]; ?> 
        <? } ?>
      </select>
      <select size="5" multiple name="emptyBox" style="width: 175">
      
      </select>
      <input onclick="move(this.form.filledBox, this.form.emptyBox)" type="button" value="&gt;&gt;">
      <input onclick="move(this.form.emptyBox,  this.form.filledBox)" type="button" value="&lt;&lt;">
    </p>
    <p>
      <input type="submit" name="Submit" value="Submit">
    </p>
  </div>
</form>

Hij geeft niks door, als ik in de andere pagina probeer emptyBox of iets dergelijks op te vragen. We zijn al heel veel tegen gekomen, maar niks werkt. Of we doen het niet goed.

Iemand die ons wil helpen???

PS: sluit voor de verandering dit topic niet metteen, misschien zijn er mensen die ons wel willen helpen. Bedankt)

[Pelle]

Wat gaat er nou precies fout? Als je mij dat kunt duidelijk maken op [e-mail] dan zal ik eens kijken of 'ie weer open kan.

[Pelle]

Mailtje gehad, zo te zien hebben de heren wel wat moeite gedaan om 't werkend te krijgen.

[Verwijderd]

Select box waardes worden alleen meegestuurd als er items geselecteerd zijn. M.a.w. als je emptyBox wilt uitlezen moet je ze eerst selecteren:

Pas aan:
<form action="test.php?dagplanningnr=3" method="post" name="test" >
naar:
<form action="test.php?dagplanningnr=3" method="post" name="test" onSubmit="return formSubmit(this)">

Voeg toe:
function formSubmit(fObj)
{
selObj = fObj["emptyBox"];
for(i=0;i<selObj.length;i++) selObj[i].selected=true;
return true;
}

[Verwijderd]

Pelle,
Even een snel vraagje tussendoor. Ik ben pas sinds 2 dagen op GoT maar jullie "strenge" beleid op topics wordt wel heel erg ver doorgevoerd. Is daar bewust voor gekozen?

[Pelle]

Er zijn een aantal zaken waar je hier rekening mee moet houden, en die vind je hier: Nieuw in W&G? Lees dit eerst.... (Beleid & FAQ)

Kortom: we zijn hier geen helpdesk, en er worden eisen gesteld aan je post. Voldoet je post niet (niet gezocht, geen goeie titel, geen duidelijke probleemstelling, etc) dan gaat hij gewoon dicht.

[Verwijderd]

edit:
pfff....hoezo te laat?

[Verwijderd]

Ok dat werkt. Nu heb ik nog een probleem. Hij geeft maar 1 waarde door en niet een array. Dat komt waarschijnlijk om dat ik hem niet emptyBox[] heb genoemd, maar zodra ik [] gebruik in de javascript krijg ik foutmeldingen.. Een idee om het op te lossen???

Met een ander javascript, wat ongeveer hetzelfde doet, werkt die selecteer functie van hier boven weer niet... Als iemand dat andere script wil zien, wil ik die ook wel posten....


Ideeen??

[crisp]

Verwijderd schreef op 16 oktober 2002 @ 17:26:
Ok dat werkt. Nu heb ik nog een probleem. Hij geeft maar 1 waarde door en niet een array. Dat komt waarschijnlijk om dat ik hem niet emptyBox[] heb genoemd, maar zodra ik [] gebruik in de javascript krijg ik foutmeldingen.. Een idee om het op te lossen???

Met een ander javascript, wat ongeveer hetzelfde doet, werkt die selecteer functie van hier boven weer niet... Als iemand dat andere script wil zien, wil ik die ook wel posten....


Ideeen??

Ja, je moet dan niet de verkorte schrijfwijze gebruiken voor de handle naar je form element, maar de lange (volgens mij alweer de 3e keer deze week dat ik dit typ):
ipv:

code:

this.form.emptyBox

dit:

code:

document.forms['test'].elements['emptyBox[]']

of desnoods:

code:

this.form['emptyBox[]']

[Verwijderd]

Ok, bedankt voor je hulp, maar nou ga ik nog even heel irritant worden. Als ik dat in mijn code verander krijg ik een foutmelding als ik op >> druk.
Waarschijnlijk heb ik het op de verkeerde manier gewijzigd.

Zou je a.j.b aan kunnen gegeven, waar ik dat dan precies moet veranderen??

Ik heb nu:

code:

<input onclick="move(this.form.filledBox, this.form.emptyBox)"

veranderd in:

code:

<input onclick="move(this.form.filledBox, document.forms['test'].elements['emptyBox[]'])"

en

code:

<input onclick="move(this.form.emptyBox,  this.form.filledBox)"

in

code:

<input onclick="move(document.forms['test'].elements['emptyBox[]'],  this.form.filledBox)"

wat moet ik verder nog veranderen???
Ook als ik de naam van emptyBox in emptyBox[] verander geeft hij een fout..

Wil je nog een keer helpen???

[crisp]

weet je zeker dat je ook de name van de select zelf hebt gewijzigd in "emptyBox[]"?

[Verwijderd]

Even voor de goede orde. Laat eens de nieuwste "complete" code zien inclusief probleemstelling, wantiksnaperdeballenmeervan.


En wat een onzin om: this.form['emptyBox[]'] te gebruiken. Je verwijst dan naar een element dat de naam emptyBox[] heet. Maar je bedoelt dus emptyBox en DAARVAn de array. Als het met de ene niet werkt dan werkt de andere (zelfde correcte verwijzing) ook niet.

[crisp]

Verwijderd schreef op 17 oktober 2002 @ 08:26:
Even voor de goede orde. Laat eens de nieuwste "complete" code zien inclusief probleemstelling, wantiksnaperdeballenmeervan.


En wat een onzin om: this.form['emptyBox[]'] te gebruiken. Je verwijst dan naar een element dat de naam emptyBox[] heet. Maar je bedoelt dus emptyBox en DAARVAn de array. Als het met de ene niet werkt dan werkt de andere (zelfde correcte verwijzing) ook niet.

wat nou onzin, juist door de multiple select emptyBox[] te noemen zorg je ervoor dat je selecties in de postdata terecht komen in een array die emptyBox heet...

[Verwijderd]

Ok jongens, Crisp heeft mij in iedergeval goe dgeholpen. Het werkt nu allemaal zoals het moet. Heb ook nog even een dubbelclick functie toegevoegd. Is nu best mooi geworden. Harstikke bedankt voor jullie tijd en moeite.

[Verwijderd]

Ok ik heb een nieuw probleem, opnieuw met de multiple selection box.

Ik heb 2 boxes waarbij ik de waarden van de een kan verplaatsen naar de ander, door een druk op een knop of door dubbel te klikken. Mijn code is als volgt opgebouwd.

code:

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

<script language="JavaScript">
<!--

function move (from, to) {
    var fbox = new Array();
    var tbox = new Array();
    var lookup = new Array();

    for (i=0; i<to.length; i++) {
        if (to.options[i].value == -1) continue;
        lookup[to.options[i].text] = to.options[i].value;
        tbox[i] = to.options[i].text;
    }
    for (i=0; i<from.length; i++) {
        if (from.options[i].value == -1) continue;
        lookup[from.options[i].text] = from.options[i].value;
        if (from.options[i].selected)
            tbox[tbox.length] = from.options[i].text;
        else
            fbox[fbox.length] = from.options[i].text;
    }

    from.length = 0;
    to.length = 0;

    if (fbox.length == 0)
        from[0] = new Option('', -1);
    for (i=0; i<fbox.length; i++)
        from[i] = new Option(fbox[i], lookup[fbox[i]]);
    for (i=0; i<tbox.length; i++)
        to[i] = new Option(tbox[i], lookup[tbox[i]]);
}

function select_all (s) {
    for (i=0; i<s.length; i++)
        s.options[i].selected = 1;
}

function formSubmit(fObj)
{
selObj = fObj["vt[]"];
for(i=0;i<selObj.length;i++) selObj[i].selected=true;

return true;
}

function countvalues(s) {
return s.length;
}
//-->
</script>
</head>
<body>
 <form name="frm_criteria" action="invoeren1.php?dagplanningnr=<? echo $dagplanningnr ?>" method="post" onSubmit="return formSubmit(this)">
  <table width="500" border=0 cellpadding=0 cellspacing=0>
    <tr align="middle" valign="top"> 
      <td width="45%" height="105"> <select multiple size="10" name="vt_besch" style="width: 175" ondblclick="move(this.form.vt_besch, this.form.elements['vt[]']); this.form.counter.value=(countvalues(this.form.elements['vt[]']))">
          <option>koe</option>
          <option>schaap</option>
          <option>beer</option>
          <option>paard</option>
          <option>krab</option>
        </select></td>
           <td width="15%" align="center" valign="top"> 
            <p> 
          <input onclick="move(this.form.vt_besch, this.form.elements['vt[]']); this.form.counter.value=(countvalues(this.form.elements['vt[]']))" type="button" value=" &gt; &gt;">
          </p>
          <p>
          <input onclick="move(this.form.elements['vt[]'], this.form.vt_besch); this.form.counter.value=(countvalues(this.form.elements['vt[]']))" type="button" value="&lt; &lt; ">
          </p>
           <p>
          <input name="counter" type="text" value="0" size="3" readonly>
           </p></td>
      <td width="40%"> <select name="vt[]" size="10" multiple style="width: 175" onDblClick="move(this.form.elements['vt[]'], this.form.vt_besch); this.form.counter.value=(countvalues(this.form.elements['vt[]']))">
        </select></td></tr>
            </table>
    </form>
  </body>
</html>

Het probleem is dat, als de tweede box (vt_besch) leeg is, en ik op de knop << druk de teller de waarde 1 aangeeft. Dit gebeurt ook als ik dubbel klik in de tweede box (vt[]) Hij moet natuurlijk 0 aangeven.

Ik dacht nu dat hij in vt[] staandaard een lege rij of iets dergelijks zette, maar...

Als ik in dezelfde situatie op >> klik of in vt_besch dubbelklik, dan geeft hij wel gewoon 0 aan!!!

Ik snap hier echt niks van, kan iemand mij helpen??

[r0bert]

code:

function countvalues(s) {
    if (s.options[0].innerText) return s.options.length;
    else return 0;
}

Er blijft op de een of andere manier standaard 1 lege option in de select staan maar dit werkt iig

[Verwijderd]

Ok, het gaat weer lekker....

Tot nu toe heb ik het wel door, maar nu ik weer met een probleem. Ik wil namenlijk de waarde uit vt_besch vergelijken met een andere waarde en dat in een if functie zetten. iets als:

code:

<input 
     <? if (GESELCTEERDEWRD IN vt_besch="vt122") { ?> 
           onclick="this.form.counter.value=0)"
     <? } ?> 
           type="button" value=" &gt; &gt;">

dus als het de geselecteerde waarde vt122 is moet de teller op 0 springen.
Kan iemand mij helpen?? Kom er echt niet meer uit.

vt_besch ziet er nog hetzelfde uit als in de vorige vraag.

[r0bert]

php of javascript

[r0bert]

_html

PHP:

<input onclick="this.form.counter.value = (document.getElementById('vt_besch').options[document.getElementById('vt_besch').options.selectedIndex].value == 'vt222') ? 0 : return false;" type="button" value=" &gt; &gt;">

_html

PHP:

<select onFocus="checkWaarde(this.options[this.options.selectedIndex].value);"......></select>

_javascript

code:

function checkWaarde(strWaarde)
{
   if (strWaarde == 'vt222')
      document.getElementById('counter').value = 0;
   /* of
   if (strWaarde == 'vt222')
      document.getElementById('counter').attachEvent('onClick', document.getElementById('counter').value = 0)
   */
}

Zoiets kan ik uit je vraag opmaken

Misschien moet je er alleen nog even een loop in bouwen ivm multiple select

edit:
Oeps, het was de bedoeling om mijn vorig post te editten, maar dat is zo te zien niet goed gegaan

[Verwijderd]

Ik heb het inmiddels opgelost, kwam ineens wat tegen namenlijk zo:

code:

<input onclick="javascript:if (this.form.vt_besch.options this.form.vt_besch.selectedIndex].value  == 'vt123') {this.form.counter.value=0)}" type="button" value=" &gt; &gt;">

Nu heb ik alleen het probleem dat hij hem met de waarde van de geselecteerde optie vergelijkt. In mijn geval is de waarde, de waarde die ik door wil geven als ik submit, maar de vergelijking moet eigenlijk gebeuren a.d.h.v. de naam van de optie.

Ideeen???

[r0bert]

naam van item: obj.name
tekst van item: obj.innerText

[Morrar]

"text"-attribuut gebruiken in plaats van "value"-attribuut van de geselecteerde option.

Bedoelde je dat?

edit:

Ah te laat... Denk alleen dat text wat historisch verantwoorder is dan innerText, d.w.z. NS4 werkt er ook mee...

[Verwijderd]

Zoals hieronder heb ik hem met innerText gedaan:

code:

<input onclick="javascript:if (this.form.vt_besch.options this.form.vt_besch.selectedIndex].innerText  == 'vt123') {this.form.counter.value=0)}" type="button" value=" &gt; &gt;">

En hij werkt!!!!

You the Best!
bedankt

[[eNeRGy]]

Alleen is innerText bij mijn weten geen standaard en zal het alleen maar werken onder IE.

[Verwijderd]

Euh... Volgend probleem.

Ik wil nu graag dat ik met meerdere waarden kan vergelijken, dus iets als:

if ...... in ('vt122','vt123','vt234')

Javascript kent echter blijkbaar geen IN-operator, ook geen LIKE.

Of als het kan nog beter.. met een array. Even om te visualiseren:

Hij moet een vergelijking maken met een array die ik mbv PHP uit een database haal. dus als het kan graag met een array vergelijken en anders met meerdere strings (dan maak ik van die array wel een string als ('wrd1','wrd2','wrd3')

Alvast bedankt

[r0bert]

gewoon een array maken jah..

code:

var arrWaardes = new Array();
arrWaardes['wrd1'] = true;
arrWaardes['wrd2'] = true;

PHP:

<input onclick="this.form.counter.value = (arrWaardes[document.getElementById('vt_besch').options[document.getElementById('vt_besch').options.selectedIndex].value]) ? 0 : return false;" type="button" value=" &gt; &gt;">

[Verwijderd]

denk niet dat ik dat bedoel. zal mijn hele code postene n dan proberen uit te leggen wat de bedoeling is. Ik kom er echt niet meer uit, dus.. als je me kan helpen graag!

code:

<!-- ja, zulke grote stukken code plaatsen doe je maar ergens anders -->

de bedoeling is dat hij in de eerste box (vt_besch) de waarden geeft die uit de tabel vt komen. Dat gaat goed.

Dan moet hij van box1 naar box2 kunnen verplaatsen. dat gaat ook goed. Hij moet een teller bijhouden, dat gaat ook goed.

Nu is het probleem dat hij bij het verplaatsen moet kijken of degene die je wil verplaatsen zich in de database bevindt (in onderhoud) Deze staan in een Array, namenlijk $row. Nu wil ik dus dat hij de waarde die je selecteerd vergelijkt met de waarden in $row. Dit wil dus niet lukken. Ik heb om hem werkend te maken maar even vt122 erin gezet. want het vergelijken met de array lukt dus nog niet...

Hoop dat het een beetje duidelijk is wat ik wil en dat je me kan helpen. Dan kan ik eindelijk weer slapen

/edit by Pelle
Zet je source maar online, niemand hier zit te wachten op jouw grote lappen code.

[ Voor 0% gewijzigd door Pelle op 23-10-2002 18:11 . Reden: grote lap code ]

[r0bert]

Hoe wil je in hemelsnaam een property van een DOMElement vergelijken met een PHP array ? Dat moet je via een reload, datastream, xmlHTTP request of iframe ofzo doen..

Of je moet de PHP array gewoon naar een JS array schrijven, voordat het document geladen wordt en dan kijken of de waarde zich in de JS array (=kopie van PHP array) bevind, zoals ik in de vorige post van moi bijvoorbeeld doe..